jQuery UI Widgets Forums Layouts DockPanel Problems with style="float:right;"

This topic contains 4 replies, has 2 voices, and was last updated by  aorlic 10 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Problems with style="float:right;" #11624

    aorlic
    Member

    Hello!

    I just suspect this problem has to do with the DockPanel, maybe it does not.

    The above code shows my code that sets up the layout for a wizard-like interface. I would like to place buttons on the extreme right of the bottom dock panel. Therefore, I use float:right style. However this does not work (the button is displayed on the extreme left of his container, instead of the right. BTW, whole DockPanel is inside a Window…

    Any ideas?

    Here is my code:

    $(document).ready(function () {

    // construct the layout
    $(‘#npr_dck_main’).jqxDockPanel({ width: ‘100%’, height:560});
    $(‘#npr_dck_left’).jqxDockPanel({width: ‘120px’});
    $(‘#npr_dck_bottom’).jqxDockPanel({height: ’30px’});
    $(‘#npr_dck_main’).jqxDockPanel(‘render’);

    // buttons
    $(‘#mpr_btn_cancel’).jqxButton({ width: ’80px’, height: ’30px’, theme: PMD.theme });
    }); // $(document).ready(function () {

    Problems with style="float:right;" #11625

    Peter Stoev
    Keymaster

    Hi aorlic,

    jqxDockPanel does not support percentage Width and Height in this version. May be this is related to your issue. In addition, it is a layout plug-in so you shouldn’t set ‘floats’ of the HTML elements inside it. The DockPanel will layout its elements depending on their attributes.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Problems with style="float:right;" #11626

    aorlic
    Member

    Thank you Peter.

    Do you have any suggestion than, what would be the best way to position my buttons on the extreme right?

    Problems with style="float:right;" #11654

    Peter Stoev
    Keymaster

    Hi aorlic,

    You can take a look at the DockPanel’s sample here: dockpanel.htm.

    By setting the dock attribute, you specify the element’s position in the layout.

            $('#first').attr('dock', 'left');
    $('#second').attr('dock', 'left');
    $('#third').attr('dock', 'left');
    $('#fourth').attr('dock', 'right');

    When you set the ‘dock’ attribute of the HTML Element, then call:

    $('#jqxDockPanel').jqxDockPanel('render');

    The above code will arrange the elements.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Problems with style="float:right;" #11699

    aorlic
    Member

    Thank you Peter, I resolved the problem using tables instead of DockPanels… I think it is even better, as I anyway expect to have many widgets on the page.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.