locked
Weird column position issue when resizing the browser please help RRS feed

  • Question

  • User-1355965324 posted

    Hi

    I have  created the html to select js multiselect  in the html file as given below, But when  I run the application and  I  resize the browser,all column  is being  showed weired. I have attached the image here with.  Please can you help  to fix this

    https://drive.google.com/open?id=1qVLaaF-7XqVGHT40TeCD-WItCWsWjBrs

    <link href="~/css/jquery.multiselect.css" rel="stylesheet" type="text/css">
    <div class="row"> <div class="row col-sm-12"> <div class="col-sm-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-3" > Depot</label> <div class="controls col-sm-8" style="padding-right: 0px !important;"> <select id="dropdownDepot" class="form-control" multiple asp-for="Depot" onchange="FillEmployeeDropdown()" asp-items="@ViewBag.UserDepots" data-role="select"></select> </div> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-3" > Department</label> <div class="controls col-sm-8" style="padding-right: 0px !important;"> <select id="dropdownDepartment" multiple class="form-control" asp-for="Department" onchange="FillEmployeeDropdown()" asp-items="@ViewBag.UserDepartments" data-role="select"></select> </div> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="control-label control-label-left col-sm-3"> Employee</label> <div class="controls col-sm-8" style="padding-right: 0px !important;"> <select id="dropdownEmployee" multiple class="form-control" asp-for="Employee" asp-items="@ViewBag.Employees" data-role="select"></select> </div> </div> </div> </div> </div>
    <script src="~/js/jquery.multiselect.js"></script>

     

    <script>
        $(document).ready(function () {
             KeyHandler();
            $("#FromDatePicker").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, autoclose: true, todayBtn: 'linked' });
            $("#ToDatePicker").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, autoclose: true, todayBtn: 'linked' });
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
             ShowResultModalPopup('@ViewBag.Result');
            $('#dropdownDepot').multiselect({
                columns: 2,
                placeholder: 'Select Depot',
                includeSelectAllOption: true,
                maxHeight:300
            });
            $('#dropdownDepartment').multiselect({
                columns: 1,
                placeholder: 'Select Department',
                includeSelectAllOption: true,
                maxHeight: 300
            });
            $('#dropdownEmployee').multiselect({
                columns: 2,
                placeholder: 'Select Employee',
                includeSelectAllOption: true,
                maxHeight: 300
            });
    
    
        });
    </script>

    Wednesday, April 24, 2019 8:07 AM

Answers

  • User839733648 posted

    Hi polachan,

    According to your description, I suggest that you could use Bootstrap Multiselect.

    Here is a testing sample.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
        <script>
            $(document).ready(function () {
                $('#dropdownDepot').multiselect();
                $('#dropdownDepartment').multiselect();
                $('#dropdownEmployee').multiselect();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="row">
                <div class="row col-sm-12">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="control-label control-label-left col-sm-3">Depot</label>
                            <div class="controls col-sm-8" style="padding-right: 0px !important;">
                                <select id="dropdownDepot" class="form-control" multiple="multiple">
                                    <option>aaaa</option>
                                    <option>bbbb</option>
                                    <option>cccc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="control-label control-label-left col-sm-3">Department</label>
                            <div class="controls col-sm-8" style="padding-right: 0px !important;">
                                <select id="dropdownDepartment" class="form-control" multiple="multiple">
                                    <option>aaaa</option>
                                    <option>bbbb</option>
                                    <option>cccc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="control-label control-label-left col-sm-3">Employee</label>
                            <div class="controls col-sm-8" style="padding-right: 0px !important;">
                                <select id="dropdownEmployee" class="form-control" multiple="multiple">
                                    <option>aaaa</option>
                                    <option>bbbb</option>
                                    <option>cccc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>

    result:

    For more about Bootstrap Multiselect, you could refer to: http://davidstutz.de/bootstrap-multiselect/ 

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 25, 2019 2:41 AM
  • User839733648 posted

    Hi polachan,

    You could check the documentation and find the attribute includeSelectAllOption.

                $('#dropdownDepot').multiselect({
                    includeSelectAllOption: true
                });

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 26, 2019 6:27 AM

All replies

  • User-474980206 posted

    the jQuery multiselect was not designed to work with bootstrap (its not responsive). you will need to modify the CSS to be compatible with bootstrap, or pick a multi select designed to work with bootstrap.

    Wednesday, April 24, 2019 3:30 PM
  • User-1355965324 posted

    Please can you advise me one of the good bootstrap  multi select  to use . Please can you  let me know from your knowledge what is the best muti select commonly used by programmers

    Pol

    Wednesday, April 24, 2019 8:08 PM
  • User839733648 posted

    Hi polachan,

    According to your description, I suggest that you could use Bootstrap Multiselect.

    Here is a testing sample.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
        <script>
            $(document).ready(function () {
                $('#dropdownDepot').multiselect();
                $('#dropdownDepartment').multiselect();
                $('#dropdownEmployee').multiselect();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="row">
                <div class="row col-sm-12">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="control-label control-label-left col-sm-3">Depot</label>
                            <div class="controls col-sm-8" style="padding-right: 0px !important;">
                                <select id="dropdownDepot" class="form-control" multiple="multiple">
                                    <option>aaaa</option>
                                    <option>bbbb</option>
                                    <option>cccc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="control-label control-label-left col-sm-3">Department</label>
                            <div class="controls col-sm-8" style="padding-right: 0px !important;">
                                <select id="dropdownDepartment" class="form-control" multiple="multiple">
                                    <option>aaaa</option>
                                    <option>bbbb</option>
                                    <option>cccc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="control-label control-label-left col-sm-3">Employee</label>
                            <div class="controls col-sm-8" style="padding-right: 0px !important;">
                                <select id="dropdownEmployee" class="form-control" multiple="multiple">
                                    <option>aaaa</option>
                                    <option>bbbb</option>
                                    <option>cccc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>

    result:

    For more about Bootstrap Multiselect, you could refer to: http://davidstutz.de/bootstrap-multiselect/ 

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 25, 2019 2:41 AM
  • User-1355965324 posted

    Jenifer Thanks for the reply

    Please can you reply me how can I bring the  ' Select All' option the in the bootstrap multiselect. Please help me with suggested code

    Friday, April 26, 2019 6:12 AM
  • User839733648 posted

    Hi polachan,

    You could check the documentation and find the attribute includeSelectAllOption.

                $('#dropdownDepot').multiselect({
                    includeSelectAllOption: true
                });

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 26, 2019 6:27 AM