Skip to main content

Search and Top Navigation

#14885 closed bug (wontfix)

Opened December 08, 2015 02:42PM UTC

Closed December 17, 2015 08:32AM UTC

Last modified January 08, 2016 07:46PM UTC

Anchor in menu item breaks styling

Reported by: aklaver Owned by: aklaver
Priority: minor Milestone: none
Component: ui.menu Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:
Description

Issue #10130, Commit 3a61627a501cb7ba1ce80046bfabbff0f7f2f517

If you include an anchor in a menu item the CSS styling no longer works, where in 10.x it worked. Nothing in the issue or the commit indicates why the change was made and to what purpose. The change notes:

http://jqueryui.com/upgrade-guide/1.11/#added-items-option-for-better-definition-of-menu-items-in-non-parent-child-structures

mention the styling issue, but they do not indicate a solution. So a change for unknown reasons that breaks previous behavior, with no path to a solution, a bug in my view.

Attachments (0)
Change History (15)

Changed January 01, 1970 12:24AM UTC by aklaver comment:1

status: pendingnew

Changed December 08, 2015 02:51PM UTC by scottgonzalez comment:2

component: ui.coreui.menu
owner: → aklaver

Can you explain what you mean by "CSS styling no longer works?" If I add an anchor to a menu, it works just fine.

Changed December 08, 2015 03:29PM UTC by lankymart comment:3

