In CKEditor, how do I always turn scrollbars on? - javascript

When editing inside CKEditor, I always want the scrollbars to be shown. Is there a way to override the CSS to always show the scrollbars, even if there's nothing lower filling it up?

it should be achievable using CSS.
I have a tool using the CKEditor and I see the body tag of the iframe in which the content is edited has a class .cke_show_borders.
So you can do:
.cke_show_borders {
overflow: scroll;
}
Or to have more detailed control over the vertical/horizontal scrollbars
.cke_show_borders {
overflow-y: scroll; // vertical scrollbar
overflow-x: scroll; // horizontal scrollbar
}

Related

Scrollbar fades out when not in use. This should not happen

I want the scrollbar to be always visible to allow the user to understand that there is extra content. Currently the scrollbar fades out if not in use.
Making the main scrollbar always visible
I think the answer you're looking for is found here, but for simpliicty:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
If this does not work, take off the top overflow so you're left with just
html {
overflow-y: scroll;
}
On MacOS this is set at the system level, and shouldn't be forced by the site

Disable scrolling without scroll top zero by overflow: hidden

I have a bootstrap modal and on showing that, the background should not be allowed to scroll. I could use overflow: hidden for the item list container. But it causes the page scroll to top and it should not be allowed. Any idea?
Have you tried with:
html { overflow-y: hidden; }
Hope this helps!
Note that this will disable the scroll bar.

Jquery Scrollable, is it possible to customize it with a scroll bar?

Jquery Scrollable is a tool by Jquery Tool that scrolls a list of images/videos
http://jquerytools.org/demos/scrollable/
But I am just wondering, has anyone of you tried to customize it with a scroll bar. What I mean is we want to use Jquery scrollable for the following page
http://www.space.ca/Face-Off.aspx
But we want to keep the scroll bar in the bottom, rather than using the left and right arrow to scroll through the video carousel.
Would that be possible? If you have done a customization of JQuery Scrollable and using the scroll bar , Please share some tips with me
Many thanks
You could archive this using plain css:
<div class="scrollMe">
<div>Do what ever you want</div>
</div>
And then just make sure you css is in order:
.scrollMe {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap; /* this is important for you, this means that you will keep everything in a single line which will make this guy scroll on the y-axis. If you need multiline on the childs you need to set: white-space: nowrap; on the childs */
}
And all your block level childs needs display: inline-block;:
.scrollMe > div {
display: inline-block;
}

Get rid of useless scroll bars on fancybox iframe

I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.

Content jumps horizontally whenever browser adds a scrollbar

I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.
Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?
I think this should be enough info for the problem, but let me know if I can answer anything else.
Edit for clarification: I don't want to force the scrollbar to appear.
I'll just leave this link here because it seems an elegant solution to me:
https://aykevl.nl/2014/09/fix-jumping-scrollbar
What he does is add this css:
#media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.
You can see an example here:
http://codepen.io/anon/pen/NPgbKP
I've run into this problem myself and I've found two ways to solve it:
Always force the scrollbar to be present:
body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.
Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.
I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).
Facebook uses option 2.
Use this CSS:
body { overflow-y: scroll; }
You can force the scrollbar to always appear:
http://www.mediacollege.com/internet/css/scroll-always.html
The process is :
html {
overflow-y: scroll !important;
}
This will show the scrollbar even there no need any scroll bar.
Best possible way through CSS, It will show/hide Scrollbar accordingly, will
solve jump problem, works on every browser
html {
overflow: hidden;
}
body {
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
For me, the solution was to add this rule to the body:
body {
overflow-anchor: none;
}
This rule was added recently, and aims to reduce the variability of browsers having different default assumptions about how they should react to overflowing. Chrome, for example, has overflow anchoring enabled by default, whereas Firefox does not. Setting this property will force both browsers to behave the same way.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

Categories

Resources