jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › Button group style problem

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Button group style problem Posts
  • December 29, 2014 at 2:49 pm Button group style problem #64795

    arkgroup
    Participant

    I need to show button group with horizontal scroll. I have code that works before I add id=”jqxWidget” to the div.
    When I add id=”jqxWidget” it shows vertical scroll instead of horizontal. Here is my code (v3.5.0):

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title></title>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttongroup.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxradiobutton.js”></script>
    <style>

    .toggle{
    float: left;
    width: 100%;
    height: 20%;
    border: 1px solid ;
    overflow-x:auto;
    white-space: nowrap;

    }

    </style>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // Create jqxButton widgets.
    $(“#jqxWidget”).jqxButtonGroup({ mode: ‘radio’ });

    $(‘#jqxWidget’).jqxButtonGroup(‘setSelection’, 0);

    });
    </script>
    </head>
    <body>

    <!–if I remove id=”jqxWidget” I have horizontal scroll bar, that what I need–>

    <div class=”toggle” id=”jqxWidget”>

    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Left”>
    Left</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Center”>
    Center</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Right”>
    Right</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Button1″>
    Left</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Button2″>
    Center</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Button3″>
    Right</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Button4″>
    Left</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Button5″>
    Center</button>
    <button style=”padding:4px 16px; height:95%; width:300px; display:inline-block” id=”Button6″>
    Right</button>

    </div>
    </body>
    </html>

    December 30, 2014 at 9:35 am Button group style problem #64825

    Peter Stoev
    Keymaster

    Hi arkgroup,

    If you need scrollbars, then don’t use button group. It does not support Scrollbars. It shows several buttons one next to another. If you want scrollbars, then put the ButtonGroup within a DIV tag with overflow: auto and when the ButtonGroup’s content overflows, scrollbar will be displayed. Also, don’t set layout properties of the buttons inside the ButtonGroup because by doing that you override its logic.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.