UI List suddenly is not clickable

Dashboard
1

Hello.

I should start by saying that I am very much of an amateur web developer mostly looking to pretty things up in my dashboards.

So, I was editing some CSS for my dashboard containing a ui_list node.

I was trying different effects on the list-inner items and at some point (not sure which change did it) my inner list items stopped being clickable. Furthermore, because the Dashboard's tab menu is a ui_list itself, now i cannot click any of the tabs to switch around them.

I had another dashboard running on a different container which had no such bug, and started inspecting the CSS to check for differences.

The only thing I could find is that in the case of the buggy list, the button of the inner list item was missing a

inside it. Particularly:

Clickable List Item:

  <md-list-item class="md-2-line _md-button-wrap _md md-clickable" ng-repeat="item in msg.items" role="listitem" tabindex="-1" aria-label="" style="">
  <div class="md-button md-no-style">
    <div class="md-list-item-inner">
      <!---->
      <!---->
      <!---->
      <!---->
      <div class="md-list-item-text">
        <h3>
          <span ng-bind-html="item.title | trusted">[ITEM_1]</span>
        </h3>
        <p>
          <span ng-bind-html="item.description | trusted"></span>
        </p>
      </div>
    </div>
    <button class="md-no-style md-button md-ink-ripple" type="button" ng-transclude="" ng-click="click(item)" aria-label="">
      <div class="md-ripple-container" style=""></div>
    </button>
    <div class="md-secondary-container"></div>
  </div>
</md-list-item>

Buggy List Item:

<md-list-item class="md-3-line _md-button-wrap _md md-clickable" ng-repeat="item in msg.items" role="listitem" tabindex="-1" aria-label="">
  <div class="md-button md-no-style">
    <button class="md-no-style md-button md-ink-ripple" type="button" ng-transclude="" ng-click="click(item)" aria-label=""></button>
    <div class="md-list-item-inner">
      <!---->
      <!---->
      <!---->
      <!---->
      <div class="md-list-item-text">
        <h3>
          <span ng-bind-html="item.title | trusted">
            <b>
              <font color="#FFD700">[ITEM_1]</font>
            </b>
          </span>
        </h3>
        <p>
          <span ng-bind-html="item.description | trusted">
            <font color="#CD853F">[DESCRIPTION_1]</font>
          </span>
        </p>
      </div>
    </div>
    <div class="md-secondary-container"></div>
  </div>
</md-list-item>

Any help would be MUCH appreciated, please for anything you need me to provide you with, be as specific as possible because I am pretty sure I won't know where to find most of the things.

I remind everyone that I am a rookie in web development and mostly a DIY tinkerer.

P.S. I am pretty sure some sort of !important broke things for me...

2

It would be helpful if you could provide a small sample flow showing the issue.

3

Hello zenofmud,

Thanks for the prompt reply.

I actually spent a large portion of my night looking for that bug.

I found some things in the CSS that when I remove them, it starts working again. I will keep researching and I will return to this post if I understand what created the bug.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.