CODEWITHSUNDEEP
jqueryhtmlcss
django
django

Reputation: 2909

jquery ui multiselect css adjustment

I am trying to fix a thing from plugin http://quasipartikel.at/multiselect_next/ It uses fixed width and height while I want it to in percentage with respect to container or parent.

I have created basic fiddle for the problem. So far I have been able to fix width with a little bug (there is space left at right). But I can't seem to make its height dynamic or in percentage.

Objective: ui-multiselect must adjust its height and width according to parent if resized in percentage given, in my example 100%.

JSFIDDLE: http://jsfiddle.net/bababalcksheep/Np4tA/201/

See Fiddle for datiled html/css

Here is simplified version of html:

<div class="ui-multiselect ui-helper-clearfix ui-widget">
    <div class="ui-widget-content list-container selected">
        <ul class="list selected ui-sortable ui-droppable">
            <li class="ui-helper-hidden-accessible"></li>
        </ul>
    </div>
    <div class="ui-widget-content list-container available">
        <ul class="list available ui-droppable">
            <li class="ui-helper-hidden-accessible"></li>
        </ul>
    </div>
</div>

Basic CSS:

.ui-multiselect {
    border: 1px solid;
    font-size: 0.8em;
    width:100%;
    height:100%;
}
.ui-multiselect ul {
    -moz-user-select: none;
}
.ui-multiselect div.list-container {
    padding: 0;
    margin: 0;
    border: 0;
    float:left;
    width:49.8%;
    height:100%;        
}

Upvotes: 0

Views: 1388

Answers (1)

Claudi
Claudi

Reputation: 5416

I'm not sure if I'm understanding your question but try pasting this javascript in your jsfiddle:

function auto_resize(){
    $('.ui-multiselect, .list-container').height($(window).height());
}
$(window).resize(auto_resize);
auto_resize();

You only need to multiply the parameter passed to height by a factor between 0 and 1. For example:

function auto_resize(){
    $('.ui-multiselect, .list-container').height($(window).height() * 0.7); //70%
}

Full example with width and height:

function auto_resize(){
    $('.ui-multiselect, .list-container').height(0.7*$(window).height());  //70%     

    $('.ui-multiselect').width(0.8*$(window).width()); //80%
}
$(window).resize(auto_resize);
auto_resize();

NOTE: A more general solution in which the parent is not the window, just put the ui-multiselect in a fixed-sized DIV, and then substitute window by a jquery selection statement in the code above. For example:

function multi_select_container() {
    var container = $('.ui-multiselect').parent();
    if (container.prop('tagName').toLowerCase() == 'body') container = $(window);   
    return container;
}

function auto_resize(){
    var container = multi_select_container();

    $('.ui-multiselect, .list-container').height(0.7*container.height());  //70%     

    $('.ui-multiselect').width(0.8*container.width()); //80%
}

multi_select_container().resize(auto_resize);
auto_resize();

Upvotes: 1

Related Questions