Search code examples
cssdrop-down-menuhoverjquery-ui-selectmenu

Why the dropdown elements gets shifted to left on hovering on each row?

I created a dropdown list using the selectMenu widget of the jQueryUI as shown in the below image:

enter image description here

Given below is the HTML code for this.

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
    <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="-$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

This is the CSS for this widget.

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: inline-block;
  padding: 1em 2px;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
  padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
  height: 24px;
  width: 14px;
  top: 0.1em;
}


.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;

}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;

}


.overflow {
  height: 200px;
}

Given below is the Javascript code for this.

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
              item.optgroup +
              "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

Now, my problem is that whenever I am hovering the cursor on any row, then the elements of that hovered row gets selected to its right. But I want my elements to be fixed in the position. I know that the problem is related to the .ui-state-active class. I've tried a lot of tricks whatever I know but none of them has worked out for me. I'm a beginner in CSS. Please help.Mentioned below is the image describing how these elements are shifted.

enter image description here

Can anyone provide any idea on how to fix this issue?

Solution

  • In your css file you need to add a margin of 0 in your .ui-state-active class. The hover is causing a margin of -1 to appear. After that you will need to stop it from jumping when you hover up and down. To do this you can remove all of the border properties, and add the outline: 1px solid #ccc property. Replacing your current .ui-menu-item .ui-menu-item-wrapper.ui-state-active block with the one here should fix your issues (at least they did in your codepen)

    .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  //border-width: 1px 0px 1px 0px;
  margin: 0;
  //border-color: #cccccc;
  border: none;
  outline: 1px solid #ccc;
  background-color: #e4ebf1;
  color: #000;
}

    To fix the width for higher resolutions you can add a min-width property to .ui-selectmenu-category

    .ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
}

    enter image description here