Percentage width changes to pixels

[HackWeight]

When setting my original multiselect's style to a percentage of the container, the percentage gets changed in the new multiselect to pixels instead of remaining as a percentage.

Example:

<select multiple="multiple" id="listBoxAddFields" style="height:90%;width:80%;">
</select>

gets updated to:

<div class="uix-multiselect ui-widget" style="width: 80px; height: 90px;">
...
</div>

Thanks so much for the control. It's great! In the meantime, I'll specify an exact width and height but it would be nice if percentages could work so I could have it size inside my jQueryUI dialog.

[yanickrochon]

At the moment, the widget will not resize itself. I'll set this for the next version milestone.

[brunobg]

Hi! any news on this issue?

[yanickrochon]

Unfortunately, this is no bug and does not represent an issue per se and has a lower priority than other tasks that are currently piling up. I will have some time next week to advance in some other opened issues first, however, and will take a look at it as soon as possible.

Anyhow, if someone want to provide a PR, I'll be happy to review it.

[ryancramerdesign]

This seemed to solve the issue for me. First, set the select[multiple] to the percentage width like 100% (or 96% looked better in my case):

<select multiple="multiple" class="multiselect" style="height:300px; width:96%;">
</select>

Then call the "refresh" method whenever the window is resized:

$(window).resize(function() {
  $(".multiselect").multiselect("refresh");
});

Not positive that's the best way to do it, but it does seem to produce the desired result of having the widget resize itself when the window is resized.

[yanickrochon]

Here, I am thinking using this kind of layout for the new widget layout. I believe it might just do the trick to resolve this.

CSS

table.uix-multiselect,
table.uix-multiselect table { width:100%; height:100%; table-layout:fixed; }
table.uix-multiselect th { height:20px; }
table.uix-multiselect th, 
table.uix-multiselect td { overflow:hidden; white-space:nowrap; }

table.uix-multiselect td.vlayout-row { border:none; margin:0; padding:0; }

HTML

<h2>Horizontal Layout</h2>
<div style="height:200px; width:75%; position:relative;">
<table cellspacing="0" class="uix-multiselect">
    <thead>
        <tr>
            <th style="width:40%;">Head 1.1</th>
            <th>Head 1.2</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td class="cell">Cell 1.1</td>
        <td>Cell 1.2</td>
    </tr>
    </tbody>
</table>
</div>

<h2>Vertical Layout</h2>
<div style="height:200px; width:75%; position:relative;">
<table cellspacing="0" class="uix-multiselect">
    <tbody>
    <tr style="height:40%;">
        <td class="vlayout-row">
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th>Head 1.1</th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Cell 1.1</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td class="vlayout-row">
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th>Head 1.2</th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Cell 1.2</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</div>

Anyone see a potential problem, or an improvement over this?

Note : This is a proof of concept and not the actual CSS. The idea is to refactor the layout in this fashion.