CODEWITHSUNDEEP
htmlcss
user3494047
user3494047

Reputation: 1693

make three divs take up the width of the largest one

I have a few divs containing form input data. One of them is a select with some placeholder-like text inside of it. I want the select box to be as wide as the text is and I want the other divs to also take up this width.

Here is the html:

<div class="row">
    <div class="form-group">
        <label for="category_type">Category Type:</label>

        <select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
            <option value="" disabled selected>If there is a matching type for the category, please select it</option>

            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
</div>
<div class="row">
    <div class="form-group">
        <label for="name">Name:</label>
        <input name="name" class="form-control"/>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <label for="description">Description:</label>
        <input name="description" class="form-control"/>
    </div>
</div>

and here is the css:

.form-group{
  display: inline-block;
}
.row{
  width: 100%
  float: left;
  margin-left: 5%;
}

right now the select drop down is wider than any of the other form-group elements. Is it possible to get all of the form-group elements have the same width and only take up the necessary width for the select to be able to display all of the text?

Here is a fiddle of the example.

EDIT: I don't want to use width: 100% for form-group and I would really prefer not to set the width of form-group at all. I would want it to take up the minimum width necessary to be wide enough for the text in the select.

Upvotes: 1

Views: 943

Answers (3)

Arun Lodhi
Arun Lodhi

Reputation: 71

A table with table-layout:fixed will solve the issue. Use a table and put the row divs in table rows

https://jsfiddle.net/9r62L7Lh/5/

.form-group{
      display: block;
}
.row{
  width: 100%
}
table {
    margin-left: 5%;
  table-layout: fixed;
}
input {
  width: 100%;
}

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use jQuery's each() function and get the width of each element. Have a look at the snippet below:

var max = 0;

$('.form-control').each(function(i) {
  if(max < $(this).width()) {
    max = $(this).width();
  }
});

$('.form-control').css('width', max);
.form-group{
  display: inline-block;
}
.row{
  width: 100%
  float: left;
  margin-left: 5%;
}
.content {
  padding: 20px 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
  
<div class="row">
    <div class="form-group">
        <label for="category_type">Category Type:</label>

        <select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
            <option value="" disabled selected>If there is a matching type for the category, please select it</option>

            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
</div>
<div class="row">
    <div class="form-group">
        <label for="name">Name:</label>
        <input name="name" class="form-control"/>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <label for="description">Description:</label>
        <input name="description" class="form-control"/>
    </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hope this helps!

Upvotes: 2

Mushroom
Mushroom

Reputation: 285

Your Select drop down width will be automatically adjusted to the text width.

Because you have set .form-control{width: 100%;}

If you want the input width be the same like the select width you will have to set a fixed value to all of them

something like .form-control{width: 250px;}

Fiddle

Upvotes: 1

Related Questions