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.
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>
I am using md-dialog to display a form.
Form contains md-input-container which displays input tags and select tags.
The last container shows up https://github.com/Gillardo/bootstrap-ui-datetime-picker
<md-input-container class="md-block" flex-gt-sm>
<label>Time</label>
<p class="input-group">
<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" ng-model="scheduledJob.date" is-open="scheduledJob.open"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event, scheduledJob)">
<i class="fa fa-calendar"></i></button>
</span>
</p>
</md-input-container>
But whenever this gets clicked, the md-dialog starts showing a scroll bar like this:
How can make this particular dropdown fall outside of md-dialog, Here is a quick CodePen of the issue I am facing.
Define datepicker option datepicker-append-to-body="true" in your input element.
<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm"
datepicker-append-to-body="true" ng-model="scheduledJob.date"
is-open="scheduledJob.open"/>
From angular-ui/bootstrap readme:
datepicker-append-to-body (Default: false, Config: appendToBody) - Append the datepicker popup element to body, rather than inserting after datepicker-popup.
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 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.
I have the following html styled by bootstrap 3 that defines a group of inputs:
<div class="input-group">
<select class="form-control" >Some options here</select>
<a class="btn btn-default input-group-addon disabled" title="Legg til" disabled="" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a>
</div>
This gives the following result in most browsers (including IE10):
However in IE9, the "arrow" for the dropdown is missing:
Anyone know a fix for this in IE9?
I found the issue here. It seems that the arrow button is simply hidden below the button with the plus icon. So the select box is the entire width, and the other buttons end up overlying it.
So the fix was to add float:left to the select box, and voila!
You should use .input-group-btn to avoid this issue :
<div class="container">
<form role="form">
<div class="form-group">
<div class="input-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="input-group-btn">
<a class="btn btn-default" href="#"><i class="glyphicon glyphicon-plus-sign"></i></a>
</span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to remove padding on the select tag. You'll first need conditional classes for IE9.
<!--[if IE 9 ]><html class="ie9"><![endif]-->
Then just simply remove the padding on the select tags.
.ie9{
select.form-control{
padding: 0 !important;
}
}