It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work
Related
I'm trying to synchronize the scrolling between two separate panels / divs.
One element has overflow: auto while the other has overflow: hidden (sort of trying to replicate a grid with frozen columns).
I can sync the scroll when the event happens within the element with overflow: auto but not the one with overflow: hidden (which is sort of normal if you ask me).
However, is there a workaround for this? I want to synchronize the scrolling both ways.
Here's a fiddle that will illustrate my issue (try scrolling in both panels): http://jsfiddle.net/0zzbkyqg/
Also, this thing seems to happen here already: http://demos.telerik.com/kendo-ui/grid/frozen-columns but I just can't understand how they're doing it.
Maybe you should make use of the wheel event which is triggered when you roll the mouse wheel, regardless of whether the section of the view has scrolled or not.
Demo
$("#panel-left > table").on('wheel', function (e) {
// your logic here
}
I'm thinking you don't need jQuery to do that.
Look here: http://jsfiddle.net/ty0jyr4y/
I've removed the position: absolute and overflow properties from the panels and added float: left to make them inline (could also use display: inline-block), and added height: 400px, width: 417px and overflow: auto to the container.
The container's width is set to 417px instead of 400px because the scroll bar takes 17 pixels of space (across all browsers according to here).
Works beautifully. Is this what you want?
I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.
My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!
Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}
Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.
Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.
I am working on the following demo which uses snap.js and chart.js on my website
DEMO JSFIDDLE
I added some JavaScript to display a content from chart.js while you scroll, but seems like it is in some trouble with the following style:
Line 10 - CSS: overflow: auto;
Which hides the content. If I delete this style it works perfectly:
DEMO2 JSFIDDLE (without overflow)
Should I create a #canvas style to let me display it in front of the other content? Without deleting the properties of snap.js?
The problem is that overflow:auto is hiding your absolute positioned element. This happens because absolutely positioned elements are essentially taken out of the DOM flow and so because the parent container has nothing to give it height, your absolute positioned element is hidden.
What you'd be better doing is not using absolute positioning, or giving the container a specific height. That or floating the element left and using a clearfix (my favorite is the :after variation).
I would like to implement a vertical scroll in a drop down menu when the options in the menu exceed 8.Is it possible to achieve this by using Css properties alone?Please let me know how I should go about this
Set an "overflow: auto" property on the containing div. To collapse the div if it is less than 8 items then you will need to use the max-height: property. It will not work for IE6 so use a hack to get around IE6.
That is absolutely possible using CSS. All you need to do is set a fixed height on the menu (so set the height to however tall 8 items is) and give it overflow-y: auto. This tells the browser that if the fixed height is exceeded, a vertical scrollbar should appear.
on your ul li ul add the height you want for example height:80px; and overflow-y:auto;