Convert .width() In Px To % In JQuery For Bootstrap's Appended Labels While Fluid

I currently have: jquery $(document).ready(function () { $('.span-fix').each(function(){ /* Do this for each extended input */ var wide = $(this).width(), /* create a

Solution 1:

In fact you omit the padding in your calcul. I think this code help you.

EDIT :

This is the code for firefox :

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth();
        /* create another variable that holds the width of the previous label */
        $(this).width( (1-(label + $(this).outerWidth() - $(this).width())/$(this).parent().width()) *100 + "%" );
    });
});

And this is the code for chrome :

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth(); 
        /* create another variable that holds the width of the previous label */
        $(this).css("width", (1-(label)/$(this).parent().width()) *100 + "%" );
    });
});​

For chrome you must set the property css if you use the width method when you check the width css property, the property value is not equel to the value calculated.

There is an example on jsFiddle here.

Here there is a jsFiddle with the two implementation. Now you just need to detect the browser.

Solution 2:

This takes the parent's width and just calculates the percentage.

$(this).width((wide - label)/$(this).parent().width()*100+'%');

Solution 3:

Based on an earlier post by me.

var getPercent = function(elem) {
    var elemName = elem.attr("id"),
        width = elem.width(),
        parentWidth = elem.offsetParent().width(),
        percent = Math.round(100 * width / parentWidth);
    return percent;
};

Solution 4:

This calculates the percentage with the entire document:

$(this).width((wide - label) * 100 / $(document).width()+'%');