CODEWITHSUNDEEP
htmlcssresponsive-design
fcortes
fcortes

Reputation: 1368

Input should have the maximum width possible

I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/

The HTML structure:

<span class="all">
     <span class="group-1">
         <span class="a">A</span>
         <span class="b"><input type="text" placeholder="b" /></span>
     </span>
     <span class="group-2">
         <span class="c">C</span>
         <span class="d">D</span>
     </span>  </span>

The current result with the css is

first result

but my desired result would be

Desired result

This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).

What is the best way to solve this?

Upvotes: 3

Views: 291

Answers (4)

Carlos Ruana
Carlos Ruana

Reputation: 2278

As an alternative to css3 style calc if you need to support other browsers here is another solution.

If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.

You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).

You can see it applied to your example:

http://jsfiddle.net/cTd2e/

/*Styles for position here*/
.all{
    line-height: 22px;
}
table {
    width: 100%;
    float: left;
}
.second-cell input{
    width: 100%;
    float: left;
}
.b {
    display: block;
    margin-right: 130px;
}
td.first-cell {
    white-space: nowrap;
}
td.second-cell {
    width: 100%;
}
.group-2{
    vertical-align: middle;
    margin-left: 10px;
}

Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.

I am not aware if there is a more modern compatible way of doing that, it would be great!

Upvotes: 1

Mark
Mark

Reputation: 2221

If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.

I changed the CSS to:

.group-1 {
    width: 20px;
    float: left;
    margin-top: 6px;
}
.group-2 {
    margin-left: 30px;
    margin-right: 70px;
}
.group-3 {
    width: 60px;
    float: right;
    margin-top: -20px;
}

Have a look at: http://jsfiddle.net/hAMmK/16/

Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.

Upvotes: 2

Andrea Ligios
Andrea Ligios

Reputation: 50193

Use CSS3 Calc: Running Demo

input[type="text"]{        
    width: calc(100% - 100px);
}

Not (yet) supported everywhere, though, and you need to know the width to subtract.

Upvotes: 3

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Change the widths to use a percentage.

.a {
     padding: 3px 7px;
    background-color: LightBlue;
    border: 2px solid CornflowerBlue;
    border-radius: 5px;
    color: SteelBlue;
    width: 10%;
}
.c {
    padding: 3px 7px;
    background-color: Moccasin;
    border: 2px solid BurlyWood;
    border-radius: 5px;
    color: DarkKhaki;
    width: 10%;
}
.d {
    padding: 3px 7px;
    background-color: LightSalmon;
    border: 2px solid Brown;
    border-radius: 5px;
    color: IndianRed;
    width: 10%;
}
input{
    width: 70%;
}

JS Fiddle: http://jsfiddle.net/hAMmK/4/

Upvotes: 1

Related Questions