CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-plugins
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How to arrange the textboxes in a common style

I have got a task to create the code for aligning the text boxes. I have a main div.Inside that I have so many sub div. These sub div is not properly aligned.I want to align these div by using jquery without editing the sub div.How can I do this? My code is

<!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 on http://jsfiddle.net/CG6Vw/

Upvotes: 1

Views: 383

Answers (5)

Sowmya
Sowmya

Reputation: 26979

use min-width to label

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

DEMO

Upvotes: 2

X-Factor
X-Factor

Reputation: 2127

Do you 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);
});

Upvotes: 0

DDK
DDK

Reputation: 1038

If you dont want to use css, you can also do that using jQuery

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

But again you are still using style :)

Upvotes: 0

RahulOnRails
RahulOnRails

Reputation: 6542

Try this if it seems okay as per your requirement --

Tabber

Upvotes: 0

dfsq
dfsq

Reputation: 193301

Everything should be done with 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/

Upvotes: 2

Related Questions