I have a problem with an unwanted blank space on the right of of my site and X-scrolling. It seems to me that the navbar causes the problem, as it stretches beyond the container. Via the Google Developer mode I can switch off the clear:both parameter of the navbar and the space will disappear, but the rest of the CSSS will be broken.
The viewport width is set to device width and initial scale is set to 1. Can anyone help me out and give a solution?
The site address is poiskdetei.ru or en.poiskdetei.ru (English version)
Tnank you!
Welcome to SO. I am not sure why that area is there, but I do know one way you could fix it.
You could simply add overflow-x: hidden to the area that is going over. Then it will not be visible to users, and the scrollbar will not be there anymore.
The unwanted x-scrolling is caused by a row which is unwrapped inside a container and hence the default margin of -15px makes it to stretch the body.
Unwrapped row
Output after wrapping
Related
Code sandbox: Code sandbox
I have a column of Icon like this:
I css it with overflow-x:auto so that It can scroll the icon outside the container.
But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.
I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!
For overflow-y to work, the height of the content in the element needs to exceed the specified height.
I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.
Another solution, for now, I can suggest is to play with z-index property of the elements.
SanBox
from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow...
You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.
I have a table that has a fixed height and width.
I have mentioned height as 200px and width as 100%(inside another div of 600Px width)
now I am adding a new column at run time so the width needs to be increased so I thought to put a scroll bar.
I am doing the following to achieve this
$('.showDateTime').show();
$('.showDateTime').css("width", "300px");
$('#TransactionErrorsTableData').css("overflow-x", "scroll");
The issue is that the horizontal scroll bar comes but is disabled.
Where as the vertical scroll bar is working fine.
I have set overflow as auto for my div "TransactionErrorsTableData"
Any idea on how to enable the horizontal scroll bar?
P.S. I m kind of stuck up so please pardon if the question is not clear, please comment if any details are required.
I cannot accurately get your exact problem seeing you only posted a snippet, and didn't post any examples, but I'll give it a go.
If you use the CSS rules overflow-x: scroll or overflow-y: scroll, it forces most browsers to make the scroll-bars appear, this is by design, so that if the content enlarges, the content outside of the container will not be forced to move around.
The scroll-bar is not disabled, it is just inactive due to it not having enough content to actually be able to scroll, I am guessing this is because you have set .showDateTime's width to a specific amount, which is inside of the TransactionErrorsTableData div.
I hope this helps!
NOTE :
This answer all assumed due to not enough details given.
Try it, but would be better an jsfiddler:
$('#TransactionErrorsTableData').css("overflow-x", "auto");
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
here is the layout
http://timsegreto.com/cssmock/mock.html
i need the background image to scroll concordant with the text block in the right column.
ive tried many different ways with no success.
any ideas would greatly appreciated.
not sure if its possible or what t research to make it work.
thanks!
It seems to me that you have fixed positioning on the wrong element. Try making #framecontent position fixed and remove it from #maincontent.
EDIT It's 'quirks' mode that's causing you IE issues. Get rid of the:
<!--Force IE6 into quirks mode with this comment tag-->
from the beginning of your html. I'm sure this is supposed to be solving other cross-browser issues but it's ruining fixed positioning.
Have you adding an extra div and setting the background image on that instead of on the body? You could absolutely position this extra div in the body with top: 0 - it would scroll with the page then...
not sure if thats what you're looking for exactly...
Check out my site http://hiox.org . How to get rid of horizontal scroll bar?
Well, i did not see the horizontal scroll bar on that site. This is most likely because of resolution. Use this css style however.
scroll-x:hidden;
Buy a wider monitor (I see no horizontal scroll bars)?
Actually Sarfraz's suggestion is good, but something secondary to bear in mind is the wide range of users on your site (some using 1024x768, and still others using 1920x1200) and how to give equal usability to as many as possible.
Is it possible you could reduce the width of a few columns? "Title" and "By" look like they could be a bit smaller... then it won't force the table to be wider than neccessary, thus removing your horizontal scroll bars.
Rekha, I was having the same issues with a page I was working on.
It could be that one or more of your elements widths/margins/padding/border are too wide, creating a invisible extra space in the browser.
A fix that may work is setting the html and body padding/margin to 0 and then changing other elements margin to 0 (i.e. change a header section that spans 100% of the width of the browser, change margin to 0).
Try looking at your page with the Firefox add-on, "Firebug" (link http://getfirebug.com/downloads), to see if there is an element's padding/margin is acting unexpectedly.