A solution has been posted to Experts-Exchange:
Add
$('div.container div:first').css({
'width': 'auto'
});
to my jQuery code.
On Nov 19, 11:52 am, Phillip Senn <[email protected]> wrote:
> Someone
> athttp://www.experts-exchange.com/Programming/Languages/Scripting/JavaS...
> commented:
>
> The reason that your inputs are not aligned as you expect, is that
> they are floated, and the container element (form) does not have a
> width specified, so it inherits the last specified width up the
> hierarchy, which is one of the tab containers, which has a width of
> 470px in screen.css (line 114).
> This width is constraining the floated elements, so that they cannot
> fit, and therefore end up under the last one.
> Remove line 114 from screen.css and all should work ok..
>
> Well, of course I shouldn't change screen.css because that's part of
> the blueprint framework,
> but even if I expand the example out to using all 24 columns, jQuery
> tabs is still making the labels NOT aligned to the input fields.
>
> <!doctype html>
> <html>
> <head>
> <meta charset="UTF-8">
> <link rel="stylesheet" href="screen.css" type="text/css"
> media="screen, projection" />
> <link rel="stylesheet" href="print.css" type="text/css" media="print" /
>
> <!--[if IE]>
> <link rel="stylesheet" href="ie.css" type="text/css"
> media="screen, projection" />
> <![endif]-->
> <title></title>
> <link rel="stylesheet" type="text/css" href="/Library/jQuery/UI/
> Smoothness/css/smoothness/jquery-ui-1.7.2.custom.css">
> <script type="text/javascript" src="/Library/jQuery/UI/Smoothness/js/
> jquery-1.3.2.min.js"></script>
> <script type="text/javascript" src="/Library/jQuery/UI/Smoothness/js/
> jquery-ui-1.7.2.custom.min.js"></script>
> <script type="text/javascript">
> jQuery(function($) {
> $("div.tabs").tabs();});
>
> </script>
> </head>
> <body>
> <div class="container">
> <div class="tabs column span-24">
> <ul>
> <li><a href="#tab-1">Tab1</a></li>
> <li><a href="#tab-2">Tab2</a></li>
> </ul>
> <div id="tab-1">
> <form method="get" action="#" class="inline">
> <div class="column span-4">
> <label for="input1">Label:</label>
> </div>
> <div class="column span-20 last">
> <input type="text" name="input1" id="input1">
> </div>
> <div class="column span-4">
> <label for="input2">Longer Label:</label>
> </div>
> <div class="column span-20 last">
> <select name="input2" id="input2">
> <option value="1">One</option>
> <option value="2">Two</option>
> </select>
> </div>
> <div class="column span-4">
> <label for="input3">Even Longer Label:</label>
> </div>
> <div class="column span-20 last">
> <input type="text" name="input3" id="input3">
> </div>
> <div class="column span-4">
> <label for="value">One More Label:</label>
> </div>
> <div class="column span-20 last" id="radio_inputs">
> <input type="radio" name="value" value="1">
> Value 1<br>
> <input type="radio" name="value" value="2">
> Value 2
> </div>
> <div class="column span-20 prepend-4 last">
> <button>Primary Action</button>
> </div>
> </form>
> </div>
> <div id="tab-2">
> <h1>Tab 2</h1>
> </div>
> </div>
> </div>
> </body>
> </html>
>
> On Nov 17, 3:43 pm, Phillip Senn <[email protected]> wrote:
>
>
>
> > I'm having trouble getting Blueprint forms to work with jQuery.
> > Here's Tutorial #1 with tabs put into it.
> > You can see that the inputs are not nicely lined up the way they are
> > in the tutorial.
>
> > <!doctype html>
> > <html>
> > <head>
> > <meta charset="UTF-8">
> > <link rel="stylesheet" href="blueprint/css/screen.css" type="text/css"
> > media="screen, projection" />
> > <link rel="stylesheet" href="blueprint/css/print.css" type="text/css"
> > media="print" />
> > <!--[if IE]>
> > <link rel="stylesheet" href="blueprint/css/ie.css" type="text/css"
> > media="screen, projection" />
> > <![endif]-->
> > <title></title>
> > <link rel="stylesheet" type="text/css" href="/Library/jQuery/UI/
> > Smoothness/css/smoothness/jquery-ui-1.7.2.custom.css">
> > <script type="text/javascript" src="/Library/jQuery/UI/Smoothness/js/
> > jquery-1.3.2.min.js"></script>
> > <script type="text/javascript" src="/Library/jQuery/UI/Smoothness/js/
> > jquery-ui-1.7.2.custom.min.js"></script>
> > <script type="text/javascript">
> > jQuery(function($) {
> > $("div.tabs").tabs();});
>
> > </script>
> > </head>
> > <body>
> > <div class="container">
> > <div class="column span-12 append-6 prepend-6 last">
> > <div class="tabs">
> > <ul>
> > <li><a href="#tab-1">Tab1</a></li>
> > <li><a href="#tab-2">Tab2</a></li>
> > </ul>
> > <div id="tab-1">
> > <form method="get" action="#" class="inline">
> > <div class="column span-4">
> > <label for="input1">Label:</label>
> > </div>
> > <div class="column span-8 last">
> > <input type="text" name="input1" id="input1">
> > </div>
> > <div class="column span-4">
> > <label for="input2">Longer Label:</label>
> > </div>
> > <div class="column span-8 last">
> > <select name="input2" id="input2">
> > <option value="1">One</option>
> > <option value="2">Two</option>
> > </select>
> > </div>
> > <div class="column span-4">
> > <label for="input3">Even Longer Label:</label>
> > </div>
> > <div class="column span-8 last">
> > <input type="text" name="input3" id="input3">
> > </div>
> > <div class="column span-4">
> > <label for="value">One More Label:</label>
> > </div>
> > <div class="column span-8 last" id="radio_inputs">
> > <input type="radio" name="value" value="1">
> > Value 1<br>
> > <input type="radio" name="value" value="2">
> > Value 2
> > </div>
> > <div class="column span-8 prepend-4 last">
> > <button>Primary Action</button>
> > </div>
> > </form>
> > </div>
> > <div id="tab-2">
> > <h1>Tab 2</h1>
> > </div>
> > </div>
> > </div>
> > </div>
> > </body>
> > </html>
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=.
