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...
Related
I am trying to style the ion-refresher component background on one specific page, because it has a header. It works like expected in Safari, but on the device, it overlays everything on top.
I have tried some stuff with z-index (also with pseudo element) + positioning absolute, but I cannot get the ion-refresher to sit where it normally is. As soon as I add a background-color to the ion-refresher, it will overlay on top.
Any ideas on how to style the background of this element?
The CSS I used. Please note it only overlays everything when I add a background-color.
ion-refresher:global(.ios) {
height: 120px;
ion-refresher-content {
position: relative;
padding-top: 18px;
justify-content: start !important;
&::after {
content: '';
display: block;
width: 100%;
height: 120px;
position: absolute;
top: 0;
z-index: -9999;
background-color: purple;
}
}
:global(.refresher-pulling-icon) {
color: white;
}
ion-spinner {
color: white;
}
}
Any advice on how to debug this?
I noticed the scrolling functionality is different when using a flexbox based layout vs a position: fixed footer. The fixed footer is much smoother and shows a scrollbar. Flexbox isn't smooth at all, and does not show the scrollbar. I'd much prefer to use flexbox for my layout, but want the nicer scroll. Is there any way to achieve it with flexbox?
I'm testing on IOS 10 Iphone 7. Happens on both chrome and safari
Flexbox example
Fixed footer example
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
Fixed footer method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
padding-bottom: 72px;
}
.footer {
position: fixed;
bottom: 0;
height: 72px;
min-height: 72px;
width: 100%;
background-color: blue;
}
there's nothing to do with Flexbox.it's only the problem about overflow.so add this : -webkit-overflow-scrolling: touch; will work.
If a jQuery UI draggable element (#box1) is dragged over an element (#box2) that has z-index set to -1 or below, mouseover and mouseout events won't fire. With z-index set to 0 or above they fire.
CSS:
#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
#box2 {
position: absolute;
top: 100px;
left: 300px;
width: 100px;
height: 100px;
border: 1px solid red;
z-index: -1;
}
JavaScript:
$(function() {
$("#box1").draggable();
$("#box2").mouseover(function(e) {
$("#box2").css({
backgroundColor: "green"
});
});
$("#box2").mouseout(function(e) {
$("#box2").css({
backgroundColor: "transparent"
});
});
});
See: http://jsfiddle.net/TTwPj/11/
Without dragging mouseover and mouseout work fine with all z-index-values.
Is there a reason for this behaviour or is it a bug?
This "problem" has nothing todo with negative or positiv values of your z-index.
In this updated fiddle: http://jsfiddle.net/TTwPj/23/
#box1 {
z-index: 2;
}
#box2 {
z-index: 1;
}
you can see I set some positive values and the mousover still not firing. This is how z-index work.
If you want to achive a mouseover while dragging over the droppable element you can use the droppable event:
over: function( event, ui ) {}
to add a CSS class or style to show some visible "mouseover" effect.
The answer to this question will probably give me a "doh!" moment, but where can I find a working selectmenu plugin that work with a late(ish) jquery ui version?
Iv tried from all of these places, but none seem to work:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
https://github.com/fnagel/jquery-ui
http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html
http://jqueryui.com/download
If you believe any of them should work, please point me in the right direction so that I may be able to investigate why it doesnt work for me.
I had the same problems. But now I solved it:
1) Take the JavaScript-Selectmenu Source-Code from:
http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html
It is a version from jQuery UI 1.9.
So because 1.8.17 does not know _super, change _super to the old one:
//this._super( key, value );
$.Widget.prototype._setOption.call (this, key, value);
In the function "drawmenu" change "select" to "selected"
(this.menu.menu({ selected: )
2) Enhance jquery.ui.widget.js with the following functions from 1.9m5 (_delay from 1.9m6):
_bind, _delay.
add "this.bindings = $();" to _createWidget.
add "this.bindings.unbind( "." + this.widgetName );" to destroy.
3) Take this css and include it:
.ui-selectmenu-menu { padding: 0; margin: 0; position:absolute; top: 0; display: none; }
.ui-selectmenu-menu .ui-menu .ui-menu-item a { padding: 0.3em 1em 0.3em 1em; }
.ui-selectmenu-menu .ui-menu li.ui-state-disabled { padding: 0.3em 1em 0.3em 1em; }
.ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup { font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; }
.ui-selectmenu-open { display: block; }
.ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; }
.ui-selectmenu-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em }
4) jQuery UI 1.8.17 has a menu-Widget. It's part of the autocomplete. Extract it from there and put it in a new file.
Hope this helps
Wolfgang
update for those interested:
https://github.com/fnagel/jquery-ui
was recently updated and the code works with jQuery 1.10.1 and jQuery UI 1.10.3
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!