New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

navbar counts "<script>" elements as navigation items #7943

Closed
cchene opened this Issue Jan 27, 2015 · 4 comments

Comments

Projects
None yet
6 participants
@cchene

cchene commented Jan 27, 2015

A navigation bar si built from a <ul> containing <li> for each item.

From HTML 5 recommendation (http://www.w3.org/TR/html5/grouping-content.html#the-ul-element):

  • <ul> can contain <li> and <script> elements,
  • <script> is a "script supporting element" that is not to be rendered.

However, when a navbar's content mixes <li> and <script> elements, the display is incorrect. <script> elements are treated as <li> elements, i.e. they have a place reserved for them in the navbar.

See http://jsbin.com/varesivera/3/edit
Actual display is : a navbar with three buttons placed on top of each other and left-aligned.
Expected display is : a navbar with three buttons placed alongside horizontally.
Tested on Google Chrome 40.0.

Navbar building process should only take <li> elements into account and ignore any other child content.

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Mar 17, 2015

@gabrielschulhof gabrielschulhof self-assigned this Mar 17, 2015

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 17, 2015

Contributor

@arschmitz @jaspermdegroot it's easy enough to make the grid generator ignore script tags, but the problem is that, for the inset navbar, the right vertical border is added to the last button via :last-child which does not work if the last child is a script. So, we'd either need to use :last-of-type, which is not supported before IE9, or:

  1. Document that we do not support the last child being a script tag, or
  2. Use ui-last-child, like we do with listview, and modify the CSS to not use :last-child

What say you?

Contributor

gabrielschulhof commented Mar 17, 2015

@arschmitz @jaspermdegroot it's easy enough to make the grid generator ignore script tags, but the problem is that, for the inset navbar, the right vertical border is added to the last button via :last-child which does not work if the last child is a script. So, we'd either need to use :last-of-type, which is not supported before IE9, or:

  1. Document that we do not support the last child being a script tag, or
  2. Use ui-last-child, like we do with listview, and modify the CSS to not use :last-child

What say you?

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Mar 19, 2015

Member

I think this has been reported before. Let me try to find that ticket.

Member

jaspermdegroot commented Mar 19, 2015

I think this has been reported before. Let me try to find that ticket.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Mar 19, 2015

Member

Nevermind, can't find that ticket.

@cgack will this still be a problem with the reviewed navbar in 1.5?

I think we should be consistent across all widgets in how we deal with elements that should be ignored and making sure the right elements get corner styling. So I am in favor of "Use ui-last-child, like we do with listview, and modify the CSS to not use :last-child".

Member

jaspermdegroot commented Mar 19, 2015

Nevermind, can't find that ticket.

@cgack will this still be a problem with the reviewed navbar in 1.5?

I think we should be consistent across all widgets in how we deal with elements that should be ignored and making sure the right elements get corner styling. So I am in favor of "Use ui-last-child, like we do with listview, and modify the CSS to not use :last-child".

@cgack

This comment has been minimized.

Show comment
Hide comment
@cgack

cgack Apr 23, 2015

Contributor

@jaspermdegroot the current status to the navbar review doesn't utilize the grid at all so it will behave appropriately: http://jsbin.com/qaguqo/1/edit?html,output

Contributor

cgack commented Apr 23, 2015

@jaspermdegroot the current status to the navbar review doesn't utilize the grid at all so it will behave appropriately: http://jsbin.com/qaguqo/1/edit?html,output

@arschmitz arschmitz assigned cgack and unassigned gabrielschulhof Jun 29, 2015

@apsdehal apsdehal closed this May 8, 2016

@apsdehal apsdehal self-assigned this Aug 3, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment