Weird body padding on mobile layout - javascript

If you go to https://www.biznessapps.com on mobile layout, inspect element in Google Chrome and disable overflow-x: hidden from body and resize again, then you will find the white vertical stripe (padding) in the right side.
I had to add overflow-x:hidden to body to hide this, but not sure what causes this. Is there any other way than using overflow-x:hidden ?

So what you are doing with the overflow-x solution is a viable solution, but if you'd like to learn how to debug ghost elements, read below:
Basically, I debugged your site and saw that some of your sections (mainly ones in columns of 2 or 3, that float) extend past the wrapper's width. You can see this as well by inputting this into your CSS
*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Scroll down and look for sections that extend past the main div, such as this:
Most of these are the results of a little extra margin or padding on the floated section.
Like I said, the width:100%; and overflow-x:hidden; is still a very common solution, this is just how to debug it if you'd like to fix the structure.
Hope this helps!

It's a scroll bar. Since the default behaviour for overflow is to add the scroll bar,
overflow-x: visible;
might be the correct way to go.

Scrollbar some times visible and shows like extra padding or margin in body hiding overflow-x will work.
html, body {
width: 100vw;
overflow-x: hidden;
}

Related

How to set max height for Bootstrap accordion

I used this template to create an accordion in Bootstrap.
I will probably have a lot more elements and can't figure out how to set the max height for the menu before the contents of the sublinks div become scrollable, since I have a limited window.
JSFiddle
I already tried applying max height to both #menu and the .list-group.panel
Here's an example of how to get your scrolling working with the code you've provided.
div.sublinks.collapse {
max-height: 200px;
overflow-y: scroll;
}
http://jsfiddle.net/bjpLL5xn/3/
The issue you'll run into is that when expanded the Javascript is going to make the animation "jump".
One item is 38px so you can set a max-height to the .sublinks div to the amount of divs you want to be shown so if you want two make it 76px or you want 3 make it 114px so on so on. Also i added overflow: overlay; so you won't see the items outside the accordion bit it still adds a scrollbar.
Jsfiddle
.panel-group .panel+.panel {
margin-top: 3px !important;
max-height: 90% !important; //90% height of your parent div and if it crosses y-axis scroller will be shown
overflow-y: auto !important;
}
Always use % and not px... you will have resolution issues later.

Centering Two Dynamic-Width Divs On The Same Line and

Okay I apologize if this is a repeat - but I couldn't find any working answers anywhere.
I want to have two divs (50% width each) side by side... so a left and a right - inside of a content div (see photo below).
I want them to have min-widths at 300px and once the page gets smaller than 600px (which is when both divs will reach their mins) I want to divs to wrap.. so one on top the other.
I've tried to do that here: fiddle but am having problems.
Here is EXACTLY what I want:
You're making things hard for yourself! This can be done quickly and easily with inline-blocks. Have a nice JSfiddle.
Lets explain the code:
.wrapper
{
text-align: center; /* specifies that the inline-blocks (which are treated
like text here) will be centered. */
font-size: 0; /* Explained later */
max-width: 1000px; /* Your desired max-width */
position: relative; /* These two lines center your wrapper in the page. */
margin: 0 auto;
}
Now for the inside 50% elements:
.left, .right{
display: inline-block; /* This will treat these divs like a text element.
This will work with the parent's "text-align: center" to center the element. */
min-width: 300px;
width: 50%;
font-size: 16px; /* Explained below */
vertical-align: text-top; /* Explained below */
}
You might be wondering why font-size is included. It is because with this method comes a little quirk - if a font size is kept at default, the div's will have an annoying gap between them that can not be eliminated with margin.
However, adding font-size: 0; to the parent element eliminates this gap. It's weird, and you then have to specify the font-size for your children elements, but it's well worth it for the ease of use.
But there's still a problem - the blue element is pushed down, and isn't flush on the top. This can be remedied with vertical-align: text-top; This will make sure all Div elements are aligned by the tops, so they lay in a more pleasant pattern. This is just another little quirk to remember when using inline-blocks. I know it seems like a lot of things to fix just for something this simple, but compared to your other options using inline-block is the cleanest and easiest way of going about this. (Though if you prefer, jshanley offers a very good alternative using float elements)
Also, because these children are now treated like text, they will automatically reposition themselves when the window gets too small! No media-queries needed. Yay.
Good luck.
Instead of using inline-block which causes some sizing quirks, you can use block elements, and float both .left and .right to the left, giving each a width of 50%.
Then to make them stack you need to do a little calculating. Since you specified that the wrapper is 80% of the page width, and the break point for the content is at 600px (each element 300px) the page's breakpoint would be at 750px since 80% of 750 is 600.
You can make a media query that will only apply styles when the page width is less than 750px and set .left and .right to width 100% to make them stack.
#media only screen and (max-width: 750px) {
.left, .right {
width: 100%;
}
}
It's very simple to implement, and gives a good result, here's the fiddle.
I think both #jshanley and #emn178's answers do the trick, but I want to point something out:
The display: inline-block; css property doesn't work with float: right nor float: left, since when you use the float property, it ALWAYS automatically set the display property to block.
Since you're doing this:
.right{
min-width:100px;
background-color:purple;
height:100%;
margin-left:50%;
display:inline-block;
}
The display: inline-block; property is doing nothing.
left and right could have same layout, so I add a class block.
To use float:left and width:50%, it should work.
http://jsfiddle.net/emn178/mzbku/7/
I add media query, it should be what you want.
But you need to calculate how to set the size.

