Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#14885 closed bug (wontfix)

Anchor in menu item breaks styling

Reported by: Adrian Klaver Owned by: Adrian Klaver
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.

Change History (15)

comment:1 Changed 50 years ago by Adrian Klaver

Status: pendingnew

comment:1 Changed 4 years ago by Scott González

Component: ui.coreui.menu
Owner: set to Adrian Klaver

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

comment:2 Changed 4 years ago by lankymart

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)

Last edited 4 years ago by Ryan J Ollos (previous) (diff)

comment:3 Changed 4 years ago by Scott González

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.

comment:4 Changed 4 years ago by Adrian Klaver

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>
Last edited 4 years ago by Ryan J Ollos (previous) (diff)

comment:5 Changed 4 years ago by Scott González

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.

comment:6 Changed 4 years ago by Adrian Klaver

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

comment:7 Changed 4 years ago by Scott González

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?

Last edited 4 years ago by Scott González (previous) (diff)

comment:8 Changed 4 years ago by Adrian Klaver

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?

comment:9 Changed 4 years ago by Scott González

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.

comment:10 Changed 4 years ago by Adrian Klaver

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.

comment:11 Changed 4 years ago by Jörn Zaefferer

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?

comment:12 Changed 4 years ago by Adrian Klaver

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.

comment:13 Changed 4 years ago by Jörn Zaefferer

Resolution: wontfix
Status: newclosed

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

comment:14 Changed 4 years ago by Marvin Herbold

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.

Last edited 4 years ago by Marvin Herbold (previous) (diff)
Note: See TracTickets for help on using tickets.