Topic: Input group not showing borders

einar pro asked 4 years ago


I am trying to add a textbox (input) with borders.When I use this code below which I have copied from the MDB web and should be a textbox with borders(see this page: https://mdbootstrap.com/components/bootstrap-input-group/) I only get a textbox (input)with underline which turns blue when clicked on.Does anyone have a clue?<div class="input-group md-form form-sm form-5 pl-0"> <input type="text" class="form-control mt-0 purple-border" placeholder="Recipient's username" aria-describedby="basic-addon12"> <span class="input-group-addon purple lighten-3 black-text" id="basic-addon12">@example.com</span></div>

Marta Wierzbicka staff answered 4 years ago


Hi, this is a part of MDB Expansion project where we've added a lot of additional components which aren't elements of MDB foundations. Look here, you will see more possibilities: https://mdbootstrap.com/components/bootstrap-input-group/#colorful . There might be some bugs in our documentation now because we're updating one. Best, Marta

einar pro commented 4 years ago

I had already seen this. This is where I got the code I was using. I got it now so thanks for the help :)

Marta Wierzbicka staff commented 4 years ago

You're welcome.

Marta Wierzbicka staff answered 4 years ago


Hi, maybe you need this: HTML:
<div class="input-group md-form form-sm form-3 pl-0">
    <span class="input-group-addon amber lighten-3 black-text" id="basic-addon9">@</span>
    <input type="text" class="form-control mt-0 amber-border" placeholder="Username" aria-describedby="basic-addon9">
</div>
CSS:
.input-group.md-form.form-sm.form-3 input {
    border: 1px solid #bdbdbd;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).amber-border  {
    border: 1px solid #ffca28;
    box-shadow: none;
}
Best, Marta

einar pro commented 4 years ago

So it is not a part of MDB bootstrap? Do I have to add it to my custom style css file?

einar pro commented 4 years ago

I have tried it out and it is as expected now. But it would have saved some time for a beginner to mention that this was not a part of the standard mdb bootstrap css. Anyway - thanks.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags