Opened 12 years ago
Closed 12 years ago
#6264 closed defect (fixed)
Toolbar: extra spacing between buttons (FF)
Reported by: | jeffg | Owned by: | Sam Foster |
---|---|---|---|
Priority: | high | Milestone: | 1.2 |
Component: | Dijit - LnF | Version: | 1.0 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description (last modified by )
Based on unchanged markup, recent builds as we approach 1.1 have introduced extra space between buttons on toolbars. Both on custom markup (that haveabsolutely no space in it), and in the Editor tool bar, when invoked through markup.
It badly screws up the look of things...
Proper look on IE7:
Extra spacing on FF2:
Attachments (5)
Change History (28)
comment:1 Changed 12 years ago by
Component: | General → Dijit |
---|---|
Milestone: | 1.1.1 → 1.2 |
Owner: | anonymous deleted |
Priority: | highest → low |
Changed 12 years ago by
Attachment: | toolbar.png added |
---|
comment:2 Changed 12 years ago by
Milestone: | 1.2 → 1.1.1 |
---|---|
Priority: | low → high |
Attached are the images the editor from our app under IE7 and FF2 (windows). The same problem occurs in our app with buttons created from markup on dojo toolbar. Same code & markup with different results.
It is a very broken look on FF, and it is a poor look as well, hence the upped priority.
comment:3 Changed 12 years ago by
Summary: | Button inTtoolbars have exta space → Buttons inToolbars have exta space |
---|
comment:4 Changed 12 years ago by
Summary: | Buttons inToolbars have exta space → Buttons inToolbars have extra space |
---|
comment:5 Changed 12 years ago by
Description: | modified (diff) |
---|---|
Milestone: | 1.1.1 → 1.2 |
Priority: | high → normal |
Summary: | Buttons inToolbars have extra space → Toolbar: extra spacing between buttons (FF) |
Yes, there's a problem on FF2 and FF3 where the <span> node w/the icon is 18x18 but the button itself is 24x20, although according to firebug neither the button nor the span have padding or margin... you can workaround this by just adding a CSS rule to your main page:
.dijitToolbar .dijitButton { margin: 0px; width: 18px; padding-left: -3px; }
comment:6 Changed 12 years ago by
Component: | Dijit → Dijit - LnF |
---|
comment:7 Changed 12 years ago by
Description: | modified (diff) |
---|
bill: really unsure why this can't land on 1.1.1. What's the rationale for punting?
comment:8 Changed 12 years ago by
Changed 12 years ago by
Attachment: | patch6264.diff added |
---|
comment:9 Changed 12 years ago by
Owner: | set to dylan |
---|---|
Status: | new → assigned |
comment:10 Changed 12 years ago by
Milestone: | 1.2 → 1.1.1 |
---|
comment:11 Changed 12 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
comment:12 Changed 12 years ago by
comment:13 Changed 12 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
comment:14 follow-up: 15 Changed 12 years ago by
Patch from earlier helps, but not enough. Need to look at this again.
comment:15 Changed 12 years ago by
Replying to dylan:
Patch from earlier helps, but not enough. Need to look at this again.
the button element in FF has some default (non-removable) padding (3px IIRC). So any solution to this will either be some css hack (thats not coming to me right now), or changing to use some other element - which may or may not be a solution. Here's some details and screenshots: http://www.designdetector.com/demos/buttons-padding-demo.html
Using negative padding on the button doesnt do anything for me.
comment:16 Changed 12 years ago by
comment:17 Changed 12 years ago by
Milestone: | 1.1.1 → 1.3 |
---|
comment:18 Changed 12 years ago by
Milestone: | 1.3 → 1.2 |
---|---|
Owner: | changed from dylan to Sam Foster |
Status: | reopened → new |
From a snippet on http://www.sitepoint.com/forums/showthread.php?t=547059
6264_mozFocusInner.patch adds a rule to the tundra toolbar buttons that effectively removes the mysterious inner padding. The same could/should be applied to the other themes presumably - or perhaps this belongs in dijit.css? I dont know to what extent we've designed around the current behavior.
Moving back to 1.2, unless someone feels strongly that its needs to be squeezed into 1.1.1
comment:19 Changed 12 years ago by
Status: | new → assigned |
---|
Re-created the 6264_mozFocusInner.patch to patch dijit.css and fix this for all themes
comment:20 Changed 12 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
Changed 12 years ago by
Attachment: | 6264_mozFocusInner.patch added |
---|
[PATCH] [CLA] fixes a11y regression with the -moz-focus-inner rule by removing border:none (dijit.css)
comment:21 Changed 12 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
Turns out that removing the border specified by -moz-focus-inner (in the mozilla/ff default stylesheet) prevents the button from accepting focus. I updated the 624_mozFocusInner.patch (already committed to trunk) to remove that property assignment. This inner border basically is the outline -which we want. The padding is still removed, so I still consider this fixed. I'll look into seeing if there's a way to claw back the 2px.
comment:22 Changed 12 years ago by
comment:23 Changed 12 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
They look fine to me. I'm attaching an image... does it look different for you?