I have been using JQueryUI for various aspects of my site, and a small tabbed menu set was working well, except in firefox. The image below shows the same code rendered in firefox on top, and IE9 below. Note the gap under the tabs and the (possible?) increase in padding inside the tab. I have removed all my stylesheets from the site (the 2nd image) leaving just the base JQuery UI one, but the gaps still appear, and only in firefox.
The js call is as basic as it can be:
$("#menuTabs").tabs();
It's not often I have display issues where IE is better than firefox... Having removed all the CSS I generated, and made sure there's no styles being applied, I'm at a loss as to where to look next!
If you can offer any suggestions as to what might be causing it, I'd be a happy chappie!
[EDIT]
After scaling back the code as far as I could, and using only 'known good' libraries, it turns out that it is caused by it being in a table cell!
Here's some code you can have a play with! http://jsfiddle.net/XVHTk/
It does however work when "Normalized CSS" is checked, so it could be padding inherited from the cell maybe?
[EDIT #2]
Right.
So.
It turns out that CSS styles applied to a table to remove padding and margins and borders and so forth are not enough. You have to include cellpadding="0" and cellspacing="0" in the table definition otherwise the jQuery tabs have some extra padding around them.
Odd.
jsFiddle with table and no extras: http://jsfiddle.net/XVHTk/1/
jsFiddle with table spacing/padding stripped: http://jsfiddle.net/XVHTk/2/
Why the HTML cell properties are being transferred into the tabs, I have no idea. I'm just happy to have fixed it!
This is caused by a bug in the ui-helper-clearfix class. See ticket #8442 and the associated fix. As you can see from the ticket, this was fixed in 1.10.1. I've created a fiddle showing this working properly with 1.10.1 and using 1.8.x with additional CSS to fix the issue. The latter shows that if you can't upgrade to 1.10.1+ right now, you can just include the following CSS:
.ui-helper-clearfix:after {
border-collapse: collapse;
}
Related
I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.
All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.
Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.
I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.
After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally.
Solution: Load chrome://flags and set Smooth Scrolling to disable.
Seems odd that this would be necessary. Anyone know what's going on?
This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).
6 hours gone, but it's a relieve to know it's nothing got to do with my codes.
iPhone with chrome is fine on my end
To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.
So if we apply this to the body,
body {
overflow: hidden !important;
}
this should work in your scenario!
Please make sure you have added this meta tag and the same attributes
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.
I'm developing a web page with a Google Maps element and a jquery UI accordion/tab based sidebar. Everything is working pretty well in most modern browsers, but I've had several problems with IE7. The web page is hosted here: http://jeffandkelly.net/map
There's a lot going on in the page; normally I'd try to create a jsfiddle, but I haven't been able to get that site working in IE7. I've already employed numerous IE7-specific hacks, and now things are looking a lot better. However, I've still got some issues.
My sidebar consists of a jquery UI accordion with 2 elements. In the second element is a jquery UI tab control, and inside each tab are several <div> elements. It's these elements that aren't behaving correctly in IE7 (shown left) vs Chrome (shown right).
ie7 vs. chrome page rendering http://jeffandkelly.net/map/ie7-vs-chrome.jpg
First of all, I've got a CSS rule that should be hiding the headers for these elements (the "Safe Medicine Disposal Drop Off Location" text):
<h3 class="map-popup-header>Safe Medicine Disposal Drop Off Location</h3>
CSS:
.poi-holder .map-popup-header {
display: none;
}
But IE7 doesn't apply that rule. Second, IE7 hides the content that should be there (the F12 tools show that the elements are in the DOM, but have a height of 0).
Any help would be appreciated, as well as advice on some next steps to try.
It turns out there were multiple problems with the code. First, IE7 requires tables to include <tbody> elements when creating content dynamically. Therefore, the following code doesn't work without the commented line.
var infoTable = document.createElement('table');
var infoTbody = document.createElement('tbody'); //required for IE7!!
var infoTr = document.createElement('tr');
var infoTextTd = document.createElement('td');
var infoPhotoTd = document.createElement('td');
infoDiv.appendChild(infoTable);
infoTable.appendChild(infoTbody);
infoTbody.appendChild(infoTr);
infoTr.appendChild(infoTextTd);
infoTr.appendChild(infoPhotoTd);
Second, IE7 won't apply CSS rules to dynamically generated content given class attributes using element.setAttribute('class', className). It requires the use of element.className = className.
var header = document.createElement('h3');
header.className = 'map-popup-header'; //works as expected in IE7
var header = document.createElement('h3');
header.setAttribute('class','map-popup-header'); //doesn't work in IE7
Hope this answer can help someone else!
I'm using jquery UI to resize a div vertically(I.E. using the n handle). I'm using a helper so it only resizes after the user stops dragging. After a resize is done I call a function which sets dimensions on surrounding elements so they all fit within a container.
This works in both chrome and IE, but in firefox a css property of top is added which blows the div out of the container.
I've tried removing the top value after the fact, which works, but this is kind of a hack and also causes the div to 'jump'.
Is this a bug? Is there a workaround using jquery css html, etc?
To see what I mean check this fiddle and resize the element, if you inspect it in firefox there will a top css property but not in chrome.
Thanks,
Luke
In my opinion it is a bug.
Workaround: if you add a top: 0; to the css rule for #resizable IE, chrome and firefox have the same behavior. Also see the updated example.
=== UPDATE ===
It's a firefox bug. I walked from the jQuery UI resizable method code until the css method of jQuery (main) code to find an answer. At the end of my search I could found that firefox returns for css top value auto for not/static positioned elements, but returns 0px if relative position is set; in both cases top is not defined (they could be set to auto with no difference - it's the default value).
Also see this example.
In the resizable method this result makes the difference (jQuery UI sets the relative position to the DOM element by adding a class). If the bug (which I have reported to mozilla) will be fixed, the behavior of your example in the firefox should be the same as in chrome.
I'll report here if there is something new...
=== UPDATE ===
Now I have a workaround for you:
for the special situation you described set the css position of your resizable element manually to static.
Add to your stylesheets:
#resizable { position: static; }
Also see your updated example.
I'm trying to apply jQuery UI Selectable to a portion of my website. However, I do not see either the selection box while dragging the mouse, nor does the color of selected li elements change.
So to understand the problem, I went back to the source:
http://jqueryui.com/demos/selectable/
I see (using IE9 developer tools) that a style .ui-selected is applied to selected elements. Using Trace Styles, IE shows that background-color is originally defined in jquery-ui.css but overridden (ultimately) by #selectable .ui-selected. However, IE does not show the source of #selectable .ui-selected. Searching the jQuery UI style sheet I reference, jquery-ui-1.8.18.custom.css, finds no mention of ui-selected, nor do I find it in jquery.ui.selectable.css.
Where exactly is the demo page getting the CSS for the background color?
I found one of the other jQueryUI demos defines the style for those classes in a custom style sheet, so I ended up following that lead.
http://jqueryui.com/demos/selectable/#serialize
It seems odd that those styles are not part of jQueryUI Themeroller. Perhaps that will change in the future.
I have an issue where due to some elements loading faster than others, the page looks broken for a few seconds at the start. An example is the CSS Pie behavior that allows me to do curved corners in IE, it appears before it becomes curved which looks bad. What would be ideal would be it somehow knowing when everything is loaded and then appear all at once, possibly including some kind of elegant visual way of not making the user feel impatient... any ideas or common tricks for doing this?
You could add a css class to the <body> tag by default and use some javascript to remove that css class once the page is loaded?
<body class="notready" onload="this.className = '';">
</body>
with some css classes defined to hide the things you do not want to show just yet:
body.notready .myclassname { display: none; }