'flex' layout of an input and a button

Forum Moderators: not2easy

Message Too Old, No Replies

'flex' layout of an input and a button

Robin_reala

11:28 am on Aug 8, 2007 (gmt 0)

Here's a poser. Given a minimum browser compatibility requirement of IE7, Fx2 and Safari2, can we think up a way to do:

1) A input box on the left and 0-many buttons on the right
2) The whole thing to take up 100% width of the container (which itself is a flexible width)
3) The input to flex to fill the gap left by the buttons
4) No tables for layout :)

The HTML is flexible, but will probably look something like:

<div>
<input type="text" />
<a href="#">Button 1</a>
<a href="#">Button 2</a>
</div>

So, thoughts? I'm going to play around with this for the next couple of hours - if I come up with anything I'll reply back.

Robin_reala

2:56 pm on Aug 8, 2007 (gmt 0)

OK, for what it's worth I couldn't find a solution to this so I ended up just setting a width:80% on the input and dealing with a gap.

SuzyUK

3:25 pm on Aug 8, 2007 (gmt 0)

well you will ask difficult questions ;)

FWIW I've been trying to see.think if there's way, but haven't got anything yet either..

SuzyUK

3:41 pm on Aug 8, 2007 (gmt 0)

Moz can do it.. I think this is what you're asking?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
.row {background: #dad; overflow: auto; display: -moz-box;}
input {float: left; margin: 0 5px; -moz-box-flex: 1;}
a {display: block; float: right; padding: 0 5px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="row">
<input type="text" />
<a href="#">Button 1</a>
<a href="#">Button 2</a>
</div>
</body>
</html>

Robin_reala

3:48 pm on Aug 8, 2007 (gmt 0)

Ah yeah, XUL flex behavior. I knew it could do it, but forgot that that could be applied to HTML. However I'm always a little leery of putting in such non-standard (or at least vendor specific) stuff into CSS, it seems to go against what we've been preaching for so many years. Not that I don't appreciate the attempt though :) I think it might just be that trying to do stuff like this is always going to end up with 'far out' solutions.

SuzyUK

3:52 pm on Aug 8, 2007 (gmt 0)

Yea, I knew it wasn't what you were after, it doesn't meet your min requirements. I was just playing around :)

the 'flex' behaviour sure would be useful though ;)

Robin_reala

4:09 pm on Aug 8, 2007 (gmt 0)

Table behaviour to a certain extent does fit the bill. Assuming you've got a fixed number of buttons (which in my case is the most likely scenario) then something like:

<div> 
<div><input /></div> 
<div><a></a></div> 
</div>

div { display: table; } 
div>div { display: table-cell; width: 30px; } 
div>div:first-child, input { width: 100%; }

should do basically what I'm trying to achieve (I think). Of course, then we're back to IE7 not working!

vincevincevince

4:29 pm on Aug 8, 2007 (gmt 0)

In similar situations I have used javascript (horror of horrors), starting with an oversized input box and reducing the width until .offsetHeight becomes half of what it was originally. Awful solution I know, but it works well when combined with a cookie or similar method to store what the 'working' value is for the next pageload.