Possibly need an additional 'hard-first' and 'hard-last' class

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a row with 3 columns whose spans add up to the total width.
2. Put a radio button in the middle column.
3. Now create a second row.

What is the expected output? What do you see instead?
The radio button blocks the float left property of the first column in the
next row, forcing it to align with the middle column from the first row.
The remaining columns in the second row are all off by the same amount,
causing a wrap of the last column.

What version of the product are you using? On what operating system?

I'm using Blueprint 0.3. I tested using Firefox 2.0.0.6 on OS X 10.4.9

Please provide any additional information below.
The problem can be resolved by adding two additional classes, I named them
'hard_first' and 'hard_last', which inherit from 'first' and 'last' and add
the clear:left and clear: right properties respectively.
Naturally these would only be used for first and last columns at the outer
level, not nested columns, which would still use the 'first' and 'last'
classes.

Thanks for this great framework!

Original issue reported on code.google.com by edr...@gmail.com on 8 Aug 2007 at 8:20

[GoogleCodeExporter]

Correction: I tested on OS X 10.4.10

Original comment by edr...@gmail.com on 8 Aug 2007 at 8:27

[GoogleCodeExporter]

having this same problem with text boxes and labels. first time using blueprint.
thought i was going crazy or something. here is my code:
<code>
<div class="column span-2 first">
    <p>First Name</p>
</div>

<div class="column span-2">
 <asp:TextBox ID="txtFName" runat="server" MaxLength="15"></asp:TextBox>
</div>

<div class="column span-2 last">
    <p><asp:Label ID="lblFName" runat="server"></asp:Label></p>
</div>

<div class="column span-2 first">
    <p>Last Name:</p>
</div>
<div class="column span-2">
    <asp:TextBox ID="txtLName" runat="server"></asp:TextBox>
</div>
<div class="column span-2 last">
    <p>asp:Label ID="lblLName" runat="server"></asp:Label></p></code>

Original comment by tri...@gmail.com on 8 Aug 2007 at 8:52

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

a quick fix is to do this

<div class="column span-2 last">
    <p>asp:Label ID="lblLName" runat="server"></asp:Label></p><br />

it needs both the <p></p> and the <br />

Original comment by tri...@gmail.com on 8 Aug 2007 at 9:18

[GoogleCodeExporter]

Wow, that's quite a bug. Thanks for finding it, I'll see what can be done. :)

Olav

Original comment by ola...@gmail.com on 9 Aug 2007 at 10:59

[GoogleCodeExporter]

I've identified the problem. The default height of the radio button exceeds the 
18px
line height for the grid, throwing off the baseline. If I force the size of the 
radio
button down to fit it in the 18px line height, everything works.

This problem also exists with other form input elements, like text and select 
inputs.

Possible solutions could include forcing down the size of these elements 
explicitly
in grid.css, or requiring two rows for each input element.

Thanks again for this framework!

Original comment by edr...@gmail.com on 9 Aug 2007 at 3:32

[GoogleCodeExporter]

Forms support is coming in 0.5.

Original comment by ola...@gmail.com on 13 Aug 2007 at 2:40

• Changed state: Fixed

[GoogleCodeExporter]

thanks blueprint rules!!

Original comment by tri...@gmail.com on 15 Aug 2007 at 8:32

[GoogleCodeExporter]

Another easy workaround that fits within the spirit of the framework is to 
place an
outer column at full-width surrounding each line containing form elements. 
Inside
this surrounding column div one can then divide the row into arbitrary columns, 
and
form elements in these columns will not interfere with the subsequent row owing 
to
the outer surrounding column div. Example:<div class="column span-14 first 
last"><div
class="column span-4 first">Enter your name: </div><div class="column span-10
last"><input type="text" name="name"/></div></div>... next row...

Original comment by edr...@gmail.com on 22 Aug 2007 at 3:46