I've encountered a problem when using a html5 number input inside a div with position: absolute; overflow: auto on Chromium Version 23.0.1271.64 (165188)
Normally scrolling the mouse wheel on a focused number input increments and decrements the value in the field. But inside a div with position: absolute; overflow: auto, the div contents just scroll unless there is nowhere to scroll.
Fiddle: http://jsfiddle.net/9M9nx/7/
Is there a way to always let the input element receive the scroll event?
I think you're going to have to hack this one. This hack works:
http://jsfiddle.net/9M9nx/12/
Here I've used jQuery to change the overflow property of the scrolling parent, based on the focus and blur events on the number input.
$('.scroller input[type=number]').focus(function(){
$(this).closest('.scroller').css('overflow','hidden');
});
$('.scroller input[type=number]').blur(function(){
$(this).closest('.scroller').css('overflow','auto');
});
Related
disclaimer: I know that fixed elements are not ment to take theire own space in the flow of a page but i think i need it anyway.
Question:
I try to have my nav in a Grid which has the height of 100vh When I press the trigger element the whole grid slides to the side and reveals the Navigation by adding a class with js. I want the whole viewport container to be in a fixed position but as I set it to position: fixed; all of the content below will overflow the container as it should by default behavior.
is there a way to "clearfix" this overflow?
I aswell want to hide it again with a "onscroll" event, so just changing the backgroundcolor is no option for me.
One way could be to change the overflow permission in the container with something like:
someDiv{
<!---Your nav should be wrapped with this-->
position: fixed;
overflow: hidden !important;
}
Then, add an onClick to your nav so when the nav is accessed, the overflow is changed
document.getElementById('someDiv').onclick = function(){
document.getElementById('someDiv').style.overflow = 'visible';
}
Not quite sure if this is what you are after.
I'm using Angular's flex-layout library, but running into an issue when I create a row with 2 columns whose widths are 50%. When one of the dropdowns is any way used, then the other column will shrink by a little bit. Inspecting the elements in Chrome, I'm not seeing anything obvious that would cause the issue.
You can reproduce the issue by selecting an option from the Select #1 dropdown.
http://plnkr.co/edit/aL1qrrP3sX2XZQcfaglQ?p=preview
What am I missing?
The problem is that when you select an item, the placeholder which goes to the top of your select input has its width increased by some javascript. As it is in position: relative, its place in the DOM doesn't change, so its still like it is in the select field but with an increased width, which push the arrow to the right.
To fix the issue, you can add
.mat-select-arrow {
position: absolute;
right: 0;
}
So the arrow will be in absolute positioning and won't be pushed by the placeholder.
It's strange though that the width of the placeholder is changed...
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
I need to have absolutely positioned element which scrolls with its parent. The absolutely positioned element may be wider than the scrollable container, in which case the content is currently being clipped. It appears that combining overflow-y: auto; and overflow-x: visible; does not work.
Here is a JSFiddle to illustrate the problem. Notice the popups cause horizontal scrolling.
And this is what it should look like here, only with scrolling.
Can this be accomplished through CSS?
You have a hard coded width. The <div> will automatically take the full width of the page, so you want to do is restrict the maximum width that the div can contain so change the width: 400px to something like max-width: 90%
Here's a JSFiddle example: http://jsfiddle.net/c8DdL/3/
For posterity: The problem does require a JavaScript solution. Ultimately the project feature I was working on was changed to avoid this problem and resulted in a better design.
use max_width instead of width 400. That is the only solution.
I found a solution in my project, by hiding the horizontal scrollbar (I use a custom scrollbar ui), giving the container a padding-right of 300px and a margin-right of -300px. The padding and -margin make it so the normal children are aligned the same, except there's also extra room in the container in case an absolutely-positioned element extends out of that zone. (scrollable areas cut off anything outside the outer bounds)
Of course, if you have content to the right of the scroll area, this makes it extend out onto it. With a transparent background that isn't a visual problem; however it then blocks mouse events.
To solve that, I added two elements as siblings of the scroll-view, like so:
// this outer container resizes to match the size of scrollContainer
<div style={{position: "relative"}>
<div id="scrollContainer" style={{paddingRight: 300, marginRight: -300}}>
// stuff which might extend to the right
</div>
// the containers below resize with the outer container
// however, notice that the 2nd one is positioned only over the possibly-extended-onto area
<div id="insideArea" style={{position: "absolute", left: 0, right: 0, top: 0, bottom: 0}}
onMouseEnter={()=> {
// we're back inside, so enable scroll-container mouse-events
$("scrollContainer").css("pointer-events", "auto");
// prevent self from blocking mouse events for scrollContainer
$("insideArea").css("display", "none");
// re-enable extend-area div, so we know when mouse moves over it
$("extendArea").css("display", "block");
}/>
<div id="extendArea" style={{position: "absolute", top: 0, bottom: 0, left: "100%", width: 300}}
onMouseEnter={()=> {
// we're over the extend-area, so disable scroll-container mouse events
$("scrollContainer").css("pointer-events", "none");
// prevent self from blocking mouse events for behind-extend-area elements
$("#extendArea").css("display", "none");
// re-enable inside-area div, so we know when mouse moves over it
$("#insideArea").css("display", "block");
}/>
What does the above do? It makes it so when your mouse enters the normal scroll-view area, pointer-events are enabled, letting you click on stuff inside -- but when your mouse moves into the special "extended" area, the scroll-view mouse-events are disabled, letting you click on the normal items behind that area.
This solution will probably never be used by anyone else, but I spent enough time finding it I thought I'd share it anyway!
I have an Ajax Toolkit combobox in a web page, which have a master page. The Combobox is inside a table.When the webpage loads the listitems of this combo box are appearing below far away from the combo box.
What is the fix?? :(
.ajax__combobox_itemlist
{
position:absolute!important;
height: 100px !important;
overflow: auto !important;
top: auto !important;
left: auto !important;
}
It's work perfectly....
I'm having the same problem. It's a well listed bug that is also in the ajaxcontrolkit autocompleteextender. Basically, the calculations for where the list will be placed inside the page are wrong.
There are lots of fixes for this, but they're a pain to use, so just do this:
combobox1_OptionList{
position: fixed !important
}
It changes the way the calculations are made, which luckily makes it accurate.
Note: if your containing div will change position on window resize (e.g left: 10%; top 50%;) then when you change your window size, the combo box list will not move under the combo box and will be left behind. However, each time the combo box list is triggered its position is recalculated, so adding a javascript event for a window resize that turns the comboboxlist off might do the trick.
Try wrapping the ComboBox in a div. I had the very same problem. I added a class to each ComboBox div and added the following css.
.cbox
{
margin: 0 auto;
width: 280px;
}
Set the width according to your preference. Margin: auto places the div centrally within the parent according to the width.
Kindly look at this sample
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ComboBox/ComboBox.aspx
ComboBox Known Issues
When ListItemHoverCssClass is specified and the ComboBox list is scrollable, highlighting a list item will cause the scrollbar to flicker when using the Internet Explorer web browser. To avoid this issue, do not specify the ListItemHoverCssClass property.
if this doesn't solve a problem mention your markup for combobox in comment
thanks