Removing IE's scrollbar

First of all, I don't want to just remove it, I want to ensure that there is still scrolling capabilities there also.
This is because I would like to have a 'slide show' affect on the website, where you can click 'next' and before, however with the scroll bar there, you can just go through it.
I have hidden the scrollbar in other browsers using:
::-webkit-scrollbar {
display: none;
}
for webkit browsers and overflow: -moz-scrollbars-none; for Firefox. However, when it comes to IE, I can't find anything to simply hide it.
I found these on the internet:
scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:;
I thought by changing the colour to transparent, it would disappear, but it did not (just reverts back to normal).
Is there a way I can simply hide the scrollbar (simply like display:none or something else), in IE? I am open to css and js options.
jsFiddle of problem
NOTE: Adding overflow:hidden; stops the page from going past the second div when clicking the a tag.
See here for fiddle using your current code
Try this trick
body, div, html{
height:100%;
width:100%;
padding:0;
margin:0;
}
body{
overflow:hidden;
position:fixed;
}
div{
overflow-y:scroll;
position:relative;
right:-20px;
}
It offsets a scrollable div so its vertical scrollbar is outside the viewable area.
I have similar problem, I don't need scroll bars on main page, but i have to have inside of my page content like in div's and span's.
So I found solution like this:
body {
-ms-overflow-style: none;
}
div, span {
-ms-overflow-style: auto;
}

Is it possible to change default overflow:hidden border?

When I use overflow:hidden on a container div with an image slider inside, it hides the overflowing content perfectly, but creates a white border of about 50px wide on the right side.
I want the images to extend all the way to the edge of the page, or as close as possible.
Is it possible to make the 'border' that overflow:hidden creates transparent, or make it narrower?
Hmm.. Animuson is right. Overflow: hidden; doesn't add any border. If the images is a link, then it might have borders (but the default color isn't white).
But yeah, please add some source code for it. Without knowing the complete scenario, then something like this could possibly help you out:
HTML:
<div id="section1">
<img alt="foobar" src="the_URL" />
</div>
CSS:
#section1 {overflow: hidden; width: 100px; display: block; }
#section1 img {width: 100px; border: none; outline: none; display: block;}
not tested...
Let me know if it helps or not. If it doens't, then please elaborate.
It turns out that the way to fix this problem was to:
Set the outer container to width:100%,
Set the inner container to 60px more than total page width, and overflow:hidden
This reduced the 'border' (right margin whitespace) to any px width I set, as per the width of the inner container.
Code: http://www.benphilippi.com

Disable the body scroll, but keep it on individual div elements which are greater in height than the browser

I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.
I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:
#scrollable {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}​
See an example: http://jsfiddle.net/rustyjeans/rgzBE/
Have you tried with
overflow-x:hidden;
turns out its quite simple.
CSS
body{
overflow:hidden;
}
#div_you_need_scrolling{
overflow:auto;
}

Categories

Resources