Arrow on drop-down button in wrong position

Discuss application theming and theme development.
Post Reply
XTAL256
Posts: 196
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Arrow on drop-down button in wrong position

Post by XTAL256 »

I use LastPass, and have it's button in the tool bar. By default, it does not show the little drop-down arrow on the button, but I have made a Stylish style to change that (and other things, I have it when 3rd party add-ons override the default theme) - see here.

But for some reason, the arrow is appearing below the image:
Image

It used to show on the right in an older version of Firefox (probably also with an older version of LastPass). I still have that version installed, so I had a look at the styles being applied to both the toolbarbutton and the xul:dropmarker elements. There were many differences, presumably due to the newer browser using newer CSS specs. But I could not see any differences in positioning. There must be something I'm missing.
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Arrow on drop-down button in wrong position

Post by mcdavis »

XTAL256 wrote:There were many differences, presumably due to the newer browser using newer CSS specs. But I could not see any differences in positioning. There must be something I'm missing.


You might try using DOM Inspector to look for the [orient] attribute on the DOM node. Also look into the CSS assigned and used values for -moz-box-direction, -moz-box-orient and -moz-box-align.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
XTAL256
Posts: 196
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Re: Arrow on drop-down button in wrong position

Post by XTAL256 »

All those properties are the same between the old and new version. The new one does have -moz-orient set to "auto", but when I changed it to "horizontal" it had no effect.
XTAL256
Posts: 196
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Re: Arrow on drop-down button in wrong position

Post by XTAL256 »

I still can't figure this out. I've tried everything I can think of, setting -moz-box-(orient|pack|align|direction) on the button, float left/right on the dropmarker, even relative and absolute positioning.
The only thing that seemed to work was setting relative position then moving the dropmarker arrow up and to the right. But the weird thing is that as soon as I hovered over the button, the arrow jumped right back to it's original position bottom center!
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Arrow on drop-down button in wrong position

Post by Frank Lion »

XTAL256 wrote:There must be something I'm missing.

Probably need -moz-appearance: none !important; on the dropmarker.

I haven't looked at your problem, but whenever I've had stuff that is defying all my commands, it always turns out to be that which shuts it up.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
XTAL256
Posts: 196
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Re: Arrow on drop-down button in wrong position

Post by XTAL256 »

Hmm, I thought it already was none, or that I tried and it didn't help. I'll have another look.
XTAL256
Posts: 196
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Re: Arrow on drop-down button in wrong position

Post by XTAL256 »

Na, -moz-appearance: none won't help, it's already being set by chrome://global/skin/toolbarbutton.css.

Maybe I'll just leave it. It doesn't look too bad without the dropdown arrow, it just doesn't conform to UI standards. It's amazing how much LastPass try to make their UI not look like the rest of the browser/OS.
Post Reply