I'm using bootstrap-modal to render modal windows.
When the site is RTL, the vertical scrollbar is on the right side. When a modal opens, the scrollbar on the right side disappears and another scrollbar appears on the left side.
This can be reproduced on the demo site.
Just $("body").css("direction","rtl") on the console to get the scrollbar to the right side and than open any modal.
Why is second scrollbar on the left side? How can I make it stay on the right side?
I see just the opposite. When the site (body) is RTL, I never see the vert scrollbar on the right side. Always on the left. That's how it's "supposed" to be.
You can't change it -- at least not with a browser scrollbar. It's on the left because that's where the scrollbar "belongs" when the direction of the site is RTL (at least according to the browser...some RTL readers think it is weird).
You can use a javascript plugin or roll your own custom scrollbars, but if you put it on the left when the site is RTL, you're changing the default browser behavior, and you're going to give yourself a lot of difficulties to integrate with bootstrap.
EDIT
Per my first comment below, I was viewing the demo page incorrectly. Sorry. The scrollbar that appears when the modal opens is on a div that represents the modal backdrop. The browser applies this correctly according to the direction of the page being RTL. But it's not the window's scrollbar that is flipping when the page is RTL; it's a div.
You can potentially use CSS to remove the scrollbar of the modal backdrop (around line 16 of http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css).
This has other consequences, however, and probably similar to the ones you're trying to avoid with the swap in direction of the window's main scrollbar.
Related
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.
I wanna know if it's possible to edit chrome/chromium devtools layout.
The reason is with a x Width > actualWidth, the layout is the left one (this is what i want as full time layout) and over the x Width < actualWidth, the layout change with the right one and I got square monitor so I can put the width too much if I want to see my render and the code javascript side-by-side.
So does it have a way to edit the devtools layout? If there is a way, how I can change the devtools layout?
Layout sample
Note: I'm using the right layout (dock to right)
Thanks for the answer
In the tab area for the content you are editing. On each side there is an icon that looks like a triangle towards a sidebar. Click that and it will hide the sidebar it is beside to give you more space.
Beyond that, you can click the overflow menu in the primary panel menu (the three icons beside the close button) and then select "Dock to Bottom" from the top layout choices.
Finally, the latest method available is to go into the Settings. Then under "Appearance" find Panel layout and change that to horizontal. This will then force the panels in elements and sources at least to be at the bottom always.
Each of these methods should provide you more area to work.
I'm having an issue with hidden scrollbars after a div is hidden then shown again. Everything works fine on page load, but after the divs are closed with the toggle button and re-opened, the scrollbar is still invisible but the screen real estate where the scrollbar would be is rendered, pushing the nav menus away from the screen edge and creating a blank space. Could someone kindly point me in the right direction here? I can't provide any sample code, but you can see a live demo on my website using the "Slider" skin. The left and right navigation menus are what is giving me problems. Thanks in advance. :)
I am working with Bootstrap 3.3.1 modals and it was working perfectly until yesterday.
I'm using some modal windows on my page.
One of those modals is more long than the page. In a normal time, Bootstrap transparently hides the body's scrollbar and creates a scrollbar on the overlay. When the user scrolls on the modal, it is stopped when it reach the end. And the body doesn't moves at all.
But, yesterday, I was working on my modals and now it is completely buggy. I have no idea of the thing I introduced that destructs my modals.
First, Bootstrap applies an offset of 15px on the body, even on the small modals that have a height inferior to the screen height.
The content is uselessly shifted.
Second, the body keeps its scrollbar when a modal is displayed. And the overlay also have its scrollbar. So, I have an hideous double scrollbar on my page, and when the user scrolls at the end of the modal, the body scrolls too.
Also, sometimes (yes), the overlay is buggy and it scrolls with the body (so I can see the body without overlay at the bottom of the page).
I have no idea of what can cause this problem since it was working before.
Edit: Here is my code : http://pastebin.com/ePAcjri8. The position of the modals in the page has no effects on this bug (just after <body>, juste before </body>, etc).
I fill the modal content via Ajax when shown.
On JavaScript side, I'm just using .modal('show') then .html(html) to fill them.
Problem solved.
I think this issue can be caused by a lot of different reasons (see topics about this problem on the Internet, but alot have been fixed in Bootstrap releases), but in my case, I just had to remove this in my CSS:
html {
overflow-x: hidden;
}
Hiding the x or y overflow in <html> can cause the apparition of the double scrollbar.
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.