I've spent hours trying to get rid of the border radius on my select2 append checkbox. As of now the dropdown is displayed with a checkbox on the left. The problem is that there seems to be a border radius between the two input group elements, something similar to the image. The solution proposed was adding the input-group select2-bootstrap-prepend class to the wrapper element which doesn't work for me.
The html is as follows
<div class="col-lg-3">
<div class="panel-body">
<b>Region</b><br>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class=" region">
</select>
</div>
</div>
</div>
View the running example from jsfiddle
you need
.select2-container--default .select2-selection--single {
border-radius:0 0.25rem 0.25rem 0;
}
see this fiddle
https://jsfiddle.net/grassog/kLchxehz/25/ (relevant css at the bottom of the css portion)
Related
I have made a form with different inputs.
One of these allow to choose a date, made with this very nice package:
http://www.eyecon.ro/bootstrap-datepicker/
The only problem is that all the form fields have the default blue focus:
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
...
}
But the field made with Bootstrap-Datepicker has a yellow default focus, that I am not able to modify.
How can I remove that style and apply the default bootstrap style, so to obtain consistency?
Assuming that you're using the latest Bootstrap 3, you just need to add the form-control class to your inputs and it will override the datepicker's yellow outline. I also wrapped the inputs inside `col-md-3' since Bootstrap 3 no longer defines a specific width for inputs.
<div class="input-append date ">
<div class="col-md-3">
<label>Arrival Date</label>
<input name="arrival" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkin" placeholder="click here">
</div>
</div>
<div class="input-append date">
<div class="col-md-3">
<label>Outgoing Date</label>
<input name="outgoing" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkout" placeholder="click here">
</div>
</div>
http://bootply.com/86834
EDIT:
For Bootstrap 2.x just make sure you add type="text" to your inputs and it will show the blue outline. I've update the Bootply.
Im using Ruby on Rails 4 with twitter bootstrap to display a form_for (twitter bs form_horizontal). The styling below works correctly (label, input and hint display next to each other ) for normal fields (non error'd) when rails wraps elements in the field_with_errors div however the hint is dropped to the beneath the input element.
<div class="control-group required">
<div class="field_with_errors"><label class="control-label" for="lot_commonname_id">Common Name</label></div>
<div class="controls">
<div class="field_with_errors"><select id="lot_commonname_id" name="lot[commonname_id]"><option value="">Please select</option>
<option value="1">x</option>
<option value="2">y</option>
<option value="3">z</option>
</select>
</div>
<div class="hint">
<a href="#" rel="tooltip" data-original-title="xyz test.">
<i class="icon-info-sign"></i>
</a>
</div>
</div>
</div>
.field_with_errors {
#extend .control-group;
#extend .error;
}
.form-horizontal .field_with_errors
{
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after
{
display: block;
clear: none;
}
the following jsfiddle http://jsfiddle.net/a78B5/6/ demos the problem
Divs default to display:block so it will naturally drop down to be below your input. Add styling to use display:inline or display:inline-block and it will move back to being next to your text box.
I got a following set up using the lastest twitter bootstrap framework:
http://jsfiddle.net/hfexR/2/
I now want that the input field takes the maximum width when there is no button next to.
How can I do this with pure css or with twitter-bootstrap itself?
Something like inline-block should go, I just don't get it at the moment...
You can use te class input-block-level like in this fiddle
<div class="container">
<div class="span4 well">
<form class="form-search">
<input type="text" class="input-block-level search-query">
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cancel</button>
</form>
</div>
</div>
EDIT : since bootstrap v3, classes have evolved so use col-xx-X classes to obtain the result explained below (further changes may be necessary)
Live demo (jsfiddle)
You could use a .row-fluid and use .spanX to make the inputs fill their container :
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span12">
</div>
</form>
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span8">
<button type="submit" class="btn span4">Cancel</button>
</div>
</form>
It appears that a little fix is needed for the button/input combination :
/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
float: none; /* Remove the */
display: inline-block; /* floating */
margin-left: 0; /* Stick it to the left */
}
Last thing, you shouldn't combine .spanX and .well because of the padding and borders and other things, here is an example of why (jsfiddle).
How do I make a Bootstrap input field be exactly 100% as wide as its parent?
As steve-obrien wrote in Bootstrap Issue #1058:
Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.
That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.
Applying the input-block-level class works great for me, across various screen widths. It is defined by Bootstrap in mixins.less as follows:
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 28px; // Make inputs at least the height of their button counterpart
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
This is very similar to the style suggested by 'assembler' in his comment on issue #1058.
Just add box-sizing:
input[type="text"] {
box-sizing: border-box;
}
If you're using C# ASP.NET MVC's default template you may find that site.css overrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
For anyone Googling this, one suggestion is to remove all the input-group class instances. Worked for me in a similar situation. Original code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="input-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</div>
</form>
New code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</form>
I found a solution that worked in my case:
<input class="form-control" style="min-width: 100%!important;" type="text" />
You only need to override the min-width set 100% and important and the result is this one:
If you don't apply it, you will always get this:
In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):
content-box
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box
The width and height properties include the content, the padding and border, but not the margin."
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Compatibility for this CSS is good.
Use .container-fluid, if you want to full-width as parent, spanning the entire width of your viewport.
What about?
input[type="text"] {
max-width:none;
}
Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.
input,select,textarea {
max-width: 280px;}
just add:
width: 100% !important;
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.