CODEWITHSUNDEEP
jqueryhtmlcss
Sweta Sharma
Sweta Sharma

Reputation: 483

how to change the width of a specific select2 if i am having more than 1 select2 in my html file?

I am having more than 1 select2 in my HTML file. I want to set a width to a specific select2 and a common width to all the other select2. The common width is affecting the width of all the select and even though if I am trying to override the width through jquery it is not happening.

CSS

.select2-container {
    width: 100% !important;
}

HTML

<div class="col-md-12">
    <select class="select2 form-control m-t-15"  id="user_name">
        <option selected="selected">Select Name</option>
    </select>
    <select class="select2 form-control m-t-15"  id="user_roll">
        <option selected="selected">Select Roll</option>
    </select>
    <select class="select2 form-control m-t-15"  id="user_address">
        <option selected="selected">Select Address</option>
    </select>
</div>

JQUERY

    $(".select2").select2();
    $("#user_address").select2({ width: '50%' });

Expected Result:- select 2 of id "user_address" should be having width 50%.

Current Result:- All the select 2 is having width 100%

Anybody any idea how to set 50% width to select2 of id "user_address"?

Upvotes: 0

Views: 361

Answers (5)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Try this:

#user_address{
  width: 50%;
}

Upvotes: 0

pmayur25
pmayur25

Reputation: 11

just changes in css above your css code please remove it and replace with below code : 

.select2 {
 width: 100%;
}

Upvotes: 0

sbrrk
sbrrk

Reputation: 894

try this

.select-roll-width{
  width:50%;
}
<div class="col-md-12">
    <select class="select2 form-control m-t-15"  id="user_name">
        <option selected="selected">Select Name</option>
    </select>
    <select class="select2 select-roll-width form-control m-t-15"  id="user_roll">
        <option selected="selected">Select Roll</option>
    </select>
    <select class="select2 form-control m-t-15"  id="user_address">
        <option selected="selected">Select Address</option>
    </select>
</div>

Upvotes: -1

Nijin P J
Nijin P J

Reputation: 1322

Instead of setting option as selected use placeholder in select2

$(".select2").select2({ width: '100%',placeholder:'Choose an Option', allowClear: true  });
$("#user_address").select2({ width: '60%' ,placeholder:'Choose an Address', allowClear: true });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>



<div class="col-md-12">
    <select class="select2 form-control m-t-15"  id="user_name">
    </select>
    <select class="select2 form-control m-t-15"  id="user_roll"> 
    </select>
    <select class="select2 form-control m-t-15"  id="user_address">  
    </select>
</div>

Upvotes: 1

Milad Deraawi
Milad Deraawi

Reputation: 51

You already have id's for each select2 therefore u can style that specific select2 with its id for ex let's style 'user_roll':

#user_roll{
//your styling here, noting that "#" is for the id just like the "." is for class
  }

Upvotes: 1

Related Questions