deblocker deblocker - 6 months ago 17
CSS Question

jQuery Mobile custom styled horizontal responsive menu

I try to create a custom styled horizontal menu built with a controlgroup and some checkboxes (its pre-enhanced, but does not matter for the question).
What i need is a horizontal elastic menu only on one row for mobile screens and a fixed maximum width for large screens:

<div class="color-menu">
<div class="ui-controlgroup-controls">
<div class="ui-checkbox">
<input name="cl-1" id="cl-1" type="checkbox" data-corners="false" data-enhanced="true" value="electric-green" />
<label for="cl-1" id="lab-cl-1" class="ui-btn ui-btn-inherit ui-btn-icon-left"></label>
</div>
... some other choices
</div>
</div>


While this seems to be render perfect in FF & Chrome, it behaves strange in IE11, which is still in my browser target (i don't tested it in other more recent Edge versions):

FF & Chrome:
Good

IE11:

Bad

This is the relevant CSS part:

.color-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
width: 100%;
}

.color-menu .ui-controlgroup-controls {
display: inline-block !important;
}

.color-menu .ui-controlgroup-controls .ui-checkbox {
float: left;
clear: none;
max-width: 12.5%;
/* 100%/8 */
}


Its seems an issue related to max-width or display: block, but i'm not able to solve this issue.

Where is the problem here?

Fiddle: https://jsfiddle.net/p7es287b/3/

Answer

That's how i solved it: I changed the markup according to the jQuery Mobile demos 1.4.5 - also the controlgroup could be pre-rendered:

  <div class="color-menu">
    <div data-role="controlgroup" data-enhanced="true" class="ui-controlgroup ui-corner-all">
      <div class="ui-controlgroup-controls ui-shadow">
        <div class="ui-checkbox">
          <input name="cl-1" id="cl-1" type="checkbox" data-enhanced="true" data-corners="false" value="electric-green" />
          <label for="cl-1" id="lab-cl-1" class="ui-btn ui-btn-inherit ui-btn-icon-left"></label>
        </div>
        ...some other choices
      </div>
    </div>
  </div>

Style: i'm using now width instead of max-width for the controlgroup controls.

.color-menu .ui-controlgroup-controls .ui-checkbox {
    float: left;
    clear: none;
    width: 12.5%; /* 100% / number of choices */
}

The uneven sporadic issue with IE is gone.

Comments