My site is http://www.dermatek.com/
All of a sudden there is a horizontal scroll bar on firefox, I don't see it on IE or Chrome though.
Can someone tell me how I can fix this? I was editing some sizes but not sure how it could have happened.
Thank you
Here is a link to a screenshot of what i looks like on my Firefox: http://i.stack.imgur.com/1X5Sy.jpg
I suppose it has something to do with your javascript:
Firebug shows:
<ul id="nav" style="width: 1037px;">
When I disable JS all seems fine.
Inspected the element on your site.
Seems that you footer has some fixed width element.
.footer-linklists {
width: 300px;
float: left;
}
<div style="float: left; width: 473px;">
It is not good practice to use inline css. And fixed width might cause the overflow.
You can try to use percentage instead of the fixed width. Also take the padding width into consideration.
Also try to use overflow: hidden might solve the issue. But it might cause some part of content being hidden.
Hope this can give you some threads to solve the problem.
Related
I have code like this:
<v-text-field label="Outlined" outlined />
After I focus this input text is going top left corner of input as expected but it's actually hovering the line:
What might be the reason?
I was trying to debug it and I find this very weird to me. Basically the label element has binded style left: 0 and position absolute ofcourse, then the outer dic which is .v-text-field-slot has position relative but the label is not actually starting at 0px from the left
It doesn't have any padding or something either:
So basically I have no clue why it doesn't stick to left side of the outer relative positioned div.
Actually thanks to Firefox I found out where the issue lays:
Because of the transform scale to 0.75 it's not at the very left of outer div. I'm now trying to find out the fix and I'm wondering why Vuetify didn't handle that.
I acutally found solution by modifing .v-label--active class:
.v-label--active {
transform: translateY(-28px) scale(1) !important;
font-size: 12px !important;
padding-right: 8px;
background-color: white;
}
but it's more like hack than real solution. Also if I will have this on some other background then white, it will look bad. So basically I'm still looking for solution but for now I'll move on with above css.
Edit: The real solution was that I was missing <v-app></v-app> wraping my entire app.
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I have a box-shadow on my #primaryNav div. Unfortunately, the shadow is being covered/hidden by the background of the following #page element.
I tried to set a z-index of 100 to #primaryNav and a z-index of -100 to #page, but that does not fix my problem.
Any ideas what I'm doing wrong?
You need to define positioning for #primaryNav. Z-index only affects positioned elements.
I just added this in firebug and it fixed:
#primaryNav {
position: relative;
}
I would avoid using a negative z-index. Simply change z-index of #page to 0.
As jlego already said a relative position should fix it.
By the way I would suggest ensuring that there is no shadow left or right of the #primaryNav. Since #primaryNav has a width of 100% a shadow on the side makes a horizontal scrollbar appear.
For fixing this you could set a overflow:hidden to #iframe
I took a look at your site and I think the border-bottom property of #primaryNav is covering up your shadow.
I have a website that is perfectely centered aligned. The CSS code works fine. The problem doesn't really have to do with CSS. I have headers for each page that perfectely match eachother.
However, when the content gets larger, Opera and FireFox show a scrollbar at the left so you can scroll to the content not on the screen. This makes my site jump a few pixels to the left. Thus the headers are not perfectely aligned anymore.
IE always has a scrollbar, so the site never jumps around in IE.
Does anyone know a JavaScript/CSS/HTML solution for this problem?
I use
html { overflow-y: scroll; }
To standardize the scrollbar behavior in IE and FF
FWIW: I use
html { height: 101%; }
to force scrollbars to always appear in Firefox.
Are you aligning with percentage widths or fixed widths? I'm also guessing you're applying a background to the body - I've had this problem myself.
It'll be much easier to help you if you upload the page so we can see the source code however.
#middle
{
position: relative;
margin: 0px auto 0px auto;
width: 1000px;
max-width: 1000px;
}
is my centered DIV
Well you don't need the position: relative; - it should work fine without it.
I take it that div has to be 1000px wide? It would still be a lot easier to answer this with the actual website.