Menu
This code makes the browser have a horizontal scroll bar when the content is bigger than the window, overflowing to the right:
div.a {
position: relative;
float: left;
background-color: red;
}
div.b {
position: absolute;
top: 100%;
left: 100%;
background-color: blue;
white-space: nowrap;
}<div class="a">Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
But if I make the first div float right and then second positioned left of it, the browser doesn't make a horizontal scroll bar, and the overflowing text can't be viewed.
div.a {
position: relative;
float: right;
background-color: red;
}
div.b {
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
white-space: nowrap;
}<div class="a">
Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
Can I change this behaviour somehow, to be able to scroll left if the content is bigger than the window, overflowing to the left?
Tested on FF 47, IE 11, Opera 38 - all do the same thing.
If this behaviour can't be changed by html/css, what is the reason browsers choose to do what they currently do? Is there any reason why they couldn't be 'fixed'? Wouldn't the current behaviour also be problematic for sites catering solely for right-to-left languages, which I assume would want to be able to use layouts like this?
384
as you have a very specific example will something like this work for you? I did have to use a little jquery (you can do it with javascript). If you don't have any other content that will be affected you could place a rtl on the HTML tag and keep your absolute position on the element.
if ($("#b").prop('scrollWidth') > $("body").width() ) { //Security Check
$('html').css('direction', 'rtl');
}
else {
$('html').css('direction', 'ltr');
}div.a
{
position: relative;
float: right;
background-color: red;
}
div.b
{
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
white-space: nowrap;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
Text1
<div class="b" id="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>So, using the dir attribute in the right places you can half-do what I wanted. But you can't have your cake and eat it - I wanted to be able to scroll left to see content overflowing left, and also scroll right to see content overflowing right. With or without this dir hack, you still have some unviewable content.
Without dir hack, can't see all of Longtext2
div.a
{
position: relative;
float: right;
background-color: red;
}
div.b
{
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
}<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div>
Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End
</div>
<div class="a">
Text1
<div class="b">
Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End
</div>
</div>
</body>
</html>
With dir hack, can't see all of Longtext1.
div.a
{
position: relative;
float: right;
background-color: red;
}
div.b
{
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
}<html>
<head>
<style type="text/css">
</style>
</head>
<body dir="rtl">
<div dir="ltr">
Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End
</div>
<div class="a" dir="ltr">
Text1
<div class="b">
Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End
</div>
</div>
</body>
</html>
So, sadly, it seems that is not currently possible to make current browsers be able to scroll to view both (with scroll bar initial position at document origin, corresponding to slider being somewhere in the middle). As in this mockup:
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With