MultiSelect styling problems

3 posts, 0 answers
  1. Jeppe
    Jeppe avatar
    2 posts
    Member since:
    Apr 2013

    Posted 04 Sep 2013 Link to this post

    Hello

    I'm using kendoUI multiselect, but have some issues with the styling - The input field is smaller than the surrounding div causing it to look weird. Also the data-placeholder text is only shown partially until the first time the controle is clicked

    I'm using FuelUx  2.3.0, Twitter Bootstrap 2.3.2, jQuery 1.10.2 and KendoUI v2013.2.716

    Here is my source code using the MultiSelect:

    01.<!DOCTYPE html>
    02.<html lang="en" class="fuelux">
    03.  <head>
    04.    <meta charset="utf-8">
    05.    <script src='http://localhost/shared/assets/js/jquery-1.10.2.min.js' type='text/javascript'></script>
    06.    <link rel='stylesheet' type='text/css' href='http://localhost/shared/assets/css/smoothness/jquery-ui-1.8.17.custom.css'>
    07.    <script src='http://localhost/shared/assets/js/jquery-ui-1.9.1.custom.min.js' type='text/javascript'></script>
    08.    <link rel='stylesheet' type='text/css' href='http://localhost/shared/assets/css/KendoUI/kendo.common.min.css'>
    09.    <link rel='stylesheet' type='text/css' href='http://localhost/shared/assets/css/KendoUI/kendo.default.min.css'>
    10.    <script src='http://localhost/shared/assets/js/KendoUI/src/kendo.web.js' type='text/javascript'></script>
    11.    <script src="http://localhost/shared/assets/js/loader.js"></script>
    12.    <link href="http://localhost/shared/assets/css/fuelux.css" rel="stylesheet">
    13.  </head>
    14.  <body>
    15.    <script type='text/javascript'>
    16.      var gVars = {};
    17.      gVars.conf = {foo:'bar'};
    18.      gVars.mainEventModel = {foo:'bar'};
    19.      $(function(){
    20.        gVars.objDetailsPage = new gVars.detailsPage(gVars.mainEventModel,1);
    21.        gVars.objDetailsPage.selectArea();
    22.      });
    23.    </script>
    24. 
    25.    <script type="text/x-kendo-template" id="selectAreaTemplate">
    26.      <label class = "control-label" for="treatedArea">Treated area:</label>
    27.      <div class = "controls">
    28.        <input id="treatedArea" style="width:400px;height:50px;"
    29.               data-role="multiselect"
    30.               data-auto-bind="true"
    31.               data-placeholder="Click to select ..."
    32.               data-text-field="name"
    33.               data-value-field="value"
    34.               data-source="gVars.objDetailsPage.getEventParameterTypeDataSource(13)" />
    35.      </div>
    36.    </script>
    37. 
    38.    <script type='text/javascript'>
    39.      gVars.detailsPage = function(mainEventModel,treatmentTypeId) {
    40.        this.treatmentTypeId = treatmentTypeId;
    41.        this.mainEventModel = mainEventModel;
    42.        this.eventParameterTypes = {
    43.          overallResult : 1,
    44.          treatment : 8,
    45.          treatedArea : 13
    46.        };
    47.      };
    48. 
    49.      gVars.detailsPage.prototype.getEventParameterTypeDataSource = function(eventParameterId) {
    50.        var dataSrc = new kendo.data.DataSource({
    51.          transport: {
    52.            read: {
    53.              url: gVars.conf.getParameterTypeData,
    54.              dataType: "json",
    55.              data : {
    56.                eventParameterTypeId : eventParameterId
    57.              }
    58.            }
    59.          }
    60.        });
    61.        return dataSrc;
    62.      };
    63. 
    64.      gVars.detailsPage.prototype.selectArea = function(){
    65.        var diversForm = new kendo.View('selectAreaTemplate');
    68.        var html = diversForm.render();
    69.        $('#TemplateArea').html(html);
    70.
          };
    79. 
    80.    </script>
    81.    <div id="TemplateArea"></div>
    82.  </body>
    83.</html>
    And here is the generated Markup (taken from Firefox, firebug console)
    01.<div>
    02.  <label class="control-label" for="treatedArea">Treated area:</label>
    03.  <div class="controls">
    04.    <div class="k-widget k-multiselect k-header" style="width: 400px; height: 50px;">
    05.      <div class="k-multiselect-wrap k-floatwrap">
    06.        <ul id="treatedArea_taglist" class="k-reset" unselectable="on" role="listbox">
    07.          <input class="k-input" style="width: 25px" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="treatedArea_taglist treatedArea_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
    08.          <span class="k-icon k-loading k-loading-hidden"></span>
    09.      </div><input id="treatedArea" data-source="gVars.objDetailsPage.getEventParameterTypeDataSource(gVars.objDetailsPage.eventParameterTypes.treatedArea)" data-value-field="value" data-text-field="name" data-placeholder="Click to select ..." data-auto-bind="true" data-role="multiselect" style="width: 400px; height: 50px; display: none;" multiple="multiple" aria-disabled="false" aria-readonly="false">
    10.      <option value="0">Boot top</option>
    11.      <option value="1">Upper verticals</option>
    12.      <option value="2">Lower verticals</option>
    13.      <option value="3">Entire verticals</option>
    14.      <option value="4">Flat bottom</option>
    15.      <option value="5">Entire hull</option>
    16.      </input>
    17.      <span style="font-family: MS Shell Dlg; font-size: 13.3333px; font-stretch: normal; font-style:normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 16px; position: absolute; visibility: hidden;"></span>
    18.    </div>
    19.  </div>
    20.</div>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 06 Sep 2013 Link to this post

    Hi Jeppe,

    By design the select element from which the MultiSelect is initialized is wrapped into a <div> element (this can be observed in the rendered HTML elements). Hence in order to achieve the expected outcome you should set height to the .k-multiselect-wrap element (not to the <select> itself): 

    <style>
    .k-multiselect-wrap{
        height: 50px;
    }
    </style>

    On a side note, keep in mind that: 
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jeppe
    Jeppe avatar
    2 posts
    Member since:
    Apr 2013

    Posted 09 Sep 2013 Link to this post

    Hello Iliana

    Thanks for the response - it made me look in the right direction.

    I found that FuelUx was using a margin-top 10px; on <ul> elements, this was causing the problems.

    The solution was to add this style:
      /* CSS hack to make KendoUI multiselect look proberly while using FuelUx */
      .fuelux ul {
        margin: 0 0 0px;
      }

    The other primary problem was with the width of the element containing the placeholder text (in my case "Click to select...")

    Initially it was set to 25px, for some reason. I fixed that by doing the following:

    var multiselect = $("#treatedArea").data('kendoMultiSelect');
    multiselect.input.css('width','119px');

    With that done my Multiselect works like a charm :-) Now for some browser test and task completed - next one comming up ;-)
Back to Top