I am creating the following side menu with animation: click
We can see an unwanted horizontal scrollbar, which should not be according to developer.mozilla.org,
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout.
In the example above, the list of menu appears when you click on the checkbox and it has the class .m-list. .m-list has absolute positioning and relative positioning is set for its nearest parent(.m-block). I'm going to copy and paste these two classes
.m-block {
width: 100%;
background: gray;
padding: 0;
display: flex;
flex-direction: row-reverse;
position: relative;
}
.m-list {
position: absolute;
top: 100%;
background: silver;
right: 0;
width: auto;
list-style-type: none;
transform: translateX(0%);
transition: transform 0.25s ease-out;
}
Q1: Why does the horizontal scrollbar appear?
Q2: What is the most correct solution to prevent the appearance of a horizontal scrollbar?
I know 4 ways to solve this problem, but due to various reasons I do not want to use them:
If I change the absolute position to a fixed one, it does not generate a horizontal scrollbar, but the rule line with top: 100%; takes on a different meaning. In the original case, top: 100%; provides an offset from the blue stripe along its height.
Using JS is not available in this project
Using overflow-x: hidden on the top level of document will disable the scrollbar, which may be needed for content.
Moving the menu from the right side to the left will not result in a horizontal bar, however, this is an undesirable solution.
.m-list {
...
left: 0;
transform: translateX(0%);
}
#m-toggle:checked ~ .m-list {
...
transform: translateX(-100%);
}
I tried applying overflow-x: hidden; to <body>. and I was able to scroll down and hide the menu
Related
I revamped the UI of my page, such that there's an image and a floating div on the centre of the image.
The div has the button that opens the modal (Bootstrap 3.3.7).
When I click the button everything appears greyed out, and the modal opens but inside the div and can neither be seen full or closed.
Here are screenshots of the same ( can't include full page because of privacy and security issues)
Here is the CSS for the div:
.card {
/* For Shadow Effect*/
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.9);
transition: 0.3s;
/* Diemensions */
padding: 5px;
width: 400px;
height: 159px;
text-align: center;
border-radius: 1rem;
/*making it stick to the centre*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* randome stuff*/
background: #CFD8DC;
margin: auto;
}
You have to set the z-index property of your .card class to a value greater than the overlapping black translucent element.
To do a deeper analysis, open the web inspector to dig into your HTML structure and find the overlapping element I mentioned above. Then, in style properties (should be on the right), find the z-index property. If you cannot find it, check through its parent elements. If you cannot still find it, you should be able to set an arbitrary value, greater than zero, which should make your page look as you want.
Keep in mind that z-index works only if position attribute is set to absolute or relative or fixed.
I'm placing a fixed position modal inside a relatively positioned element with no transforms and with overflow: auto.
The problem is that when there is overflow on the parent, the modal's backdrop does not cover the scrollbars - please look at the picture attached for an example.
The scrollbar should also be covered by the semi-transparent black backdrop, but for some reason it is not. Does anyone know why, and/or how I may go about fixing this?
I want to avoid using absolute positioning for the modal container because it can be a nested element in any arbitrary hierarchy.
Here is my css for the .modal-container class which includes the backdrop.
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}
I'm trying to achieve the following in IE9, IE10, and IE11 (works perfectly on Chrome and FF):
In mobile mode, I have a main #container wrapper that holds the entire site contents and a nav side menu div which is inside the #container (cannot be moved out, btw), yet is not visible and is hidden off-screen. When a user clicks a menu open toggle button, it should slide the #container to the right, revealing the nav side menu div directly positioned to its left. The "sliding" is happening using translateX, which gets assigned as soon as the "open" class gets applied to it via the toggle. In the IEs, I'm getting the animation part as expected, but without a visible side nav (empty space only).
#container {
height: 100%;
position: relative;
transition: transform ease .5s;
width: 100%;
}
#container.open {
position: fixed;
transform: translateX(300px);
}
#nav-side-menu {
left: -300px;
height: 100%;
overflow: scroll;
position: fixed;
top: 0;
width: 300px;
}
The problem here is with the use of position: fixed inside a transformed element. Per the specification, when using fixed-positioned elements ...the containing block is established by the viewport. There is a debate as to whether transformed elements should be the containing block of fixed descendants, but Internet Explorer doesn't presently support this.
In this particular instance you could avoid the cross-browser complications by avoiding CSS Transforms altogether. Instead, try moving the containing element laterally using the left property. Below is my markup — which I believe to be a reasonable reflection of yours:
<article>
<nav>
<p>This is the navigation portion.</p>
</nav>
<section>
<p>This is the content portion.</p>
</section>
</article>
As described above, the following approach makes key use of a relatively positioned container, moved side-to-side by transitioning (supported since IE10) the left property. We're also using the calc function (supported since IE9) to determine better dimensions and offsets:
body {
margin: 0;
overflow-x: hidden;
}
article {
left: -300px;
position: relative;
transition: left 2s;
box-sizing: border-box;
width: calc(100% + 300px);
padding: 0 1em 0 calc(300px + 1em);
}
article.open {
left: 0px;
}
nav {
position: fixed;
width: 300px; height: 100%;
margin: -1em auto auto calc(-300px - 1em);
}
This approach yields a more consistent experience across both Internet Explorer, Chrome, and Firefox. The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/vxntq8b1/
I am building a website and ran into another problem with my code.
I have tooltips for a huge number of images so that when you hover over them you see information in the tooltip ( which is also an image)
My Problem is that when I hover the first few images they display the tooltip different then the rest of them.
My code looks like this:
.playertooltipimg{
width: 400px;
height: auto;
}
.playertooltipimg {
z-index: 100000;
}
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
left:-80.15em;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
left:-51.15em;
top: -0.2em;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
I think it's hard to understand what I mean which is why i created this jfiddle:
BUT you have to adjust the size of the window so that the 2 white boxes can be next to each other (in a row)
http://jsfiddle.net/ZkQLV/
I know it's a lot of code, I can't figure out why it is doing this, since every other images except the first few display the tooltip correctly
Your problem is caused by the use of inline and relative styles for the a (which is the container of the preview item). inline style makes the absolute positioning of the inner span a little strange, you can see that all the items on the second row seem to work OK, it happens only to the items on the first row (except the last item). However if you set display:inline-block for the a elements, you'll see that hovering on all the items won't work now, the popped-up tooltip has always the same offset (on the left side) from the a element (which you hover on). That's because you set position:relative for the a elements. So all the offsets (left and top) of the spans (which you set to some fixed values relative to font-size with em unit) will be compared against the hovered a element's position. To fix this issue, you have to choose the same element for all the items against which the offsets are set. The most suitable item is exactly the div #playersbig which contains all the items. To choose that div as the containing block of the inner span elements (in each item), you have to set its position to relative (which you've already done) but you have to remove the position:relative applied on the a elements.
Another note is that you should use right property to position your tooltip (span element), in the hidden state the right is about 200% (because your 2 divs #championsbig and #playersbig have the same width) while in the shown state, the right should be about 100%. The exact values of right depend on the padding/space width between your 2 divs #championsbig and #playersbig, looks like it's about 4px in your case). You can also use calc function to set the exact value but it's not supported by some old versions of browsers (especially the so-called IE), so I just use 201% and 101% respectively in the demo (because the width is 400px). If the width is fixed at 400px, you can also calculate the exact values for right yourself such as 804px and 404px instead of 201% and 101%.
CSS:
a.tooltips {
/* use this to have the expected absolute positioning
instead of the unexpected behavior when using inline style */
display: inline-block;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
top:0;
/* use right instead of left, this will hide the tooltip initially */
right:201%;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
/* this will show the tooltip on hovering */
right:101%;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
Demo.
When the image grows in hover to 350px it pushes everything around.
This code is working except that when I hover and the picture grows it pushes the menu or what ever is around downwards.
How can I stop this?
#displaycar img
{
height: 200px;
}
#displaycar img:hover
{
height: 350px;
}
BTW I'm using twitter bootstrap and I have tried position: absolute;.
Is there any way to still increase size when hover but don't push nothing don't move nothing.
Set the height of #displaycar (the presumed parent div) to 200px and add overflow: visible;
#displaycar {
height: 200px;
overflow: visible;
}
I would use z-index on the elements. keep the values equal on the initial layout, but make it a stronger (bring to front) value when hovering
#displaycar img:hover
{
z-index:[stronger value];
height: 350px;
position :[relative, absolute, fixed];
}
note: to use z-index, you have to use one of the position values
Z-index gives priority to overlapping elements (bring to front / bring to back)
here is a bit more info on the subject
It's possible, but to avoid affecting surrounding content the element itself has to be removed from the flow of the document; this is easiest to achieve using position: absolute, though unfortunately this requires using a wrapping element, with position: relative (or any other non-static position value). The wrapping element has to have a width and height defined, which could be done automatically (with JavaScript, or PHP (amongst many other options)).
For example, the HTML:
<span>
<img src="http://placekitten.com/400/400/" />
</span>
<p><!-- generic dummy content, excised for brevity --></p>
And the CSS:
span {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
}
span img {
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
/* Vendor-prefixes removed, for brevity */
transition: all 1s linear;
}
span:hover img {
width: 400px;
height: 400px;
/* Vendor-prefixes removed, for brevity */
transition: all 1s linear;
}
JS Fiddle demo.