Skip to content

Theme: removed or changed occurrences of zoom #852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Theme: removed or changed occurrences of zoom #852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d649f33
Theme: removed or changed occurrences of zoom. Fixes #7975 - Remove i…
selfthinker Nov 29, 2012
d9dc628
changed comments for browser-specific changes to standard format
selfthinker Nov 29, 2012
166fc76
button: changed demo toolbar container from span to div
selfthinker Nov 29, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions demos/button/toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@
<link rel="stylesheet" href="../demos.css">
<style>
#toolbar {
padding: 11px 4px 9px 4px;
padding: 4px;
display: inline-block;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@selfthinker, I'm guessing you checked, how do these changes effect the toolbar demo in IE7. I literally just landed this so I want to be sure :-)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I've checked and my changes in toolbar.html fixes the same main issue that the toolbar background looked all weird.
Although the original code "fixed" one more issue (in the button css), i.e. that the buttons were not lined up properly, it also introduced a new bug that made every <button> with more than 1 word unusable (e.g. the button in the split button demo was running over 3 lines).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A further explanation what was the problem in the first place: The #toolbar is a span (for whatever reason) and therefore top and bottom paddings won't behave properly. By making it have a display of either "block" or "inline-block", it can properly contain its elements and can/should take the same top and bottom padding as the left and right padding.
(Ideally using a div instead of a span would make much more sense anyway.)

I have no idea why the padding of the #toolbar was changed for IE7. In all browsers there is a bit more space on the right than on the left, because every button has a right margin. In all IE versions it seems to be a bit more, but IE7 is not different to other IEs. Maybe it was before my fix, though.

If you'd like I can make screenshots before and after the fixes.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why it's a span either. We can certainly change it to a div if it'll help with styling.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not necessary for the styling as the display: inline-block; works the same for both divs and spans. It's just if it had been a div, it wouldn't have needed it in the first place. But a div makes much more sense for many other reasons.

}

/* support: IE7 */
*:first-child+html #toolbar {
padding: 4px 0px 4px 5px;
*+html #toolbar {
display: inline;
}
</style>
<script>
Expand Down Expand Up @@ -91,7 +91,7 @@
</head>
<body>

<span id="toolbar" class="ui-widget-header ui-corner-all">
<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">go to beginning</button>
<button id="rewind">rewind</button>
<button id="play">play</button>
Expand All @@ -106,12 +106,12 @@
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</span>
</span>
</div>

<div class="demo-description">
<p>
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
</p>
</div>
</body>
Expand Down
3 changes: 1 addition & 2 deletions themes/base/jquery.ui.accordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
zoom: 1;
min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
Expand All @@ -35,5 +35,4 @@
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
zoom: 1;
}
3 changes: 1 addition & 2 deletions themes/base/jquery.ui.button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
margin-right: .1em;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible; /* removes extra width in IE */
}
.ui-button,
Expand All @@ -42,7 +41,7 @@ button.ui-button-icons-only {

/* button text element */
.ui-button .ui-button-text {
display: inline-block;
display: block;
line-height: 1.4;
}
.ui-button-text-only .ui-button-text {
Expand Down
2 changes: 1 addition & 1 deletion themes/base/jquery.ui.core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
clear: both;
}
.ui-helper-clearfix {
zoom: 1;
min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
width: 100%;
Expand Down
1 change: 0 additions & 1 deletion themes/base/jquery.ui.dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
padding: .5em 1em;
background: none;
overflow: auto;
zoom: 1;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
Expand Down
3 changes: 1 addition & 2 deletions themes/base/jquery.ui.menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
.ui-menu .ui-menu-item {
margin: 0;
padding: 0;
zoom: 1;
width: 100%;
}
.ui-menu .ui-menu-divider {
Expand All @@ -37,7 +36,7 @@
display: block;
padding: 2px .4em;
line-height: 1.5;
zoom: 1;
min-height: 0; /* support: IE7 */
font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
Expand Down
1 change: 0 additions & 1 deletion themes/base/jquery.ui.tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
zoom: 1;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
Expand Down
5 changes: 3 additions & 2 deletions themes/base/jquery.ui.theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,10 @@
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}*/; }
.ui-widget-header a {
color: #222222/*{fcHeader}*/;
}

/* Interaction states
----------------------------------*/
Expand Down