CODEWITHSUNDEEP
jquerycssdynamicwidthdrop-down-menu
Tom
Tom

Reputation: 3520

Dynamic width using jQuery - Custom Select Box

I've made a custom select box using CSS and jQuery and until tonight I thought I was done.. but no..

The code can be viewed and played with here http://jsfiddle.net/nvv35/5/

The problem is that when using Firefox, IE or Safari the select box doesn't get the correct width. If you look at the demo using Chrome you'll see nothing wrong. The jQuery code sets the desired width for the "label" and the box looks pretty much perfect, but not in the browsers mentioned before..

The select label is way too short. Instead of getting the same width as the longest child in the drop-down it's cut off right after the text.. I just simply can't find where the problem lies..

So, I need your help guys 'n gals.

UPDATE

Final code: http://jsfiddle.net/nvv35/9/

Upvotes: 1

Views: 3513

Answers (2)

Venu immadi
Venu immadi

Reputation: 1605

function customSelect(){
 $('.custom-select a.open').on('click', function () {
    if ( $(this).next().hasClass('active') ) {
        $(this).next().removeClass('active').slideUp(250);
    }
    else{
        $(this).next().addClass('active').slideDown(250);
    }
});

$('.custom-select ul.options li').on('click', function () {
    var value = $(this).data('value');        
    $(this).parent().removeClass('active').slideUp(250);
    $(this).parent().parent().prev().attr('value', value);
    $(this).parent().prev().text(value);
});
}
customSelect();

- See more at: http://www.pointmycode.com/customize-select-box-with-css-and-jquery/

Upvotes: 0

Chandu
Chandu

Reputation: 82903

parseInt($(this).next(".selectBox").css("border-width"), 10) is resulting a NaN.

JsFiddle: http://jsfiddle.net/nvv35/8/

Change your code to as follows:

**Update:**To get the border-width correctly specific side of the border needs to be pecified. (Check: How to get border width in jQuery/javascript)

$(document).ready(function() {
  $("select").css("display", "none");
  $(".selectContainer").css("display", "inline-block");
  $(".selectHead").each(function() {
    var newWidth = $(this).next(".selectBox").outerWidth();
      var borderWidth = parseInt($(this).next(".selectBox").css("border-left-width").replace(/[^0-9]/g,""), 10) ;
      if(isNaN(borderWidth)) borderWidth  = 0;
    newWidth = newWidth - (borderWidth * 2);
    $(this).css("width", newWidth + "px");
  });
  $(".selectHead").on("click", function() {
    $(this).next(".selectBox").show();
    $(this).closest(".selectContainer").on("mouseleave", function() {
      $(this).find(".selectBox").hide();
    });
  });
  $("li", ".optionsBox").on("click", function() {
    var newValue = $(this).attr("id").replace(/(.*)-/,"");
    $(this).closest(".selectContainer").next("select").val(newValue);
    $(this).closest(".selectBox").prev(".selectHead").html($(this).html());
    $(this).closest(".selectBox").find(".optionSelected").removeClass("optionSelected");
    $(this).addClass("optionSelected");
    $(this).closest(".selectBox").hide();
  });
});

Upvotes: 2

Related Questions