Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

TIcket 5253 fix. #265

Closed
wants to merge 2 commits into from

3 participants

lordt Doug Neiner Scott González
lordt

Fix for http://bugs.jqueryui.com/ticket/5253.

How can I change owner of ticket in bugtracker?

Doug Neiner

I am a little concerned about the zoom: 1 in the jquery.ui.theme.css file. Most headers are block level by default, and if they are not, they can be handled on a per case basis. I feel like this change should have been made in the demo file where the .ui-widget-header is arbitrarily added to the span#toolbar.

Also, on the toolbar.html changes, the CSS hack is targeting only IE7, whereas both IE6 and IE7 could benefit from the change. The following change, combined with your inline-block change in jquery.ui.button.css, seems to achieve the same effect, but work in IE6 and IE7:

#toolbar {
  padding: 11px 4px 9px 4px;
  display: inline-block;
  *padding: 4px 0px 4px 5px;
}
lordt

Hi, about toolbar.html changes: I don't have ie6 so I coudn't test it. If you say that this also works in ie6 I can change it.

zoom:1 : Lets say I am noob user, I know only basic css styles. I saw nice toolbar demo on jquery-ui site, so I try make something similar on my site. I'm using jquery-ui, but wait! Why on ie7 it not looks like on demo site?! (What if I have not the toolbar.html file from some reason?) . I will never found how to fix it.

I think this souldn't be separated to case and framework/library. Jquery-ui is one thing, the specific case is another.

I don't test the zoom:1 in other examples, however I'm sure it wouldn't make another bugs.

Scott González

If users copy the markup from a demo, but not the styles, that's not something we should be concerned with. The fact that the toolbar is an inline element and causes layout issues is specific to the demo.

lordt

I will test my solution with other demos. I think if it will not destroy anything, it could be added to jquery.ui.themes.css. Because why not? However you manage the code, so I will relay on you.

lordt

I made second fix for this one, so this I'm closing.

lordt lordt closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
7 demos/button/toolbar.html
View
@@ -11,8 +11,11 @@
<link rel="stylesheet" href="../demos.css">
<style>
#toolbar {
- padding: 10px 4px;
- }
+ padding: 11px 4px 9px 4px;
+ }
+ *:first-child+html #toolbar {
+ padding: 4px 0px 4px 5px;
+ }
</style>
<script>
$(function() {
2  themes/base/jquery.ui.button.css
View
@@ -14,7 +14,7 @@ button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a l
button.ui-button-icons-only { width: 3.7em; }
/*button text element */
-.ui-button .ui-button-text { display: block; line-height: 1.4; }
+.ui-button .ui-button-text { display: inline-block; line-height: 1.4; }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
2  themes/base/jquery.ui.theme.css
View
@@ -18,7 +18,7 @@
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
-.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
+.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; zoom:1;}
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
/* Interaction states
Something went wrong with that request. Please try again.