MozillaZine

Arrow on drop-down button in wrong position

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

Post Posted July 21st, 2014, 8:33 pm

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.

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted July 21st, 2014, 10:34 pm

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: 190
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 22nd, 2014, 3:21 am

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: 190
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 29th, 2014, 5:22 am

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!

Frank Lion

User avatar
 
Posts: 19516
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted July 29th, 2014, 5:42 am

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

XTAL256
 
Posts: 190
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 29th, 2014, 2:18 pm

Hmm, I thought it already was none, or that I tried and it didn't help. I'll have another look.

XTAL256
 
Posts: 190
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 29th, 2014, 5:31 pm

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.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest