jquery icon style is not working for unorder list

Question

I have a page that looks like

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul id="menu" style="width:150px">
  <li>
    Bangladesh <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>
        Munshigonj <span class="ui-icon-caret-1-e"></span>
        <ul>
          <li>Khaleast</li>
          <li>Collagepara</li>
          <li>Mathpara</li>
        </ul>
      </li>
      <li>Dhaka</li>
      <li>Narayangonj</li>
    </ul>
  </li>
  <li>
    USA <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Fargo</li>
      <li>New York</li>
      <li>Los Angeles</li>
    </ul>
  </li>
  <li>
    Span <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Barcelona</li>
      <li>Real Madrid</li>
      <li>Seviya</li>
    </ul>
  </li>
</ul>

<script>
  $(document).ready(function() {
    $('#menu').menu();
  });
</script>

Now the list items are shown as menu but the icon bar for class="ui-icon-caret-1-e" or any icon is not showing the icon and the width is not responsive.
What should i do? I tried using a link for style in the head section, But when i hover on the list item with the sapn element it shows a square blank box instead of the icon.

In the fiddle it's generating ok, I think maybe your default `font-family` is overwriting the `jquery icon style`. try using `!important` with the `jquery icon font-family` — Jithin Raj P R, Jul 05 '18 at 12:30
Can you create a snippet which reproduce the issue? Also, any errors in the `console`? — Mosh Feu, Jul 05 '18 at 14:02
I am fairly new in this environment and jquery.don't know how to do what you are asking @mosh — , Jul 06 '18 at 02:58
https://stackoverflow.com/a/66434/863110 and https://kb.yoast.com/kb/how-to-find-javascript-errors-with-your-browsers-console/. Also, we need to see the problem it a live. Can you upload your project online? — Mosh Feu, Jul 08 '18 at 11:56
In the code snippet it is working but not in my browser. couldn't find out yet what the problem is. online? like where? @MoshFeu — , Jul 08 '18 at 14:58
Also see the snippet now the list item under Bangladesh>Munshigonj. the catet is not in the same line @MoshFeu — , Jul 08 '18 at 15:00
By online I mean, you will eventually upload it to your server and it will have its own domain, right? So if you can upload it to your server you can add the link so we could see your local environment. — Mosh Feu, Jul 08 '18 at 15:49
Got you. Are you using only html files or server files such as .php or .aspx or something. Also, about the falling icon, you can fix it by `#menu .ui-menu-item {white-space: nowrap}` — Mosh Feu, Jul 08 '18 at 15:55
yes, i am using .aspx. I don't understand. where should i put these? i tried after the ('#menu') but it gives me result as plain html not like menu. can you please make an answer. @MoshFeu — , Jul 08 '18 at 16:09

score 0 · Answer 1 · answered Jul 09 '18 at 08:02

To force element to be in the same line, you can use white-space: nowrap:

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within the source

^{https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values}

Like this:

#menu .ui-menu-item {
  white-space: nowrap
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<ul id="menu" style="width:150px">
  <li>
    Bangladesh <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>
        Munshigonj <span class="ui-icon-caret-1-e"></span>
        <ul>
          <li>Khaleast</li>
          <li>Collagepara</li>
          <li>Mathpara</li>
        </ul>
      </li>
      <li>Dhaka</li>
      <li>Narayangonj</li>
    </ul>
  </li>
  <li>
    USA <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Fargo</li>
      <li>New York</li>
      <li>Los Angeles</li>
    </ul>
  </li>
  <li>
    Span <span class="ui-icon-caret-1-e"></span>
    <ul>
      <li>Barcelona</li>
      <li>Real Madrid</li>
      <li>Seviya</li>
    </ul>
  </li>
</ul>

<script>
  $(document).ready(function() {
    $('#menu').menu();
  });
</script>

jquery icon style is not working for unorder list

1 Answers1