Nested Span problems:

229 views
Skip to first unread message

Bob Archer

unread,
May 9, 2012, 11:22:49 AM5/9/12
to bluepr...@googlegroups.com
I seem to be having problem getting nested spans to work. I assume I am doing something wrong. 

My fundamental understanding is that if I have a div that uses span-12, then withing that div there are 12 columns that I could also put spans in, and not 24 columns. 

Anyway... I am trying to set up sort of a semantic styles to layout data entry forms in our web application. I have two classes to create a two column layout on a form. (BTW: I'm using compass too).

// Two column semantic styles
.col-left {
@include column(12);
background: red;
}
.col-right {
@include column(12, true);
background: blue;
}

For those that don't use compass passing true to the column mixin adds the last class.

The above works fine and gives me two columns. No, I am trying to set up two columns that will fit withing 12 columns. One for the labels and one for the inputs.

.display-label, 
.editor-label {
@include column(4);
background: green;
}

.display-field, 
.editor-field {
@include column(8, true);
background: yellow;
}

The background colors are just for me own debugging. 

And example of the layout would be something like:

<div class="col-left">
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
</div>
<div class="col-right">
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
   <div class="editor-label">
      <label></label>
   </div>
   <div class="editor-field">
      <input blah blah />
   <div>
</div>

It just doesn't layout property. Stuff in the write column goes of the right screen. All of the above is in a wrapper div which is styled as container. Also, the above are contained in divs which use the jQuery UI tabs. I found in the issue log that you have to style those divs with container class as well, so I have done that too. This makes sure the tab divs surround the spans.

BOb

Sean K. Stewart

unread,
May 16, 2012, 3:24:26 PM5/16/12
to Blueprint CSS
Hi Bob,

I just noticed this post and figured I add to the form-test.html file
we've been working with.
http://seankstewart.com/blueprint/tests/parts/forms-test.html

Scroll to the bottom to see my example based on your html above.

I do not use compass, and I'm not sure if the html above is output by
compass. However, you are missing a / in your closing div tags, which
is throwing your styles off.

Hope this helps

Sean K. Stewart
www.seankstewart.com
Reply all
Reply to author
Forward
0 new messages