Keyboard selection of category broken due to glyph
-
Start a
nudenew topic.Click on category (or go crazy and tab into it).
Hit G. It works! General is selected.
But instead type B. Bugs is not selected and Lorne is a sad moose.
I assume because the text is
• Bugs
, which does not start with B.Rather than something sane like
<li class='indent' style='list-style:dot; padding-left:5em;'>Bugs</li>
nodeBB. Re-implementing everything. Poorly.
-
@Lorne-Kates said in Keyboard selection of category broken due to glyph:
sad moose
I really, really, ...
-
@Lorne-Kates Not a bug. By the HTML standard,
<option>
tags can only contain plain-text.
-
@RaceProUK said in Keyboard selection of category broken due to glyph:
@Lorne-Kates Not a bug. By the HTML standard,
<option>
tags can only contain plain-text.It's a bug because NodeBB is Doing It Wrong then?
-
@Lorne-Kates Using
<li>
in<option>
would be Doing It Wrong. NodeBB is using plain-text, and is therefore Doing It Right.
-
@RaceProUK said in Keyboard selection of category broken due to glyph:
@Lorne-Kates Using
<li>
in<option>
would be Doing It Wrong. NodeBB is using plain-text, and is therefore Doing It Right.D'oh, What I meant was <option style='list-style:dot;padding-left:5em;'>Bugs</options>
-
@Lorne-Kates Don't know if
list-style
would work (never tried it), but thepadding-left
definitely would.
-
@RaceProUK Firefox inspector's computed tab doesn't list display, padding, border, or margin properties. So probably not.
-
@Lorne-Kates said in Keyboard selection of category broken due to glyph:
D'oh, What I meant was
@RaceProUK said in Keyboard selection of category broken due to glyph:
padding-left definitely would.
Let me guess, you tested it in Firefox? Because it doesn't work in Chrome at all...
Firefox 50.1: Chrome 55.0: I used these styles (for sub- and sub-sub-category, respectively):
display: list-item; margin-left: 2em; display: list-item; margin-left: 3em;
(Firefox lets you do damn near anything you want with
<option>
elements. Margin, padding, background, border... you can even give them pseudo-elements, e.g.option:before { content: '• '; }
works just fine.)
-
@anotherusername said in Keyboard selection of category broken due to glyph:
Let me guess, you tested it in Firefox?
Actually, I didn't test it at all
-
@RaceProUK well, Lorne at least probably tested it on Firefox -- and it does work on Firefox. It just doesn't work on Chrome.
As a matter of fact, using
option.subcategory { padding-left: 1em; } option.subcategory:before { content: '• '; }
...works on FF all the way back to at least version 10.0, so even his ancient version of FF would support it. However, Chrome completely ignores those styles.
Literally your only options are:
- putting the syntax in plain text in the
<option>
like we're doing now, and just living with the fact that it breaks the native keyboard search () - putting the syntax in plain text, and then reinventing the keyboard search in Javascript since it's now broken ()
- just reinventing the whole damn
<select>
element in Javascript since it's fucking broken ()
- putting the syntax in plain text in the
-
Bootstrap gets around this by styling list items like dropdowns: http://getbootstrap.com/components/#dropdowns
Isn't NodeBB already using bootstrap? Why not use the framework-approved method to begin with?
-
@Yamikuronue
display: list-item
does work, but the list bullet is displayed in the element's margin. So you need to use a large enough margin for the bullet to actually be visible, plus whatever indentation you wanted. Also the left margin is outside the element, so it doesn't get the highlight effect when you mouse over it, which looks kinda weird.
-
@anotherusername Yeah, I realized pretty quick that it won't fix Chrome's issues because Chrome simply doesn't allow styling in options. Which is why I edited with a different suggestion
-
@Yamikuronue yeah, already covered that under my post though. :P
@anotherusername said in Keyboard selection of category broken due to glyph:
- just reinventing the whole damn
<select>
element in Javascript since it's fucking broken ()
- just reinventing the whole damn
-
@anotherusername said in Keyboard selection of category broken due to glyph:
margin-left
Padding-left?
-
@Yamikuronue said in Keyboard selection of category broken due to glyph:
Bootstrap gets around this by styling list items like dropdowns: http://getbootstrap.com/components/#dropdowns
Which then breaks a whole other class of things, since browsers already implement dropdowns.
-
Why do you try so hard to find bugs? Just start typing :bug
to see the menu opens under your monitor.
FILED UNDER: shamelessly use Lorne's bug thread to show a real
-
@RaceProUK said in Keyboard selection of category broken due to glyph:
@anotherusername said in Keyboard selection of category broken due to glyph:
Let me guess, you tested it in Firefox?
Actually, I didn't test it at all
So, you work at Mozilla, then?
-
@dse said in Keyboard selection of category broken due to glyph:
to see the menu opens under your monitor.
Yup, found that bug already. Because Positioning Iz Hard.
Did you know that there is LITERALLY no way to calculate the height of an element, and it's position on the screen, and if position + height > viewport height, open bottom-to-top instead of top-down.
SUPER DIFFICULT AND HAS NEVER ONCE BEEN SOLVED BY ANY OF THE MILLIONS OF POP-UP, DROP-DOWN and TOOLTIP LIBARIES OUT THERE.
-
@Lorne-Kates I am almost certain this is a regression. It used to work (or maybe I am crazy) or both (inb @loopback0 points out the "or both").
-
@dse said in Keyboard selection of category broken due to glyph:
@Lorne-Kates I am almost certain this is a regression. It used to work (or maybe I am crazy) or both (inb @loopback0 points out the "or both").
Yes, but people complained when the dropdown moved when scrolling the page, so patch, and broke.
-
@Lorne-Kates said in Keyboard selection of category broken due to glyph:
@anotherusername said in Keyboard selection of category broken due to glyph:
margin-left
Padding-left?
Padding will be inside the list item marker, though.
-
@Lorne-Kates this is not WebScale thinking.
-
@dse said in Keyboard selection of category broken due to glyph:
@Lorne-Kates I am almost certain this is a regression.
It always is. NodeBB can't fix one thing without breaking it in two different ways.
@Tsaukpaetra said in Keyboard selection of category broken due to glyph:
Yes, but people complained when the dropdown moved when scrolling the page, so patch, and broke.
Case in point.
The popup is fixed to the page and not the container
{mashes keyboard} I FIX! {release}
Uhh-- did you test this? Like, at all? It's broken in two different ways across two different browsers, and every-day use cases fail completely.
WHAT IZ teST?
-
@Lorne-Kates said in Keyboard selection of category broken due to glyph:
Did you know that there is LITERALLY no way to calculate the height of an element, and it's position on the screen, and if position + height > viewport height, open bottom-to-top instead of top-down.
Well, you can't with pure CSS... but you can do that quite easily in Javascript.
Heh. I say "easily"... I mean it's simple in theory. The numbers are all there. As long as nothing changes, it's easy to put it where it's supposed to be... mostly you just have to make your script handle things moving, which could happen due to scrolling or the browser reflowing the content. You should be able to detect scrolling trivially; reflow, on the other hand... there's no single event that you can bind to listen for it. It could be something like an image loading anywhere above ... or below ... the content in particular. Y'know... typical jellypotato.
AFAIK there's really no good way to cover all of the bases for "if this element moves at all, I want to know about it!" in your script.
It'd really be nice if you could do it in CSS... then it'd be the browser's problem to give it the correct position if there's a reflow event. As it really should be...