I have an issue that I can't resolve.
I want the container to scroll on y only and the overflow should be visible on x, to display the dropdown menu.
Is this even possible ? Can you enlighten me ?
Thanks.
EDIT
Here is a JSFiddle that represents my issue. You need to keep in mind that the dropdown menu doesn't have to move but just need to appear above the .item container. Hope you understand.
https://jsfiddle.net/sog1oxuq/1/
You can add either
overflow-x hidden
or
overflow-y hidden
To your body
Change the overflow: scroll; on .item to overflow-y: scroll;. Also, why the left: 100px; on .dropdown-menu? Change it to left: 0; and it should work fine.
See example
I updated the jsfiddle so only the verical scrollbar appears:
https://jsfiddle.net/os5pqjqb/
All I did was update the CSS:
overflow-y:scroll
Related
In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!
here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});
http://jsfiddle.net/XPxsx/43/
.scrollable
{
position:relative;
height:300px;
width:100px;
}
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps
PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on
plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance
You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.
Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.
Using position:fixed fixes an element both vertically and horizontally, but I want my element only to remain horizontally fixed. That is, I want it to scroll vertically with the rest of the page.
Is there any CSS way of doing this? If not, would monitoring scroll offsets and then moving the element be the right approach?
I ended up doing something like this:
.fixThisHorizontally {
position:absolute;
z-index:100;
}
Then,
jQuery(window).scroll(function() {
jQuery('.fixThisHorizontally').css('left', document.body.scrollLeft);
});
Thanks to all who answered.
position:absolute;overflow-x: hidden; overflow-y: scroll;
did you try these
I don't think this is possible entirely with CSS. I would, indeed, use position:absolute and use JavaScript to change the top css value when the page is scrolled.
I have coded my div to re size and change margin on click of a div with id = switch. But it is disappearing on beginning of animation and reappear on the completion of animation. Ypu can see my fiddle here. Why is this happening and how can I avoid this??
Thanks in advance...:)
blasteralfred
Add
overflow: visible !important;
to #sidebar and#switch won't disappear during the animation.
It is happening because it is hidden underneath your "viewer". If you can move your switch inside the "viewer" and float it left, set margin-left. Should fix it.
During the animation the elements overflow is set to "hidden".
As #switch is visually placed outside #sidebar it disappears. Christopher's solution should override it.
It also would'nt happen if you place #switch inside #viewer