I have an issue with website markup on WebKit browsers (Chrome & Safari), i.e. when I type something in edit box of right-slider, it scrolls the left area.
Please take a look at following example:
http://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - html code (input is inside div with id="palette")
Open next link in Chrome or Safari
Type something in edit box in right upper corner
Notice that scrollbar in left area shifts
It is very unlikely to change this markup radically if possible
Q. How to prevent scroll-bar from shifting and make it behave same way as it is in FF?
The problem here is that what it looks like you are doing and what you are actually doing are two different things.
It looks like the div on the left with a fixed width and overflow: auto (div#kb-board) and the input field on the right are unrelated elements - but they are not. The input field is actually a child of div#kb-board but its parent (div#palette) has fixed positioning so it sits in the top right of the page.
As a result, the input field is actually on the right hand side of div#kb-board and when you type in it the scroll bar moves as you are giving focus to the right hand side of that div.
So in this case, I would say Chrome is showing the correct behavior.
To resolve this you should stop nesting div#palette within div#kb-board. Since it uses fixed positioning, there is no need to nest it.
<div id="kb-board">
<div id="boards-container">
<div id="lane">...</div>
</div>
<!-- div#palette was originally here -->
</div>
<div id="palette">
<input type="text" value="Type here" />
</div>
Working example: http://jsbin.com/obiyec/8
Related
I'm creating an HTML page which is comprised of two sections; header and body. Rather than use a position:fixed header and allowing the whole page to scroll, I have used a normal header and made the body a scroll container. This is because there are fixed/sticky elements in the body which need to stick to the bottom of the header (and also due to problems with dynamic sizing of the header and body). The problem is that we have various UI elements which appear smooth across the header/body boundary. Our application's layout is responsive to screen size, and now the body may have a scrollbar, but the header doesn't, so they don't quite line up.
I have fixed this problem by having the body elements have a reduced width, and then using a position:absolute background div at the end, to overlap where the scrollbar would go, with the same background colours as the main UI element so they appear to be part of it. This means the header and body would keep a consistent width regardless of scrollbar.
The basic issue with this solution is that when the vertical scrollbar is shown, the browser also shows a horizontal scrollbar so that the user can "see" my placeholder background div, even though it doesn't occupy any of the width. I've tried a few different values for stuff like overflow, etc, but what it really boils down to is that none of them can show the placeholder divs when the scrollbar is not present without making a mess when it is present. There doesn't seem to be a CSS property for when the scrollbar is shown so that you can change the CSS as needed.
I've looked at e.g. scrollbar-gutter but we can't really use this as we need to continue supporting Chromium 88 as well as Firefox, iOS Safari, and similar. overflow:overlay would be ideal but isn't a well supported feature.
Some have suggested a mix of position:relative and position:fixed, but if I apply the right styles to get the element into the right place when there is no scrollbar, then it still causes the same issue when there is one.
Please see the following snippet (I tried the inbuilt one but it doesn't seem to work super well with content that requires scrollbars and such). I've created simple fixed-height divs to demonstrate the different content that I'm dealing with right now. The blue boxes should appear to go all the way across but don't need interaction right on that last bit. The red and green boxes should always line up, even though their layout is width-dependent and only the bottom section of the page scrolls if you shrink it down. These goals are achieved but when you shrink the page so that the vertical scrollbar is needed, the horizontal scrollbar also appears.
<html>
<head></head>
<body style="height:100vh;display:flex;flex-direction:column;margin:0">
<div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
<div style="height:100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
<div style="height:100px;background:red;margin-left:200px; width:50%"></div>
</div>
<div style="flex-grow: 1; overflow: auto;">
<div style="max-width:calc(100vw - 17px)">
<div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
<div style="height: 100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
</div>
</div>
</body>
</html>
I have a rather complicated layout.
At the top and bottom are fixed header/footer.
The central display is broken up into two panels:
the left panel is hideable (may be visible, may not); if it is visible then it has a fixed width. It has a scroll within it if needed.
the right panel is always visible and has a variable width. It is scrolled by the window's scroll bar.
The right panel then consists of two parts that each fill the width of the panel - a set of tabs, of various heights (the visible tab should start at the top of the right panel, as the controlling buttons for those tabs are in the header), and directly below that a 'summary' box of unknown height, which comes immediately after the visible tab, no matter which tab we are looking at and how high it is.
Each of these panels/tabs/boxes consist of an outer div, and various internal divs as needed for the content.
The tabs are made by an outer div containing four inner divs, one after the other.
I can change the HTML and css as needed.
See https://jsfiddle.net/jvw8j62t/ (with thanks to JavaSpyder who provided the basic JSFiddle that I adapted for this demo)
I have tried various methods for the left and right panel, and the best one seems to be https://stackoverflow.com/a/4676510 but I would be happy to use a different method.
I then use jquery to hide/show the left panel (using display:none) and fix the right panel's left margin accordingly, though I am happy to use a different system for that.
However the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none. I cannot easily change this as there are three different libraries from three different sources having this issue.
This means that the different tabs' tops are then positioned incorrectly, because of the visibility css - they follow after each other, per https://stackoverflow.com/a/133064/1910690.
If I try different ways to make the top of the all the tabs fall at the top of the right panel then the summary box is positioned wrong and I can't align it to below the visible tab (changing position when you switch to a tab of a different height); or the right panel's scrolling is messed up; or the bottom of the tab disappears behind the footer; or one of several other problems.
Can anyone suggest a solution to the whole layout?
Is this the kind of thing you're looking for?
I used a flex container to create the left and right sections - the header and footer were easy enough with a fixed position. I used flex-shrink:0 on the left section so its width would be fixed, while leaving the right able to change to the screen width.
I'm not sure I did the tabs the way you specified, but feel free to correct if it isn't right. If you click on a tab, it will toggle visibility:hidden , but of course this leaves an empty gap. You said "the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none." Is this something we can also take a look at, or perhaps post in another question and link it here? If we could fix this problem, it could simplify this layout issue.
The left section is really another fixed position div with overflow:auto to give it the scrollbars. The height is handled by jquery.
Finally, clicking "Toggle Left Panel" will toggle the fixed position div and the width of the left section from 0 or 200.
With thanks to #JavaSpyder for his JSFiddle, and #Dhaval Chheda for the comment that inspired me...
I realised that I could use position:absolute on the tabs - NOT to position the visible tab correctly, but rather to REMOVE the invisible tabs from the layout of the page, leaving the visible tab and the summary ONLY in the layout of the page - and the result is as wanted.
See JavaSpyder's https://jsfiddle.net/JavaSpyder/fq43Lhez/ which also fixes an issue with the width of the right panel (my original solution is at https://jsfiddle.net/jvw8j62t/ ).
Again, thanks to JavaSpyder and Dhaval Chheda - could not have done it without you.
Took me sometime to replicate this in jsfiddle. But I did it:
https://jsfiddle.net/zhankezk/uvmxq6we/2/
Steps to replicate:
Click in search textbox, press tab key
Issue:
the search textbox and search button shifts up
Expected:
They should stay where they are.
The html here are pieces from the actual site. But I noticed that issue happens only when it's under "global-nav theme--personal" div and the reason that I feel this is a Chrome bug is because firstly, it's working fine in Firefox and IE. Secondly, after pressing tab and it shifts places, if you adjust any vertical styling, the issue will be gone, for example, you can uncheck "position:relative" for div "global-nav__search is-expanded" and tick it again. the issue would go away.
<div class="global-nav theme--personal">
<div class="c-search fn_search-suggestions">
<div class="global-nav__search is-expanded">
<input type="search" class="search__field" placeholder="Search" name="query" data-target-url="/personal/personalsearchresults" autocomplete="off">
<span class="vh">Search</span>
</div>
<div class="c-suggestions" tabindex="-1">
Search for ‘home’
</div>
</div>
</div>
I can be totally wrong, thanks anyone in advance for helping!
This one's weird to me, and I'm not totally sure it doesn't represent a bug in Chrome (and/or perhaps an accessibility feature?), but it seems that Chrome is
overflowing the large "Start" content as hidden as expected (even though it's absolutely positioned, its parent is relative)
not hiding the overflowing absolutely positioned child (as expected?) since the overflow:hidden'ed container isn't absolute/relative positioned itself, but it seems that
when tabbing to the absolutely positioned element's link, Chrome suddenly seems to want to take into account the content before it, including the bigger "Start" link, so it seems to be "scrolling down" the content of the overflow:hidden'ed element for you (even though what you're changing focus to is already visible because of the absolute positioning).
(At least I think that's what happening. Especially because I couldn't see any CSS properties changing in the Inspector when tabbing back and forth.)
So what to do? It seems that two workaround are to either
change the line-height property of that "Start" button to match the font-size (1.625rem), I guess so that it's height is taken into account for the overflow, and/or
set an explicit (and big-enough) height on the .global-nav .c-search, I guess so that Chrome doesn't get "surprised" by different contents' height in the overflow:hidden element.
This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.
The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).
I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.
I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.
Does anyone have any suggestions for doing this?
Ideally, when you select a link, the section called upon will float up to about the middle of the page.
Much thanks to anyone who gives this one a shot!
The default behavior for browsers is to scroll an anchor to the top of a view port.
If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.
You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.
<a style="position:relative; top: -70px;" name="myAnchor"></a>
Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.
<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>
You should find the line above works for FireFox, Chrome and InternetExplorer.
I have a div and the requirement on it is to move the scrollbar from the right side to the left side. I've accomplished this in FF and IE with a direction:rtl; css declaration. Safari and Chrome both seem to ignore this and still put the scrollbar on the right side. Is there a way to get it on the left side in both Safari and Chrome? Thanks!
(Also I cannot convince the people involved with this to have the scrollbar on the right side like it usually is, so I just need a solution to get it on the left.)
In lieu of a full-fledged JS plugin like jscrollpane, you could achieve the desired effect with a 'dummy' div and a few lines of JavaScript. This jsFiddle I whipped up shows the working effect:
http://jsfiddle.net/rtceC/
You may, however, want to add a few lines to register a scroll wheel event over the pseudo-scrolling content div and adjust scrollTop for the dummy (and thereby for the content itself) accordingly.