_comment0: Previous comment from [#10130 - Menu: Remove requirement for anchors in menu items](https://bugs.jqueryui.com/ticket/10130) \ \ Not sure if this is intended but there are various examples of implementing a header (non selectable list element) but I've found that whatever I try and can't stop the default "ui-menu-item" class being applied to my listitem. I've managed to workout that the examples that work are using 1.8 but I'm using 11.0 and it's defaulting to the "ui-menu-item" and doesn't seem to be over-ridable. \ \ '''Example of working header''' \ \ http://stackoverflow.com/a/20676143/692942 \ \ http://jsfiddle.net/IrvinDominin/rMkER/ \ \ '''Code Excerpt''' \ \ \ {{{ \ $("#list").autocomplete("instance")._renderMenu = function(ul, items) { \ var self = this; \ $.each( items, function( index, item ) { \ self._renderItemData(ul, item); \ // prepended element still ends up with "ui-menu-item" class?? \ if (index == 0) ul.prepend('<li class="ui-header"><span>Returned ' + items.length + ' record(s)</span></li>'); \ }); \ // attempt to hack css! \ ul.find("li:first-child").removeClass("ui-menu-item"); \ }; \ }}} \ \ I've now pin pointed what I think is the cause it appears after 1.10.4 and is present in 1.11.0 it's in the refresh() method in menu.js (previously jquery.ui.menu.js). \ \ It looks like it's due to the requirement for an anchor to be present being removed (see https://github.com/jquery/jquery-ui/blob/3a61627a501cb7ba1ce80046bfabbff0f7f2f517/ui/jquery.ui.menu.js#L325 and https://github.com/jquery/jquery-ui/commit/3a61627a501cb7ba1ce80046bfabbff0f7f2f517#commitcomment-7591515)1449588656145292
_comment1: Previous comment from [https://bugs.jqueryui.com/ticket/10130 #10130 - Menu: Remove requirement for anchors in menu items] \ \ Not sure if this is intended but there are various examples of implementing a header (non selectable list element) but I've found that whatever I try and can't stop the default "ui-menu-item" class being applied to my listitem. I've managed to workout that the examples that work are using 1.8 but I'm using 11.0 and it's defaulting to the "ui-menu-item" and doesn't seem to be over-ridable. \ \ '''Example of working header''' \ \ http://stackoverflow.com/a/20676143/692942 \ \ http://jsfiddle.net/IrvinDominin/rMkER/ \ \ '''Code Excerpt''' \ \ \ {{{ \ $("#list").autocomplete("instance")._renderMenu = function(ul, items) { \ var self = this; \ $.each( items, function( index, item ) { \ self._renderItemData(ul, item); \ // prepended element still ends up with "ui-menu-item" class?? \ if (index == 0) ul.prepend('<li class="ui-header"><span>Returned ' + items.length + ' record(s)</span></li>'); \ }); \ // attempt to hack css! \ ul.find("li:first-child").removeClass("ui-menu-item"); \ }; \ }}} \ \ I've now pin pointed what I think is the cause it appears after 1.10.4 and is present in 1.11.0 it's in the refresh() method in menu.js (previously jquery.ui.menu.js). \ \ It looks like it's due to the requirement for an anchor to be present being removed (see https://github.com/jquery/jquery-ui/blob/3a61627a501cb7ba1ce80046bfabbff0f7f2f517/ui/jquery.ui.menu.js#L325 and https://github.com/jquery/jquery-ui/commit/3a61627a501cb7ba1ce80046bfabbff0f7f2f517#commitcomment-7591515)1449898069935063

Previous comment from #10130 - Menu: Remove requirement for anchors in menu items

Not sure if this is intended but there are various examples of implementing a header (non selectable list element) but I've found that whatever I try and can't stop the default "ui-menu-item" class being applied to my listitem. I've managed to workout that the examples that work are using 1.8 but I'm using 11.0 and it's defaulting to the "ui-menu-item" and doesn't seem to be over-ridable.

Example of working header

http://stackoverflow.com/a/20676143/692942

http://jsfiddle.net/IrvinDominin/rMkER/

Code Excerpt

      $("#list").autocomplete("instance")._renderMenu = function(ul, items) {
        var self = this;
        $.each( items, function( index, item ) {
          self._renderItemData(ul, item);
          // prepended element still ends up with "ui-menu-item" class??
          if (index == 0) ul.prepend('<li class="ui-header"><span>Returned ' + items.length + ' record(s)</span></li>');
        });
        // attempt to hack css!
        ul.find("li:first-child").removeClass("ui-menu-item");
      };

I've now pin pointed what I think is the cause it appears after 1.10.4 and is present in 1.11.0 it's in the refresh() method in menu.js (previously jquery.ui.menu.js).

It looks like it's due to the requirement for an anchor to be present being removed (see https://github.com/jquery/jquery-ui/blob/3a61627a501cb7ba1ce80046bfabbff0f7f2f517/ui/jquery.ui.menu.js#L325 and https://github.com/jquery/jquery-ui/commit/3a61627a501cb7ba1ce80046bfabbff0f7f2f517#commitcomment-7591515)

Changed December 08, 2015 03:33PM UTC by scottgonzalez comment:4

So this is about autocomplete, doesn't use anchors at all, and doesn't provide a demo using the latest version? Please create a reduced test case using the latest version, along with an explanation of what you're trying to accomplish and how the anchors are related to the problem.

Changed December 10, 2015 05:26PM UTC by rjollos comment:5

_comment0: A couple of screenshots to show what I mean: \ \ http://aklaver.org/wordpress/wp-content/gallery/paste/jquery-ui_menu_1.png \ \ \ http://aklaver.org/wordpress/wp-content/gallery/paste/jquery-ui_menu_2.png \ \ jquery-1.11.3.min.js \ jquery-ui.css -- From jquery-ui-1.11.4 Cupertino \ \ \ Menu layout: \ \ <ul id="menu"> \ <li> \ {% if user.is_authenticated %} \ Logged in: <br><b> {{ user.first_name}} {{user.last_name }}</b> \ <a href="/accounts/logout"><button type="button" >Log Out </button></a> \ <input type="hidden" id="logged_in" value={{user.username}}> \ {% endif %} \ </li> \ <li> \ {% if user.is_superuser %} \ <a href="/hplc_admin/">Admin</a> \ {% endif %} \ </li> \ <li> \ <a href="/welcome/">Home</a> \ </li> \ \ <li> \ <a href="#">Tasks</a> \ <ul> \ <li><a href="/student_information/">Students</a></li> \ <li><a href="/daily_attendance/">Attendance</a></li> \ <li><a href="/student_lunch">Student Lunch</a></li> \ <li><a href="/enter_grades/">Enter Grades</a></li> \ <li><a href="/school_calendar/">School Calendar</a></li> \ <li><a href="/missed_attendance/">Missed Attendance</a></li> \ <li><a href="/district_contacts/">District Contacts</a></li> \ </ul> \ </li> \ \ <li> \ <a href="#">Reports</a> \ <ul> \ <li> \ <a href="#">District</a> \ <ul> \ <li><a href="/district_reports/attendance/">District Attendance</a></li> \ <li><a href="/district_reports/billing/">Billing</a></li> \ <li><a href="/district_reports/student_contacts/">Student Contacts</a></li> \ <li><a href="/district_reports/special_education/">Special Ed</a></li> \ <li><a href="/district_reports/missed_attendance/">Missed Attendance</a></li> \ <li><a href="/district_reports/student_lunch/">Lunches Served</a></li> \ <li><a href="/district_reports/ethnicity/">Ethnicity Report</a></li> \ <li><a href="/district_reports/student_history/">Student History Report</a></li> \ <li><a href="/district_reports/lunch/">Lunch Report</a></li> \ <li><a href="/district_reports/parole_officer/">Parole Officer</a></li> \ <li><a href="/district_reports/school_days/">School Days</a></li> \ </ul> \ </li> \ \ <li> \ <a href="#">Student</a> \ <ul> \ <li><a href="/student_reports/attendance/">Student Attendance</a></li> \ <li><a href="/student_reports/transcript/">Student Transcript</a></li> \ <li><a href="/grade_history_student/">Student Grades</a></li> \ <li><a href="/student_reports/service_learning/">Service Learning</a></li> \ <li><a href="/student_reports/comments/">Student Comment</a></li> \ <li><a href="/notice_transition/">Notice of Transition</a></li> \ </ul> \ </li> \ </ul> \ </li> \ <li> \ <a href="#">Print</a> \ <ul> \ <li><a href="/attendance_sheet/" >Attendance Sheet</a></li> \ <li><a href="/grade_sheet/" >Grade Sheet</a></li> \ </ul> \ </li> \ </ul>1449896716998163

A couple of screenshots to show what I mean:

http://aklaver.org/wordpress/wp-content/gallery/paste/jquery-ui_menu_1.png

http://aklaver.org/wordpress/wp-content/gallery/paste/jquery-ui_menu_2.png

jquery-1.11.3.min.js

jquery-ui.css -- From jquery-ui-1.11.4 Cupertino

Menu layout:

#!text/html
<ul id="menu">
            <li>
            {% if user.is_authenticated %}
                Logged in: <br><b> {{ user.first_name}} {{user.last_name }}</b>
                <a href="/accounts/logout"><button type="button" >Log Out </button></a>
                <input type="hidden" id="logged_in" value={{user.username}}>
            {% endif %}
            </li>
            <li>
                {% if user.is_superuser %}
                    <a href="/hplc_admin/">Admin</a>
                {% endif %}
            </li>
            <li>
                <a href="/welcome/">Home</a>
            </li>

            <li>
                <a href="#">Tasks</a>
                <ul>
                    <li><a href="/student_information/">Students</a></li>
                    <li><a href="/daily_attendance/">Attendance</a></li>
                    <li><a href="/student_lunch">Student Lunch</a></li>
                    <li><a href="/enter_grades/">Enter Grades</a></li>
                    <li><a href="/school_calendar/">School Calendar</a></li>
                    <li><a href="/missed_attendance/">Missed Attendance</a></li>
                    <li><a href="/district_contacts/">District Contacts</a></li>
                </ul>
            </li>

            <li>
                <a href="#">Reports</a>
                <ul>
                    <li>
                    <a href="#">District</a>
                    <ul>
                        <li><a href="/district_reports/attendance/">District Attendance</a></li>
                        <li><a href="/district_reports/billing/">Billing</a></li>
                        <li><a href="/district_reports/student_contacts/">Student Contacts</a></li>
                        <li><a href="/district_reports/special_education/">Special Ed</a></li>
                        <li><a href="/district_reports/missed_attendance/">Missed Attendance</a></li>
                        <li><a href="/district_reports/student_lunch/">Lunches Served</a></li>
                        <li><a href="/district_reports/ethnicity/">Ethnicity Report</a></li>
                        <li><a href="/district_reports/student_history/">Student History Report</a></li>
                        <li><a href="/district_reports/lunch/">Lunch Report</a></li>
                        <li><a href="/district_reports/parole_officer/">Parole Officer</a></li>
                        <li><a href="/district_reports/school_days/">School Days</a></li>
                    </ul>
                    </li>

                    <li>
                    <a href="#">Student</a>
                    <ul>
                        <li><a href="/student_reports/attendance/">Student Attendance</a></li>
                        <li><a href="/student_reports/transcript/">Student Transcript</a></li>
                        <li><a href="/grade_history_student/">Student Grades</a></li>
                        <li><a href="/student_reports/service_learning/">Service Learning</a></li>
                        <li><a href="/student_reports/comments/">Student Comment</a></li>
                        <li><a href="/notice_transition/">Notice of Transition</a></li>
                    </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Print</a>
                <ul>
                    <li><a href="/attendance_sheet/" >Attendance Sheet</a></li>
                    <li><a href="/grade_sheet/" >Grade Sheet</a></li>
                </ul>
            </li>
        </ul>

Changed December 10, 2015 06:54PM UTC by scottgonzalez comment:6

status: newpending

Can you please try again? Provide a reduced test case that we can actually look at using jsbin or jsFiddle. Explain what you expect to happen and what's actually happening.

Changed December 10, 2015 07:29PM UTC by aklaver comment:7

New look:

http://jsbin.com/dogobageha/edit?html,js,output

Set up with cupertino which makes the submenus almost unreadable. Other themes make things look a little better, but still not like in 1.10.4:

http://jsbin.com/yazuyetalo/1/edit?html,js,output

Changed December 10, 2015 07:31PM UTC by scottgonzalez comment:8

_comment0: So is the actual big you're trying to report that the color of anchors inside a menu may not look good based on the theme you're using?1449775937316507
status: newpending

So is the actual bug you're trying to report that the color of anchors inside a menu may not look good based on the theme you're using?

Changed December 10, 2015 07:36PM UTC by aklaver comment:9

No the 'big' is that what worked before does not work now to the extent that the menu becomes unreadable. It is pretty simple, the change broke theming. I have also yet to see an explanation of problem the change solved and/or why it was necessary?

Changed December 10, 2015 08:19PM UTC by scottgonzalez comment:10

It seems like you're just trying to be adversarial at this point. I'll let someone else respond since you don't want to cooperate with me.

Changed December 10, 2015 11:17PM UTC by aklaver comment:11

Really? I created a test case, as requested, to demonstrate the issue I raised. It did and proved there is a difference in behavior between the past and the present. Your response was to basically blow it off as a minor detail. I think not being able to see items in a menu as not minor. As to my other question issue #10130 has no explanation for why it was created or acted on and in light of the fact that it demonstrably changes behavior for the worse, I think asking what is its purpose is a legitimate response.

Changed December 11, 2015 05:43PM UTC by jzaefferer comment:12

status: newpending

The upgrade guide for 1.11 says that "Markup containing anchors will still work, although there may be styling issues. It's recommended to remove the anchors from your markup.": http://jqueryui.com/upgrade-guide/1.11/#remove-the-requirement-to-use-anchors-in-menu-items

If I understand this ticket correctly, the ticket author considers that a bug, which is fine, but at this point very unlikely to get addressed, since we haven't done any changes to 1.11 in a long time, and since its reasonable to address this by overriding the styles as needed (something like http://jsbin.com/bubolavide/edit?css,output ), and since it is also resolved in master (1.12): http://jsbin.com/pavapuxulu/edit?html,css,output

Am I missing something?

Changed December 16, 2015 04:37PM UTC by aklaver comment:13

Seems I am the one missing something, namely why themes created by the project do not stay in sync with changes produced by the project. As to this being resolved in 1.12 I am not seeing it. If you take away the CSS hack then it does not work, unless again I missing something. More to the point if there is a fix why has it not been back-patched to 1.11, given that this version is listed as the stable one. Lastly no one has answered to the rationale for eliminating anchors in the first place. If there was an issue it caused that the change fixed it would go a long way to help me understand.

Changed December 17, 2015 08:32AM UTC by jzaefferer comment:14

resolution: → wontfix
status: newclosed

Sorry to disappoint, but this isn't going anywhere.

Changed January 08, 2016 07:45PM UTC by mherbold comment:15

_comment0: Hello - can we re-open? I think I am having the same issues as this guy. But I am nicer. :-) \ \ Here is my jsfiddle to reproduce - https://jsfiddle.net/2Lx3cqv1/1/ \ \ Basically remove from the CSS the lines under the /* HACK */ comment and you will see that Option 3 under Activity A does not show up correctly in the Black Tie theme. The hack that I put it makes it work... BUT I am not sure how to fix it for icons (which are having the exact same problem). You can see the wrench icon under Activity A do not show up until you mouse into the menu. \ \ Don't get thrown off by my horizontal menu code - the issue is present in the normal vertical menu as well.1452282416014952

Hello - can we re-open? I think I am having the same issues as this guy. But I am nicer. :-)

Here is my jsfiddle to reproduce - https://jsfiddle.net/2Lx3cqv1/3/

Basically remove from the CSS the lines under the /* HACK */ comment and you will see that Option 3 under Activity A does not show up correctly in the Black Tie theme. The hack that I put it makes it work... BUT I am not sure how to fix it for icons (which are having the exact same problem). You can see the wrench icon under Activity A do not show up until you mouse into the menu.

Don't get thrown off by my horizontal menu code - the issue is present in the normal vertical menu as well.