Fluid Input Elements

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



Leave a reply



Submit