Someone at
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_24912433.html?cid=1333#a25861563
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=.
