I am using bootstrap for layout. I have set max-width on the input control to 280px. But this causing input-group-addon not render properly when i use bootstrap's grid column size larger than 280px. input-group-addon does not stick with the control.
I have JSFiddle here
I guess input-group-addon always renders to the right of the column so there is a space between input control and addon.
How do i fix this without messing with max-width and col.
In your fiddle an .input-group-addon has width 32px, and both of .form-control (max-width: 280px;)and .input-group-addon (width: 32px) are included in the .input-group, then you just need to define max-width for .input-group:
.input-group {
max-width: 312px;
}
jsfiddle
I would NOT recommend to set the width of max-width of your inputs (or any other element), within Bootstrap.
Bootstrap elements are designed to fill all the available space. They can be made responsive very easily by using the built-in grid system. My recommendation is to limit their width by limiting the width of their container, like this:
<div class="row">
<div class="col-xs-6"><!-- NOTE THE 'XS' HERE -->
<div class="input-group">
<input name="FirstName" class="form-control" id="FirstName" type="text" value="399035034">
<span class="input-group-addon">+</span>
</div>
</div>
</div>
https://jsfiddle.net/v85wzajr/2/
Related
In my html page I have an input component placed above a div component.
I want the input and the div to have the same width, the input has a "size" attribtue of 30.
If I use the "style" attribute of the div with "width : 30ch" or with "width : 30em" it doesn't seem to work, the div component is getting way wider than the input component in both cases.
Which attribute should I use to make the div's width match the input's size attribute?
code :
<input type="text" readonly="yes" value="a" size="30" ID="b">
<div id="c" style="width : 30ch"></div>
The size attribute sets the visible width in “characters”, and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.
To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.
<table style="table-layout: fixed" cellspacing=0>
<tr><td><input type="text" readonly="yes" value="a" size="30" ID="b">
<tr><td><div id="c" style="background: green">Hello world</div>
</table>
try width attribute in both i.e. in input and div also , plus try to give width in %
html:
<html>
<input id="myinput"></input>
<div id="myDiv"></div>
</html>
css :
#myDiv{
width:x%(set x per your requirement)
}
Use this style to set exact same width for both your input and your div
input#b, div#c {width:100px;}
The textarea in this codepen and the code below overflows in slim viewports. It has max-width: 100% from .preset-box but when the textarea is larger than the viewport it causes the viewport to overflow horizontally. I tried both changing and removing cols both to no avail. I tried restricting the resize to vertical and that had no effect on this issue either. How can I adjust the CSS to respect max-width?
<label class="preset-box block-table font-os">
<span class="preset-box block-table" data-spacing="mb1">Ask</span>
<textarea aria-invalid="false" class="preset-textarea p1 pl2 pr2 font-textarea round-medium border-1px border-solid" cols="100" rows="4" data-spacing="mb1 mb0-last">Am I overflowing?</textarea>
</label>
Remove this class:
block-table
max-width applies to block elements only, but block-table makes these table elements.
For some reason, the following HTML snippet wraps the % sign onto a new line (FireFox only):
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
<br />
</span>
</span>
And css:
.label {display: inline-block;}
Its a snippet, so it doesn't make much sense on its own, but I don't understand why this is happening, I think its valid HTML5. Can someone explain what the problem is with this snippet, because it works in Chrome and not in FireFx ?
DEMO
Adding white-space:nowrap; should fix it:
.label {
background-color: yellow;
display: inline-block;
white-space:nowrap;
}
jsFiddle example
Firefox renders this incorrectly.
Inline blocks should use the shrink-to-fit algorithm:
calculate the preferred width by formatting the content without
breaking lines other than where explicit line breaks occur,
calculate the preferred minimum width, e.g., by trying all possible
line breaks.
find the available width: in this case, this is the width of the
containing block minus the used values of 'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the widths of any relevant
scroll bars.
Then the shrink-to-fit width is:
min(max(preferred minimum width,available width), preferred width)
In this case:
preferred width is the width without any word wrapping.
preferred minimum width is the width of the widest element, in this case "1,22."
available width is the width of the document body, in this case 100%.
min(max(preferred minimum width,available width), preferred width) should therefore be equal to preferred width.
You can fix Firefox's behavior by changing your HTML or by using white-space:nowrap.
But I have another alternative: br is an inline element, but changing it to a block element fixes the problem.
Doing so shouldn't have an impact on any other br elements in your HTML (that I can think of).
Fiddle
What's happening is Firefox is interpreting your second span as being inline with the <br/> element. Try putting the <br/> element outside of the span wrapping the 2 spans like so:
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
</span>
<br />
</span>
http://jsfiddle.net/gc0sq29k/12/
It appears that it's awkward if you need a fluid-width text field with an add-on in Bootstrap 2.3.2.
If the containing div becomes smaller than the input field, an input with a span12 class on it will resize quite happily.
However, doing the same to this snippet is a bit more difficult
<div class="input-append">
<input type="text">
<span class="add-on">Sheep</span>
</div>
Does anyone have a solution to this?
Here's a fiddle: http://jsfiddle.net/KFr2z/149/
If you have input alone it is very easy to expand it to fit parent. It is also easy for more than one element if other has % width. Problem become if you have more than one element and other elements has fixed width or no explicitly determined width at all. Then you need an element which fit all parent's remaining space. From what I know it is impossible to make input to behave that way. But any native block-level element enclosing input should do the trick:
<div class="input-append">
<span class="add-on" style="float: right;">Sheep</span>
<div style="overflow: hidden;">
<input type="text" class="span12">
</div>
</div>
Bootstrap use some styles based on childs' order so you should also setborder-radius: 0 3px 3px 0 because it doesn't apply to add-on any more.
How do I change the width of a select field, when using Twitter bootstrap? Adding input-xxlarge CSS classes doesn't seem to work (like it does on other form elements), so the elements in my drop down are currently cut off.
This works for me to reduce select tag's width;
<select id ="Select1" class="input-small">
You can use any one of these classes;
class="input-small"
class="input-medium"
class="input-large"
class="input-xlarge"
class="input-xxlarge"
I did a workaround by creating a new css class in my custom stylesheet as follows:
.selectwidthauto
{
width:auto !important;
}
And then applied this class to all my select elements either manually like:
<select id="State" class="selectwidthauto">
...
</select>
Or using jQuery:
$('select').addClass('selectwidthauto');
In bootstrap 3, it is recommended that you size inputs by wrapping them in col-**-# div tags. It seems that most things have 100% width, especially .form-control elements.
https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
You can use something like this
<div class="row">
<div class="col-xs-2">
<select id="info_type" class="form-control">
<option>College</option>
<option>Exam</option>
</select>
</div>
</div>
http://getbootstrap.com/css/#column-sizing
For me Pawan's css class combined with display: inline-block (so the selects don't stack) works best. And I wrap it in a media-query, so it stays Mobile Friendly:
#media (min-width: $screen-xs) {
.selectwidthauto {
width:auto !important;
display: inline-block;
}
}
Tested alone, <select class=input-xxlarge> sets the content width of the element to 530px. (The total width of the element is slightly smaller than that of <input class=input-xxlarge> due to different padding. If this a a problem, set the paddings in your own style sheet as desired.)
So if it does not work, the effect is prevented by some setting in your own style sheet or maybe in the use other settings for the element.
with bootstrap use class input-md = medium, input-lg = large, for more info see https://getbootstrap.com/docs/3.3/css/#forms-control-sizes