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).
Related
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)
https://jsfiddle.net/wc3f1h0m/
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="btn-block">
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary" value="App Button One"
/>
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary"
value="App Button Two"
/>
</div>
</div>
</div>
I have two button underneath a form in a btn-block. While the form is wide enough, I would like the buttons side by side (stacked horizontally), and roughly centered under the form.
When the screen width shrinks, eventually the buttons will stack vertically (due to btn-block), but at this point I would like to align them left, rather than their initial center position.
Currently I am just offsetting them using another column, so I would like that left column to dissapear when they stack vertically, or some other way of achieving this. I was thinking of having another with a certain width but zero height, but when I tried that the div always stays to the left of the first button, it does not get stacked vertically alongside the others.
How can I center the buttons when they are stacked horizonally, but left align them when they switch vertically?
More generally, how can I apply rules based on this "switch" - do the elements get a different class when they switch to stacking vertically I can apply more rules on?
TIA
I don't know that you can make them automatically align left once they no longer fit side by side but you can if you define a particular media query break point for them to do that at. So because you've got a max-width on the buttons of 170px each, i've applied the media query to keep them left aligned up until 320px. Seems to hit the mark pretty well.
https://jsfiddle.net/wc3f1h0m/15/
key changes are:
1) get rid of the col-xs-1 div as the buttons are centered now anyway so its not doing anything.
2) adding a new class "btn-alignment" to the "btn-block" so that we can apply our own custom css to it.
.btn-block.btn-alignment {
text-align:left;
}
#media(min-width:320px) {
.btn-block.btn-alignment {
text-align:center;
}
}
Also changed your h5's to labels which is what you should use to define inputs on forms.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Or this inverse:
<div class="row">
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Is this the sort of thing you are looking for? Was kind of confused how the whole form was wrapped in a col-md-4 as to get the behaviour you were looking for. Hopefully one of these
'<style type="text/css">
/*Use the following code*/
#media(max-width:320px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
/*-----or---------*/
#media(max-width:480px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
</style>'
If I have a form defined inside a bootstrap panel, then the form group layout goes to pieces.
I coloured the form red so that I could see where it was ;) here's the jsFiddle : https://jsfiddle.net/DTcHh/
I have found that if I add
.panel-body .form-horizontal .form-group {
margin-right: 25px;
margin-left: 25px;
}
to the css, I then get this
(I coloured the form red so that I could see where it was ;) )
so it looks like it's fixed, but seems a terrible hack to me
Is this is a bug in bootstrap
Do I just have to apply this css
Is there something wrong with my form definitions ?
thanks
According to bootstrap docs (https://getbootstrap.com/docs/3.4/css/#forms-horizontal), the class form-horizontal makes <form> act like a .row so you don't need to add it and have .col-**-* in from groups, label and stuff. The docs give you an example o
But you have a .row inside a .row and no .col-**-*. .row has negative margin to delete the padding of his parent so with no .col-**-* as parent it has 2 negative margins.
So it's kind of messy. I suggest removing your .row and .form-horizontal class to achieve the look you want or add the margin like you already did.
Here it's a fiddle.
Thanks to the other answer for pointing me in the right direction. I personally like the option of adding a column with 12 width that wraps around the other form-groups.
<form class="form-horizontal" style="background: red;">
<div class="col col-xs-12">
<div class="form-group">
<label>field 1</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label>field 2</label>
<input class="form-control" type="text" />
</div>
</div>
</form>
Here's the fiddle
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.