I am stuck with scrolling my overflowed by x box.
I will try explain what I mean in the example below:
As you can see in the example I have a box, there is horizontal overflow.
Now, for me interesting, does it possible to scroll content of this box on left/right when I am scrolling mouse?
I have tried "over scroll x", but either I did not understand, or it is.
If someone know or have any ideas, feel free to suggest.
I am waiting for your answer!
Using Keyboard :
For vertical scroll you simply do the mouse scroll 🖱
For horizontal scroll you need to hold shift key + mouse scroll 🖱
Programmatically :
⚠ This is highly not recommended because the alignment changes and it can't be properly aligned for dynamic contents, but this can be achieved by rotating the container 90 degrees left and right
<div class="overflow-y-scroll h-[600px] w-[180px] -rotate-90 text-4xl">
<div class="w-[140px] rotate-90">Hello</div>
<div class="h-[140px] w-[20px] rotate-90">Hello</div>
<div class="h-[140px] w-[20px] rotate-90">Hello</div>
<div class="h-[140px] w-[20px] rotate-90">Hello</div>
<div class="h-[140px] w-[20px] rotate-90">Hello</div>
<div class="h-[140px] w-[20px] rotate-90">Hello</div>
<div class="h-[140px] w-[20px] rotate-90">Hello</div>
<div class="h-[140px] w-[20px] rotate-90">Hello</div>
</div>
Output:
<div class="overflow-y-scroll w-[180px] rotate-90 text-4xl">
<div class="m-10 w-[140px] -rotate-90">Hello</div>
<div class="m-10 w-[140px] -rotate-90">Hello</div>
<div class="m-10 w-[140px] -rotate-90">Hello</div>
<div class="m-10 w-[140px] -rotate-90">Hello</div>
<div class="m-10 w-[140px] -rotate-90">Hello</div>
<div class="m-10 w-[140px] -rotate-90">Hello</div>
<div class="mt-60 w-[140px] -rotate-90">Hello</div>
</div>
Output:
Tailwind-play
Related
When I used Theia Sticky Sidebar v1.7.0 my 1px gray border shape changed and I want to solve this problem.
CodePen
This is my HTML code:
<div class="container">
<div class="side-bar1">
<div class="theiaStickySidebar">
<div class="box2">
<h1>TEST</h1>
<h2>Scroll</h2>
</div>
</div>
</div>
<div class="content">
<div class="box1">
<h1>The Problem</h1>
<h3>Before It Becomes Sticky</h3>
<img src="https://i.postimg.cc/D0kgLKrT/Before.png" alt="Before It Becomes Sticky"/>
<h3>After It Becomes Sticky</h3>
<img src="https://i.postimg.cc/LsS2CqmY/After.png" alt="After It Becomes Sticky"/>
</div>
</div>
</div>
The problem is when the page extend the scroll does not appear
I have a problem with this code
<div class="yui3-lightbox act-auth-lightbox">
<div class="yui3-lightbox-content" style="max-width: 448px;">
<a class="zsg-icon-x-thin lightbox-close" title="Close" tabindex="-1"></a>
<div class="lightbox-body zsg-tooltip-viewport">
<div class="tooltip-dest">
<div id="strength-tooltip"></div>
</div>
<div class="user-account login">
<div class="module-wrap">
<div class="module-head">
<h2>مرحبا بكم في فرص</h2>
</div>
<div class="module-body">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-lightbox-mask act-auth-lightbox" style="display: block;"></div>
</div>
</div>
</div>
</div>
As in the following:
Screenshot 1
Screenshot 2
I suspect the lightbox is setting itself up to occupy the entire view using position: fixed (or something similar), and setting overflow: hidden to clip anything that doesn't fit. Assuming that's the case, your document is not exceeding the bounds of the window, hence no scrollbar.
whats up.
I am trying to code fixed navigation that stays at the top of the page all the time and I am dealing with the problem that my fixed navigation blinks every time when a href got clicked. Any ideas how to fix that?
HTML:
<nav id='nav_bar' >
<div class="row" align="center">
<div class="col-md-3"><div class="miniLogo"></div>
</div>
<div class="col-md-9">
<div class="footerContainerActive" align="center">
<div class="footerLinksContainer">Apie mus</div>
<div class="footerLinksSkirtukas"></div>
<div class="footerLinksContainer">Paslaugos</div>
<div class="footerLinksSkirtukas"></div>
<div class="footerLinksContainer">Galerija</div>
<div class="footerLinksSkirtukas"></div>
<div class="footerLinksContainer">Kontaktai</div>
</div>
</div>
</div>
</nav>
Javascript:
https://pastebin.com/wssgU5ZY
CSS:
https://pastebin.com/7nV9aHT1
Include this in your CSS File.
.a:hover,.a:active,.a:focus
{
text-decoration:none;
}
I am trying to make the <div> with class col-md-6 to be always positioned in the right end of the row even while scrolling horizontally.Here is an illustration.
<div class="row">
<div id="div1" class="col-md-6">.col-md-6</div>
<div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>
When we scroll horizontally i want div2 to remain in the last 6 columns of the window Which is not happening.The div itself is going out of the view.
Can you please specify or give some references to achieve this?I'm using Bootstrap-v3.3.0
You can set the second div to absolute position, and make it keeps the right always at the border of the screen using some jQuery.
CSS:
[class*="col-"] {
background: #F2FAFF;
border: 0px solid #B1D8ED;
display:inline-block;
}
.test{
width:2000px;
background: #F2F79F;
border: 0px solid #B1D8ED;
}
#fixed{
position:absolute;
}
HTML:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
LARGER DIV
</div>
Javascript:
$(window).scroll(function(){
$('#fixed').css('right', $(this).scrollLeft() * -1);
});
Example:
http://www.bootply.com/yeKqMVA91r
Why not just wrap the larger div in a scrollable element like so:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12" style="overflow:scroll;">
<div class="test">LARGER DIV</div>
</div>
</div>
I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/