When moving through the list of suggestions in IE the graphic indicating the currently selected item extends past the vertical scrollbar. Is there a way to keep it within the visible area of the list?
I'm using IE7 and jQuery UI 1.8.16.
I have the autocomplete styled like so:
.ui-autocomplete {
width: 190px;
max-height: 132px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
* html .ui-autocomplete {
height: 132px;
}
.ui-autocomplete li {
font-size: 12px;
}
already tried overflow-y: scroll; ?
You can't use "auto" without setting a fixed height, and I think "max-height" didn't work on IE7.
Good luck!
Related
There is a strange phenomenon on safari: border-radius of parent element doesn't work when child element has a background.
Everything is OK when remove -webkit-overflow-scrolling: touch;.
What happen when set -webkit-overflow-scrolling: touch; in safari ?
How can I keep -webkit-overflow-scrolling: touch; and prevent the strange phenomenon at the same time?
html,
body {
background: red;
}
* {
padding: 0;
margin: 0;
}
.main {
height: 250px;
width: 250px;
margin: 10px;
overflow: scroll;
border-radius: 20px;
background: green;
-webkit-overflow-scrolling: touch; //ios平滑滚动
}
ul li {
list-style-type: none;
}
li:nth-child(even) {
background: gray;
}
<div class="main">
<ul>
<li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
<li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
...
</ul>
</div>
I have solved this issue in the help of my colleague, as follows:
.main {
margin: 10px;
background: green;
overflow: scroll;
border-radius: 20px;
}
.main .wrapper {
height: 250px;
overflow: scroll;
border-radius: 20px;
}
I add a wrapper element between scroll area(.main) and scroll content(ul), and then set wrapper height, overflow and border-radius the same as scroll area(.main).
But what happen when set -webkit-overflow-scrolling as touch ?
Looking forward to your answer.
I´m using the JQUERY UI Accordion with full height and width.
All ok with that. But, when I try to put a DIV (cover) above all, it appears BEHIND the accordion. I tried all (all I can or know) and more, but nothing happened. The same result.
Example:
For Style
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
}
For HTML
<body>
<div id="cover"></div>
...
THE REST
...
Anyone had this problem or know HOW TO fix it?
Thanks you!
Try adding z-index
#cover{
position: absolute;
top: 123px;
width: 100px;
height: 100px;
background-color: red;
z-index: 10000;
}
On the other elements that are going to be behind it you can make their z-index lower.
I've got an issue and can't solve it easily because appears only in one case : when i'm on my page and i switch from landscape to portrait, on iOS.
My app is a Phonegap app using Angular and plugin device-orientation to make it working with my responsive CSS.
All is fine, except this part.
I've got an horizontal menu and i wan't user able to scroll it if there is overflow.
Here is my code :
CSS
nav.inline {
background: #e4eeef;
outline: 1px solid #e4eeef; /* Safari bug rendering */
overflow: hidden;
overflow-x: scroll;
text-transform: uppercase;
-webkit-overflow-scrolling: touch;
}
nav.inline ul {
list-style: none;
min-width: 102%;
padding: 0 2%;
width: 102%;
white-space: nowrap;
}
nav.inline ul li {
display: inline-block;
white-space: nowrap;
}
nav.inline ul a {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
color: #4b8c95;
display: inline-block;
font-size: 1.7em;
font-weight: bold;
line-height: 80px;
margin: 0 0.7em;
}
nav.inline ul a.active {
border-bottom: 4px solid #4b8c95;
}
HTML
<nav class="fullwidth inline" ng-include="'partials/nav.html'"></nav>
And the partial associated
<ul data-snap-ignore="true">
<li><a ng-click="setTab('link1')">Link 1</a></li>
<li><a ng-click="setTab('link2')">Link 2</a></li>
...
</ul>
You can see "data-snap-ignore" because i'm using angular-snap.js for an other menu (left menu) and i don't wan't him to appear when i'm sliding this one (this part is working well).
Thanks for helping ;)
Yep, this sucks. It's a bug, AFAICT.
So far the only mechanism I've found to fix it is to toggle display from none to block on the container, like so:
var navElement = document.getElementsByTagName("nav")[0];
navElement.style.display = "none";
setTimeout ( function() { navElement.style.display = "block"; }, 0 );
Which *looks * horrible, in my opinion, but it does restore the scrolling ability.
Since, as far as I can tell, it never breaks if the elements within force the container to scroll, it should work to ensure that the container always scrolls, even if by a pixel or two.
I have a web-view with blurry text in iOS 7. There are many posts with solutions, however none of them seem to work in my case. The best solution that I've found thus far is to apply -webkit-transform: translateZ(0); to the blurry elements, as seen here. But doing this causes -webkit-overflow-scrolling: touch; to become inoperable. Any advice would be much appreciated.
UPDATE: Here is the CSS associated with the scrolling wrapper and elements containing blurry text
#scrolling_element {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow: auto !important;
}
.elements_w_blurry_text {
position: relative;
border: 1px solid #000;
background-image: url("../path/to/img.png");
background-repeat: repeat;
-webkit-transform: translateZ(0);/* or any other suggested code*/
}
Try adding this into your css:
-webkit-text-size-adjust:none;
I am rendering a jQuery combobox, but the height of input element does not match the height of toggle button as shown in screen shot below. This is happening in both, IE 9 and FireFox 13.
The style being used for jQuery combobox is as below.
<style>
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
.ui-autocomplete { height: 200px; overflow-y: auto; }
</style>
You should update your combo-box widget from the jqueryui page. and make sure that you use the latest jquery-ui (this issue was fixed recently).
this helped me...