Input group not showing borders

Topic: Input group not showing borders

einar pro asked 6 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>

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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 6 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 6 years ago

You're welcome.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi,

maybe you need this:

HTML:
<pre class="code-toolbar language-markup"><code class=" language-markup"><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></code></pre>
CSS:
<pre class="code-toolbar language-css"><code class=" language-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;
}</code></pre>
<pre class="code-toolbar language-css"><code class=" language-css">.input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).amber-border {
 border: 1px solid #ffca28;
 box-shadow: none;
}</code></pre>
Best,
Marta

Please insert min. 20 characters.

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 6 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 6 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

einar

Pro User 0Support score
3Questions 0Answers 0Snippets