I am using a facebook like button on my web page. I need it to align at the right side of the page. But there is a horizontal scroll bar displaying.
Please see the fiddle http://jsfiddle.net/u4kMs/
I couldn't find out what causes this. How to fix this?
to disable scroll, try something like;
.your_div_class{
overflow-x: hidden;
overflow-y: scroll;
}
The scrollbar appears because the content is too wide for your screen.
Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.
If you don't get a satisfying solution you can still declare overflow:hidden on the containing div to supress the scrollbars.
This would be the result: http://jsfiddle.net/poikl/u4kMs/8/
It's because the frame is too small for the width that you have set on the top div
<div style="margin-left:auto; margin-right:auto; width:980px;">
So when this is on your web page yo shouldn't get the horizontal scroller. If you do, then consider changing the above width
Try this and remember to put the "right-aligned" div before the left-aligned div, even the right div have to be "after" graphically speaking.
rtl has a problem most times, (with me special with
<body dir="{{(App::isLocale('ar') ? 'rtl' : 'ltr')}}">
in laravel and the only solution is
body{ overflow-x: hidden; } but be careful with inside element is fitted well
Related
I want to prevent the cards I have from leaving the div they are in when I resize the screen. I added overflow scroll in order to solve this and it works the way I would like but I don't understand what is causing this weird grey outline at the bottom of page. I dont have any styling that would cause it. I'm not sure if this a browser thing but is there a way to remove it?
I know the grey bar on the right is for scroll but what is the bar on the bottom across the card for?
Try overflow-y: scroll; instead of overflow: scroll;. This ensures the overflow scrollbar is only applied vertically.
<span class="field-tip"><span class="tip-content">Put help text in here!</span></span>
I need to add scrollbar for tooltip content which is "put help text in here!". Can anyone please help.
you could add overflow-y: visible; to your div definition in your css and that would work.
if you use scroll i would suggest you use overflow-y or overflow-x and not just overflow on it's own or else you get arrows in all directions
overflow-y: auto
You'll use auto so that he only will be able to scroll if necessary. (so if the inner content takes up more space than the outer box the content lives in)
That'll do the trick.
I am currently helping a friend with a very simple, responsive 1-page site which can be viewed here.
If you drag your browser window down to about 450px in width or less, you will see that the layout changes which is correct. However, when you drag vertically to make the page shorter, the content in the middle gets hidden/covered.
I need for the text in the middle to always be visible, even if the user needs to scroll/swipe to see it. NOTE: It is the whole body that I would want to scroll, not just the content div.
In this image, you can see that the text is covered if the viewport isn't very tall:
On the div that contains the main content, I have tried setting height and min-height as well as using !important to no avail.
I must be missing something obvious. Any help is appreciated.
Set the div named "content" the style: "overflow-y: scroll;"
<div id="content" style="overflow-y: scroll;">
<!-- content -->
</div>
body {
overflow-y: scroll;
}
Updated to be the whole document.
Basically, I saw this fiddle in an answer to a similar question. In that example, I want the image to only have a 40px height but still be at full resolution, and the rest just goes "under" the navbar. The end result should look something like this:
How can I accomplish this?
code because of jsfiddle link
Just change the overflow to overflow: hidden
See this updated fiddle: http://jsfiddle.net/Hg4CA/1/
Basically overflow: hidden hides anything that is bigger than the bounding box.
You could also do overflow-y: hidden to just hide any vertical overflow.
I have a div that has a lot of content and hence scrolls.. How can I hide the scrollbar such that it is not visible. EDIT: I do want scrolling to work! So.. Scrolling with no scrollbar?
eg
.scrolling_div {
overflow:auto;
/*something else to hide the scrollbar?*/
}
Ok, I spent sometime to write minimal code.
Check DEMO. Mouse over the div and scroll to see the scroller.
Note that this using an external plugin to listen to mousewheel event.
DEMO page for the plugin
overflow:hidden should hide the scrollbar.
.scrolling_div {
overflow: hidden;
}
overflow can take any one of the below values,
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.Printers may print overflowing content.
auto
Provide scrollbars if content overflows.
Reference
overflow: auto; means "show a scrollbar if necessary". Change it to overflow: hidden; to disable scrolling.
EDIT: Okay, you want to make a custom scrollbar. Then see this sample jsFiddle for how to get started - it includes mouse wheeling and dragging of the scrollbar.
You can try this:
html {
overflow: hidden;
}
it will remove the scrollbar from all the window.
Otherwise if you need it only on a specific div:
.scrolling_div {
overflow: hidden;
}
Use a wrapper which covers the element you want to be scrollable without a scrollbar, and let the wrapper be narrower than the element to scroll, in the horizontal basis. This is what I mean: http://jsfiddle.net/FlagelloDiDio/EdgTt/
It really depends on what you are going for. see here
overflow:hidden; may be what you want.
If you want to dip into css3, you can play with overflow-x and overflow-y for even more options.
The only way to hide the scrollbar is to make the content non-scrollable and just cut off if it exceeds the height (overflow: hidden). Honestly, why would you want to have a page that is scrollable that doesn't have a scrollbar? That would confuse the heck out of any visitors. There's no way you can do this with CSS.
As far as customizing the scrollbar, there are JavaScripts out there to do that. But make sure that if the user has it disabled, they can still properly scroll the page without it.