Geek Answers Handbook

How to arrange text fields in a common style

I have a task to create code to align text fields. I have a main div.Inside that I have so many sub divs. These sub divs are not aligned correctly. I want to align these divs with jquery without editing the sub div. How can i do this? My code

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Jquery-Align</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(function() { $("#tabs").tabs(); }); });//]]> </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nithin</a> </li> <li><a href="#tabs-2">Vipin</a></li> </ul> <div id="tabs-1"> <div id="maindiv"> <div> <label>Name:</label> <input type="text" name="name" value=""/> </div> <div> <label>Age:</label> <input type="text" name="name" value=""/> </div> <div> <label>Email:</label> <input type="text" name="name" value=""/> </div> <div> <label>Phone:</label> <input type="text" name="name" value=""/> </div> </div> </div> <div id="tabs-2"> <p>Vipin</p> </div> </div> </body> </html>

You can see my code at http://jsfiddle.net/CG6Vw/

+1
source share
5 answers

use min-width to indicate

 #maindiv div{ display:inline-block; padding:0 6px 8px 0 } #maindiv b{ display:inline-block; min-width:80px; width:auto }

Demo

+2
source

Everything must be done with the proper tool. Just use super simple CSS for your task:

 #maindiv > div { padding-bottom: 10px; } #maindiv > div > b { width: 80px; display: inline-block; }

http://jsfiddle.net/CG6Vw/1/

+2
source

Try this if it is ok according to your requirement -

Tabber

0
source

If you do not want to use css, you can also do this with jQuery

 $(function() { $("#tabs").tabs(); $('#maindiv > div > b').each(function(){ $(this).attr('style','width: 60px; display: inline-block;'); }); });

But again you are still using the style :)

0
source

Want something like this bro: JSFiddle Demo

HTML

 <div id="tabs"> <ul> <li><a href="#tabs-1">Nithin</a> </li> <li><a href="#tabs-2">Vipin</a></li> </ul> <div id="tabs-1"> <div id="maindiv"> <div> <label>Name:</label> <input type="text" name="name" value="" class="field" /> </div> <div> <label>Age:</label> <input type="text" name="name" value="" class="field" /> </div> <div> <label>Email:</label> <input type="text" name="name" value="" class="field" /> </div> <div> <label>Phone:</label> <input type="text" name="name" value="" class="field" /> </div> </div> </div> <div id="tabs-2"> <p>Vipin</p> </div> </div>

CSS

 label, input[type="text"]{ float:left; display:block; } label { margin-right: 5px; } .field{ width:100%; overflow:auto; margin:5px 0px; }

JQuery

 $(function() { $("#tabs").tabs(); var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); }); $("label").width(max); });
0
source

More articles:


All Articles