How to arrange the textboxes in a common style

Question

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/

We don't use tables.. This will be generated by scaffolding.So it will come on a div — Nithin Viswanathan, Mar 05 '13 at 09:22
@albert -we can use the css.But the these css will manage the all textboxes. The text boxes are generated by scaffolding.We don't want to edit it. — Nithin Viswanathan, Mar 05 '13 at 09:24
For example in that example there is so many space in the right side.We can utilize that space by putting the text boxes there also. — Nithin Viswanathan, Mar 05 '13 at 09:31
@albert- This is ok. But you can see the space on right side.I want to two textboxes on one raw — Nithin Viswanathan, Mar 05 '13 at 09:52
Plz have a look for two text boxes : http://jsfiddle.net/CG6Vw/9/ — Rubyist, Mar 05 '13 at 11:21

score 2 · Answer 1 · answered Mar 05 '13 at 09:24

2

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/

answered Mar 05 '13 at 09:24

dfsq

191,768
25
236
258

yep.This is ok. But you can see the space on right side.I want to two textboxes on one raw – Nithin Viswanathan Mar 05 '13 at 09:51
If there is no tag b. How to get the label – Nithin Viswanathan Mar 12 '13 at 08:32

score 2 · Accepted Answer · answered Mar 05 '13 at 11:16

2

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

answered Mar 05 '13 at 11:16

Sowmya

26,684
21
96
136

If there is no tag b. How to get the label – Nithin Viswanathan Mar 12 '13 at 08:36
@Nithu write label tag. Age: and css #maindiv label{..} – Sowmya Mar 12 '13 at 08:57
@Sowmya-I used that but when a large name comes the position is not in proper mode.. Pls check here http://jsfiddle.net/Tbter/ – Nithin Viswanathan Mar 12 '13 at 09:00
there is nothing at right side.. free space.. So we can not arrange it vertically – Nithin Viswanathan Mar 12 '13 at 09:10

Rubyist · Answer 3 · 2013-03-05T09:27:41.087

0

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

Tabber

edited Mar 05 '13 at 09:27

answered Mar 05 '13 at 09:21

Rubyist

6,486
10
51
86

score 0 · Answer 4 · answered Mar 05 '13 at 09:32

0

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 :)

answered Mar 05 '13 at 09:32

DDK

1,032
18
39

yep.This is ok. But you can see the space on right side.I want to two textboxes on one raw – Nithin Viswanathan Mar 05 '13 at 09:44
If there is no tag b. How to get the label – Nithin Viswanathan Mar 12 '13 at 08:35
1

replace b with label `$('#maindiv > div > label')` http://jsfiddle.net/CG6Vw/12/ – DDK Mar 12 '13 at 11:48

score 0 · Answer 5 · answered Mar 05 '13 at 09:56

0

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

answered Mar 05 '13 at 09:56

X-Factor

2,067
14
18

Here We can reduce the text box size and also align two text boxes together – Nithin Viswanathan Mar 05 '13 at 09:58
i think you should concern with this [plugin](http://masonry.desandro.com/), which will arrange all the textbox and other elements according to space available – X-Factor Mar 05 '13 at 10:01
@X-Factor-check this link also http://stackoverflow.com/questions/15224642/one-to-many-relationships-in-compoundjs – Jetson John Mar 06 '13 at 08:47
@X-Factor- Do you know anything about responsive design – Nithin Viswanathan Mar 07 '13 at 06:13
@Nithu yes, there are so many ways of responsive design. Which one are you talking about ? CSS Or JQuery. – X-Factor Mar 07 '13 at 07:44
@X-Factor--Both are possible. I am new in this.So can you share some articles or show some examples in jsfiddle – Nithin Viswanathan Mar 07 '13 at 10:41
@Nithu http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design, http://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks, and the best of all http://learn.shayhowe.com/advanced-html-css/responsive-web-design – X-Factor Mar 07 '13 at 10:50
@X-Factor- Thanx. Hope you have sample examples also for the phone conversion. – Nithin Viswanathan Mar 07 '13 at 11:18
@Nithu I haven't. Try a little yourself. – X-Factor Mar 07 '13 at 11:20
@X-Factor- pls check this link http://jsfiddle.net/ucpcA/17/.. Here I want a line at startng when I select the menu home – Nithin Viswanathan Mar 19 '13 at 08:21

How to arrange the textboxes in a common style

5 Answers5

Linked