jQWidgets Forums

jQuery UI Widgets › Forums › Lists › ComboBox › Combobox (width set to percentage) in table with colums width set to percentage

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 10 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Combobox (width set to percentage) in table with colums width set to percentage Posts
  • November 7, 2014 at 8:44 am Combobox (width set to percentage) in table with colums width set to percentage #62364

    jacobez
    Participant

    I have a problem that when I put Combobox with width set to a percentage into table with columns and it’s width also set to percentage the drop down arrow disappears. If I take the combobox out of the table, or remove the percentage setting to either the column or combobox it reappear.

    November 7, 2014 at 11:20 am Combobox (width set to percentage) in table with colums width set to percentage #62376

    Nadezhda
    Participant

    Hello jacobez,

    Here is an example which shows how to use Combobox in html table and how to set their width in percentage.

    <!DOCTYPE html>
<html lang="en">
<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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                "Affogato",
                "Americano",
                "Bicerin",
                "Breve",
                "Café Bombón",
                "Cappuccino",
                "Carajillo",
                "Cortado",
                "Cuban espresso",
                "Espresso",
                "Eiskaffee",
                "The Flat White",
                "Frappuccino",
                "Galao",
                "Greek frappé coffee",
                "Iced Coffee",
                "Indian filter coffee",
                "Instant coffee",
                "Irish coffee",
                "Liqueur coffee"
            ];
            // Create a jqxComboBox
            $("#jqxComboBox").jqxComboBox({ selectedIndex: 0, source: source, width: '100%', height: '25px' });
        });
    </script>
    <style>
        .td {
            width: 50%;
        }
    </style>
</head>
<body>
    <table style="width: 100%" border="1">
        <tr>
            <td class="td">John</td>
            <td>Smith</td>
        </tr>
        <tr>
            <td class="td">Eve</td>
            <td>Jackson</td>
        </tr>
        <tr>
            <td class="td">
                <div id='jqxComboBox'></div>
            </td>
            <td>Doe</td>
        </tr>
    </table>
</body>
</html>

    Best Regards,
    Nadezhda

    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.