Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Broken bootstrap's InputGroupAddon styles #6

Closed
4 tasks done
MarkEhr opened this issue Mar 18, 2019 · 1 comment
Closed
4 tasks done

Broken bootstrap's InputGroupAddon styles #6

MarkEhr opened this issue Mar 18, 2019 · 1 comment
Labels
bug Something isn't working

Comments

@MarkEhr
Copy link

MarkEhr commented Mar 18, 2019

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When using InputGroupAddon's on input groups, the addons should be the same height as the input and match the background/no background of the input

Current Behavior

Different height on addon when using anything other than an icon.
When using type="append" the background is always white and text color is white as well.

Steps to Reproduce

Add this code anywhere in the template:

        <InputGroup>
            <InputGroupAddon addonType="prepend">
                <InputGroupText>$</InputGroupText>
            </InputGroupAddon>
            <Input  />
            <InputGroupAddon addonType="append">
                <InputGroupText><i className="tim-icons icon-single-02" /></InputGroupText>
            </InputGroupAddon>
        </InputGroup>

image

@einazare
Copy link
Contributor

Hello there @MarkEhr ,

Thank you for your interest in working with our product.
Please create a new scss file and import it inside our own scss main file (src/assets/scss/black-dashboard-pro-react.scss) and then add the following lines of code:

.input-group-text{
  line-height: 1;
}
.form-control + .input-group-append .input-group-text, .form-control + .input-group-prepend .input-group-text {
  background-color: transparent;
}
.input-group-append, .input-group-prepend {
  border: none;
}
.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Sorry for this inconvenience. We'll repair this on our next update.

Best,
Manu

@einazare einazare added the bug Something isn't working label Mar 19, 2019
@einazare einazare closed this as completed Mar 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants