jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 2 months ago.

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

Author

Bootstrap jqx-Combobox Not Rendering Correctly Posts

January 14, 2016 at 12:28 pm Bootstrap jqx-Combobox Not Rendering Correctly #80396

4xjbh

Participant

I am using Laravel 5.x along with Elixir and the jqx-combobox is not rendering correctly.

I have both jqx.base.css and jqx.bootstrap.css styles mixing and the images folder is in the public\build\css\images folder

What would be causing this to render incorrectly?

https://drive.google.com/file/d/0B28B-lQBlEIATGd4dWw3a3M0X1U/view?usp=sharing


    <div class = 'form-group col-md-6' >
        <label for="Company">Company:</label>
        <div id="company_id" class="form-control"></div>
    </div>

/* Start of Company select box */
            var companylist =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'name' }
                ],
                url: "http://localhost:8000/company/companylist",
            };

            var data_companylist = new $.jqx.dataAdapter(companylist);

            $("#company_id").jqxComboBox(
                    {
                        source: data_companylist,
                        placeHolder: "Select a Company . . . ",
                        displayMember: "name",
                        valueMember: "id"
                    });

January 15, 2016 at 6:52 am Bootstrap jqx-Combobox Not Rendering Correctly #80410

Peter Stoev

Keymaster

Hi 4xjbh,

If you have CSS on your page which breaks our CSS, then this should be expected. As far as I see from the image, the case is exactly that. We have a ComboBox used with Bootstrap in a demo page: http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/bootstrap-grid-layout.htm?arctic and we don’t see such problem. I suggest you to debug your page and investigate where your css conflicts with ours in order to resolve your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 16, 2016 at 4:44 am Bootstrap jqx-Combobox Not Rendering Correctly #80449

4xjbh

Participant

Peter,

Thanks for the response. I thought I had done this correctly so I have started from scratch. A single html file with no external css apart from jqw and bootstrap. I am getting the same result and with no errors in the console…

https://docs.google.com/uc?id=0B28B-lQBlEIAbFRtVElkcmxxVnc&export=download


<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JQWidgets</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
          crossorigin="anonymous">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.bootstrap.css">

    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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>
</head>
<body>
<div class="container" style="padding-top: 20px">

    <div class = 'form-group col-md-8' >
        <label for="jqxcombobox">Combobox:</label>
        <div id="jqxcombobox" class="form-control"></div>
    </div>

</div>

<script>
    $(document).ready(function () {

        /* Start of Combobox */
        var source = [
            "Affogato",
            "Americano",
            "Bicerin",
            "Breve",
            "Café Bombón",
            "Café au lait",
            "Caffé Corretto",
            "Café Crema",
            "Caffé Latte",
        ];
        // Create a jqxComboBox
        $("#jqxcombobox").jqxComboBox({ source: source });
        // disable the sixth item.
        $("#jqxcombobox").jqxComboBox('disableAt', 5);
    });
</script>
</body>
</html>

January 17, 2016 at 8:09 am Bootstrap jqx-Combobox Not Rendering Correctly #80457

Peter Stoev

Keymaster

Hi 4xjbh,

Ok, you are adding custom CSS class to the ComboBox. Why do you wonder that the display will be different than in our demos? I suggest you to use the widget as shown in the demos in order to get the results shown in the demos.

Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.