Fluid input elements
See: http://jsfiddle.net/thirtydot/pk3GP/
You can do this by adding a harmless little span
around each input
:
<span><input type="text" name="first_name" required /></span>
And this new CSS:
form input {
width: 100%;
}
form span {
display: block;
overflow: hidden;
padding: 0 5px 0 0;
}
You can also do it with display: table
, which is usually a better approach: How can I put an input element on the same line as its label?
Make input field element fluid and take up remaining available space with two fixed sized elements on one row
You can try something like this:
.yellow {
position: absolute;
left: 0;
width: 50px;
background-color: yellow;
}
.blue {
position: absolute;
right: 0;
width: 50px;
background-color: blue;
}
.green {
width: 100%;
}
.wrapper {
outline: 1px dotted red;
position: relative;
padding: 0 50px;
}
Fiddle: http://jsfiddle.net/audetwebdesign/ADdDE/
You need a .wrapper
containing block where you set left and right padding to accommodate the two positioned (yellow/blue) elements.
The input
element (green) has a width of 100%, so it fills up the space except for the padding on left and right.
You then use absolute positioning to place the two other elements. Since you specified their widths, you know how much padding to use.
Note
The input element has a border whose width can vary among browsers, therefore, you may see a slight variation among browsers. If you take a screen shot and count pixels, you may see that the centering is not perfect, but for the simplicity of coding, it works quite well.
Fluid width of input text side by submit
add this CSS in your code
.searchContainer > div:first-child {float:right;display:inline-block;}
button will get arranged as per the content.
This is generic solution. You can write it using class name.
Responsive input fields in CSS - fluid width?
Give a min-width:550px;
to the div containing the text-box and button. Your control will not break then.
Working ex. here http://cssdesk.com/dUjxF
As the definition says min-width sets a min-width to the element, it doesn't go below that size under any circumstances.
Label/input fixed-fluid layout in forms
You can get this behaviour without changing your example markup by using the CSS calc();
function:
DEMO
label{
display:inline-block;
width:95px;
}
input{
box-sizing:border-box;
width:calc(100% - 100px);
}
Aligning inputs on bootstrap using the Fluid Grid System
Have a look a this jdfiddle: http://jsfiddle.net/kY5LL/18/
I added some div.row-fluid
containers per row of your form and one extra set of inputs for demonstration.
Hope this is what you were looking for.
Related Topics
Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px
Absolute Positioning and Its Parent Element
What Does an * (Star) Mean in Front of a CSS Declaration
Make Div as Wide as It Needs to Be
Inline Svg Breaks in Safari and Mobile Safari
CSS Transition on Png Sequence Using Steps
CSS Grid Vertical Columns with Infinite Rows
Zooming on a Point with CSS3 Transform Scale
CSS Attr() Concatenation with Url Path
Content of Div Affects Horizontal Alignment, Inline-Block Issue
How to Toggle Two CSS ':Checked' Pseudo-Classes with One Click
Fixed Menu on Left and Content Scrollable
Cross-Browser 'Cursor:Pointer'
Css: How to Center a Horizontal List? Display:Inline Not Working
How to Change the Style of a Ant-Design 'Select' Component
How to Submit Suggestions to the CSS Spec
Ie Doesn't Support Height=Auto for Images, What Should I Use