I am using uib-datepicker with following html:
<div id="date-group" class="form-group">
<div class="input-group">
<input id="dateInput" type="text" class="form-control" uib-datepicker-popup="{{format}}" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-model="searchForm.date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
And It looks like this. I am using bootstrap 3.3.6. Any suggestions?
You need to modify the CSS on the button .btn-default attribute. Add some padding to the button and change the vertical-align or margin. Change the positioning nonetheless.
I tried to add padding and adjust the margin of the button and the vertical-align, but the default Bootstrap styling overrides what I tried, I can't get too deep into coding right now.
Here's a nice little tutorial on styling Bootstrap buttons or use the Bootstrap documentation to change the class of the button you're using.
Or take a look at the Angular directive for Bootstrap, the Datepicker Popup. I think that is your best bet.
Related
I am using custom file input of bootstrap:
How can I change color of the "Browse" button?
What all I tried:
Added color tag to custom-file-input
Added color tag to custom-file-label
Both did not work. On inspect, when I try to get the responsible css class it shows custom-file-input. However, the changes don't work.
tag is not button
can you try bg-[color]?
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
if example code like this. you can input bg-primary here
<span class="input-group-text bg-primary" id="inputGroup-sizing-default">Default</span>
tag is button
you can use btn-[color] instead.
https://getbootstrap.com/docs/5.0/components/buttons/
<button type="button" class="btn btn-info">Info</button>
Using Bootstrap 3.4 why the input-group missing all border radius ?
<form action="{{ route('dashboard.users.index') }}" method="get">
<div class="input-group">
<input type="text" name="search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
inspect element:
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
Should I fix it with my own css?
It looks like it is by design. See an image (I used your markup, just added inner text into <i class="fa fa-search"></i>):
You have two inputs in a row. Outside corners have border-radius but inner corners don't have. And it looks pretty good. If you need to override that behavior you need to create you own css that will override default styles.
I'm using bootstrap rtl and i put it accidentally before the original bootstrap.min.css .. when the order changed .. the problem fixed .. thank you for helping
I have two scenarios with similar problems. I'm attempting to add a font awesome icon:
Inline with a text input and 'add on' button, yet superscript (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (JSFiddle2)
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
Here's how I'd like each to look:
I don't know if this is important, but as a side note:
In the first scenario, the icon has a popover
In the second scenario, the icon has a dropdown
I don't think these have any effect on the layout, so I left out the related code.
For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:
JS Fiddle
For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:
.dropdown {
display:inline-block;
float:right
}
For your first issue: JS Fiddle
For your second issue as Raed N. said before just add a float:right to your dropdown:
.dropdown { float:right; }
Code contains text box and button
HTML:
<div id="input-collection" class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-link"></i>
</span>
<input id= "url-input-box" type="url" class="form-control" name = "url" placeholder="http://www.example.com">
<span class="input-group-btn">
<button id="submit-url-btn" class="btn btn-success" type="button">Go</button>
</span>
</div>
which shows button and texbox like:
I changed margin-top and margin-left in all above class but no change.
Where I need to make change here?
Use Firebug (or chrome developer tools - Ctrl+Shift+J)
Look at the margin-bottom settings of: submit-url-btn (the tag)
against the margin-bottom of the url-input-box (span)
It seems that the button has a high value on margin-bottom. set both to 0 and see how they are positioned.
I am trying to add glyphicons to form input boxes using bootstrap 3.
However, the glyphicons are displayed larger than the input textbox, as can be seen here:
The documentation says Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.
As far as I can tell, I'm doing just this, but I clearly have something wrong, and can't figure out what it is.
Markup and fiddle below:
<div class="jumbotron">
<h4>Glyphicons, why you no look nice?</h4>
<form name="form">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
<input type="email"
class="form-control"
placeholder="Email"
name="email"/>
</div>
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-lock"></span>
<input type="password"
class="form-control"
placeholder="Password"
name="password"/>
</div>
</form>
</div>
Working example on jsfiddle
It's because the font-size is being inherited from the 'jumbotron' (21px).
You'll need to explicitly set the font-size on the form or its items.
Also, once you use the glyphicon class, you'll get the top: 1px so you'll need to set that to 0 for the addon to line up with the input.
Here's my updated fiddle.