CODEWITHSUNDEEP
javascriptjquerycssdrop-down-menu
Zaphod Beeblebrox
Zaphod Beeblebrox

Reputation: 562

jquery select-box - how can I have two inputs different widths

I'm using this jquery plugin to make my select dropdown boxes look nicer. http://code.google.com/p/select-box/

Here's a fiddle of it working: http://jsfiddle.net/FQKax/1/

I want to have the two dropdowns to be different widths but I've tried wrapping them in divs, tried to hack the js to give them different ids, everything I can think of but no joy.

Also I'm ashamed to admit I can't seem to change the color of the text in the actual dropdown bit. I can change the backgound colour etc but buggered if I can change the color of the text... weird

Upvotes: 0

Views: 2910

Answers (4)

prakashpoudel
prakashpoudel

Reputation: 577

Try this http://jsfiddle.net/FQKax/30/

<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>


<select id="language">
 <option value="javascript">Javascript</option>
 <option value="objective-c">Objective C</option>
 <option value="python">Python</option>
</select>
<br/><br/>

<select id="language2">
  <option value="javascript">Javascript</option>
  <option value="objective-c">Objective C</option>
  <option value="python">Python</option>
 </select>


  ##### JQUERY #######
      $(function () {
        $("#language").selectbox();
        $("#language2").selectbox();
        $(".sbHolder").each(function(){
          var $langDom = $(this);
          if($langDom.prev().attr('id') == 'language'){
            $langDom.addClass("language_1");  
          } else if($langDom.prev().attr('id') == 'language2') {
            $langDom.addClass("language_2");          
         }
       });
     });

    ###### CSSS TO ADD #####
   .language_1{
     width: 1200px;
    }

    .language_2{
      width: 200px;
     }

​

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

There's an option that you can specify what to use as classname for the sbHolder object, but you don't want to change that since you would need to rewrite the CSS. It'd be nice if they let you set an additional class to apply, but they don't.

I would just put a wrapper around the select element and use CSS to override the default width http://jsfiddle.net/FQKax/8/

.wrapper-one .sbHolder{
    width: 500px;
}

.wrapper-two .sbHolder {
    width: 200px;
}


<div class="wrapper-one">
<select id="language">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>
<br/><br/>

<div class="wrapper-two">
<select id="language2">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>

This requires adding some markup, @cih's answer doesn't. It just requires using jQuery to mark each instance accordingly http://jsfiddle.net/FQKax/37/ 

$("#language").selectbox();
$("#language2").selectbox();

$(".sbHolder").each(function(index){
    $(this).addClass('instance-' + index);
});

.instance-0.sbHolder{
    width: 500px;
}

.instance-1.sbHolder {
    width: 200px;
}

Upvotes: 3

cih
cih

Reputation: 1980

$(".sbHolder").first().addClass("first");

That will add a class you can target on you first checkbox, there better way to iterate through multiple selectors, check out this link..

Other than that Joe answers the rest of your question.

Upvotes: 1

Joe
Joe

Reputation: 15802

For the text color, change .sbOptions a:link, .sbOptions a:visited {} and/or .sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}.

For the widths, .sbOptions is your dropdown width, and .sbHolder {} is the width of the "currently selected" item.

Upvotes: 0

Related Questions