I'm using Angular4 and I wrote a simple a menu that opens horizontally. For unknown reason when "playing" a little with the menu on different zoom ratios, I noticed some black vertical lines that remains after closing the menu. if I change to another window or change the zoom ratio again, the lines disappear, but I don't understand why they are there from the first place.
NOTE:
The behavior is not consistent. Sometimes there are lines, sometimes not. If there are lines they appear on different places. On 100% scale there is no problems at all.
.menu-container {
background-color: #5a5a5a;
bottom: 23.81rem;
left: 1.625rem;
position: relative;
transition: 0.5s;
}
.menu-content-hide {
height: 0;
width: 0;
}
.menu-content-show {
height: 0;
width: 36.06rem;
}
html
<div class="menu-container"
[ngClass]="{'menu-content-show': selectedItem, 'menu-content-hide': !selectedItem}">
<app-menu-content (_onClose)="handleMenuClicked(null)" [_selectedItem]="selectedItem"></app-menu-content>
</div>
Related
I have a contentWrapper class which contains all of the elements on my page. For some reason, the navigation takes up what appears to be 100% of the body and then some. I cannot however get the following elements, the slider and divs below, to stretch to fill the same width. There is always extra room to scroll to the right which displays the background color. I have made it pink in the fiddle its easy to see.
body {
background-color: black;
}
.contentWrapper {
height: 100vh;
width: 100%;
background-color: black;
}
http://jsfiddle.net/o5y26tqw/
Any suggestions? I feel like it could be an easy fix, deleting sections of the page at a time did not seem to remedy the issue.
So it looks like your .cycle-overlay is 100% wide and left is set to 20px. This is pushing everything over and revealing the background. Setting the width to 300px got rid of it for me.
JSFiddle
.cycle-overlay {
position: relative;
top: -200px;
left: 20px;
z-index: 999;
width:200px;
}
I'm currently having a problem with a page I'm working on. I have a nice grid with different content blocks on them.
When I click on a block I open a modal, and the grid zooms out. I'm adding this class to my grid to zoom-out:
#container.overlay-open {
transform: translate3d(0,0,-1500px);
}
The css of the container itself:
#container {
.transition(0.7s all);
transform-style: preserve-3d;
position: absolute;
left: 0px;
right: 0px;
top: 100px;
bottom: 100px;
}
This works perfectly for the first row. However when I scroll down a bit and click on an other block the grid-container keeps zooming out, but the container is moved a bit to the top of the screen, it's not centered anymore (picture 3).
How can I keep the content centered after zooming (picture 2)?
Instead of using "translate3d", you could use "scale". I believe that should achieve your desired effect.
#container.overlay-open {
transform: scale(0.5);
}
The title says it all. I have an image with height: 100% inside each of a couple display: inline-block <li> elements. When their container is position: static. All is peachy. But when I change it to position: absolute/fixed, the <li> elements get width of the original image, not the scaled down width even though the image itself has correct dimensions.
This behaves as expected in Chrome, but breaks in Firefox.
Did anyone encounter this behaviour? More importantly, is it possible to fix it without JS?
Background: I am making a responsive position: fixed gallery that fits the screen with image thumbnails covering bottom 20% of the viewport.
Isolated Demo (click the button to toggle position: static/fixed ):
http://jsfiddle.net/TomasReichmann/c93Xk/
Whole gallery
http://jsfiddle.net/TomasReichmann/c93Xk/2/
I finally got it working. It seems that when you declare something with
Position:fixed, left: 0; top: 0; right: 0; bottom: 0;
Only chrome recognizes that as "explicitly defined dimensions". Once I added height: 100%; Other browsers caught up. Fortunately the height 100% didn't break the layout even when the content underneath overflowed viewport.
http://jsfiddle.net/c93Xk/3/
It still breaks uniformily across all browsers when you try to resize the window. I guess, I'll have to calculate the widths by hand with JS
DEMO
Check the demo, is that what you are looking for?
I have added these 2 lines of css to make it work like that:
/* Keep Position fixed at bottom */
#gallery:not(.toggle) { width: 100%; bottom: 0; top: auto; height: 20%; background: transparent; }
#gallery:not(.toggle) .gallery-thumbs{ height: 100%; }
I am developing a website and the problem is that when I resize the browser (horizontaly), my HOME link from the menu gets broken. It's harder to explain in words what happens, so check it out here: http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html.
The grey background is an image, having the up-right corner cut. After I cut that area, I made the area transparent. So, it is a trapezoid on transparent background.
My question is: what to do to prevent the trapezoid transforming into a rectangle when resizing?
If you want something like that.
Where the diamond is in between the two tabs then you should give particular width to your li elements(All).not use percentages for that. Like this
.menu > li#home {
display: inline;
float: left;
background: none;
background-image: url(../img/home.png);
width: 273px; /* same as your image size */
}
and also to both of your header images
img#logo {
position: absolute;
top: 10px; /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}
Instead of using an image, create the shape you want right in the file. Try this link:
Using the Area Shape Attribute
I have a modal div on my page, which grays out the background. If I set the height of overlay div to 100%, it works fine on IE (desktop), but on iPad Safari, the complete height is not grayed out. What exactly is the issue? Is it to do with fixed position/viewport? Please help. Below is the CSS for the same;
#TB_overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.TB_overlayBG {
background-color: #000000;
opacity: 0.4;
}
Hi the easiest way and that's how I do it is to give maximum height width to the overlay. Like:
.overlay{
position: fixed;
display: none;
top: 0;
left: 0;
z-index: 99;
width: 10000px;
height: 10000px;
opacity: 0.5;
background: #ccc;
}
You can put this at the bottom i.e. before body tag and change its display to block whenever you want to gray out the background. Obviously whatever you want to show on top of it must have a greater z-index. Hope this helps. Let me know if you don't understand.
The device height and width need to be set, you can use iPad specific styles to achieve this, so that it doesn't break your other browsers.
Reference: http://css-tricks.com/snippets/css/ipad-specific-css/
Without seeing the it, its hard to say exactly what the problem is but try using the above css to apply specific css to iPad Safari.
Your issues:
Most mobile browsers ignore position:fixed
Window sizes and viewport sizes are handled differently, so the position:absolute;... trick doesn't work also -- you have to dynamically size your div in script by reading the size of the viewport, or make it large enough to cover all potential page sizes