On my website https://www.hcldesign.co.uk/ you can see that I have a top banner.
This banner has a button saying 'see website example' and when this is pressed it changes the slide image. Now this also causes a weird screen position glitch with my navbar and content/body section.
When you click the button you can see a gap appears on the left of the body and pushes some content to the right by a few pixels and then flicks back. The position of the navbar also does the same when the button on the slider/banner is clicked.
I have tried messing with the position code for some of the elements but can't seem to fix this.
I need to keep the page content in the same position when the button is clicked.
Its caused by this CSS rule:
.ls-overflow-hidden {
overflow: hidden;
}
This class is added to your <body> element when clicking "see website example". Change the value to i.e. overflow: auto; and the glitch should be gone.
On clicking the button of the slider .ls-overflow-hidden class is added to the body. You can fix it by the css rule
body.ls-overflow-hidden {
overflow: auto;
}
Related
I'm trying to fix an issue where when a user clicks a button it causes the entire page to shift to the left. The issue only seems to appear when the browser is maximized.
You can try it yourself here: https://professionallyspeaking.oct.ca/exemplary.aspx
Click on the "Great Teachers- Alphabetical +" button to see the shift in action.
The page is adding a vertical scroll bar when the content height exceeds that of the browser window. It is default behaviour, but if the shift seems odd to you, the only way to "fix" it is to force the scroll bar on the <body> when the content doesn't fill the page, by adding the following css:
body{
overflow-y: scroll;
}
Page was shifting due to appearance of the vertical scrollbar. Thanks to #j08691 for pointing this out. I resolved the issue by applying overflow-y: scroll to the html:
html {
overflow-y: scroll;
}
On my page https://itc-ms.de (Delphi/Intraweb/IWBootstrap using bootstrap 3.3.7) I use the css
body {
...
overflow-y: scroll;
...
}
to avoid flicker when switching between pages of different length due to the scrollbar appearing and not.
Unfortunately the scrollbar disappears if a bootstrap popup is shown (like my login dialog shown when clicking on "Anmelden").
I already tried
overflow-y: scroll !important;
but this does not work as it just applies a scrollbar to the layer above the page body when a pop up is rendered. The page scrollbar still disappears moving the page contents and creating the flicker.
Is there a css way to make the scrollbar of the page body persistent also when a popup is shown?
Thanks in advance.
I am doing a popup light box by using the code I found in this article HTML / CSS Popup div on text click.
Now I am trying to disable the main scrolling of the page, since the light box has a fixed height, but certain pages are longer then the popup which leads to scrolling the background of the popup which in this case is the page itself.
I played a bit with overflow but without success.
Try the following CSS:
html {
height: 100%;
overflow: hidden;
}
Also, if you trigger this code on a random location in the page, you might need to do extra work.
Do you have a jsfiddle or codepen?
I am working at this site http://www.digiruptiva.com/site/
If you scroll to "Serviços" section at the home page you will see a row of icons and a blue button with the text "saber mais". When you click in the button, a modal opens containing more information.
The problem is: Some links in the top menu like (Quem Somos and Serviços) arent clickable becuase the hidden modal is getting in the way.
I tried moved the modals before the close body tag but still the same problem. I found a topic here an S.0 saying that adding data-backdrop="false" to the modal element solves the problem but I want to have the backdrop.
How can I fix this?
Thank you.
Well, i think I solved it by adding .modal { display: none; } to my css ile.
So I'm trying to do a sliding door CSS menu -- basically one image that you move the background position on when it's hovered or when it's active.
However, usually when I move to the next link using:
#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }
It takes from the last link to whatever width I specify. See the MAP icon on the image below? I'm trying to link it so that the link doesn't go all the way from the SEND FEEDBACK link to the map button. I just want the link to be that square.
So any ideas?
If I understand correctly, you should make the link (the <a> element) a block element and give it a specific width and height (and maybe relative/absolute positioning, depending on how your layout is set up). That way, the hit area for the link will be confined to those dimensions.
Something like this for the markup:
...
Map
...
And something like this for the CSS:
#xmenu li.ypart a { display: block; width: 40px; height: 35px; }