I am working with ionic and am trying to fill the entire ion-content with a div. Within this div, I want to center a text horizontally & vertically.
I have achieved something, but this seems to only work within the browser, as soon as I upload the APK to my android device, it doesn't work anymore. I believe this is due to this line (please see the codepen I made) :
height: calc(100vh - 120px);
I wish I could use something else to get the full height of the container.
I would try including the -webkit prefix. Both calc() and viewport units should work in Android.
height: -webkit-calc(100vh - 120px);
height: calc(100vh - 120px);
Ok so I have found the solution, I am not sure why I did not find that during my previous searches. So I am basically using that :
myDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 10px;
text-align: center;
background-color:red;
}
http://codepen.io/bokboki2002/pen/rVyMgE
Related
I have both <body> and <html> set to fill the full height and width of the view-- and they do. The problem is, now that I have a Google maps element essentially serving as a page background, other elements are overflowing the view size and being pushed offscreen.
This is how it looks currently. I've tried adjusting the size of the <html> and <body> elements, but that's not really a fix so much as a hack, as it throws off the layout in other ways. I've also tried playing around with overflow options.
This is how it looks when you inspect it, showing the overflow, and the fact that the body is the correct size. (You have to zoom out to see the overflow.) Notice that both the right side and the bottom, above the fixed navbar, show a gap between the edge of the map element and the limits of the screen.
I'm assuming the problem is something with my map element's CSS, but I cannot for the life of me figure out what it is. Here's the map-specific CSS:
#map {
position: absolute;
top: 50px;
left: 80px;
height: calc(100vh - 50px);
width: calc(100vw - 80px);
z-index: 0;
overflow: hidden;
}
#media (max-width: 768px) {
#map {
top: 0;
left: 0;
height: calc(100vh - 55px);
width: 100vw;
}
}
And here's a link to a codepen containing the page with the issue:
https://codepen.io/redheadedmandy/pen/BVRxZE
Any suggestions for a workable fix would be really helpful!
The problem is with with the div with the classes bottom content-container, just after the #map div.
The problem is that in one hand, it has width: 100% (by .bottom rule) and in the other hand, it has
#media (max-width: 768px) {
.content-container.bottom {
margin-left: 20px;
margin-right: 20px;
}
}
which "push" the whole document so the total width will be 100% + 20px.
The solution is to reduce the size by set margin: 0 or override the width: 100%.
Here is a the first solution:
http://output.jsbin.com/meziduy/4
Let me know if something is not clear.
I have a problem reading out the correct height of a DIV with jQuery in Safari. I am using jQuery("#x").height() to read out the height of the element. In the real situation, I use the result later on in the page. It works well in Chrome, Firefox and IE, but not in Safari.
Here is some code that I have extracted from my page that demonstrates the problem:
The CSS:
#x {
position: absolute;
top: 0px;
margin-top: 80px;
right: 54%;
width: 40vw;
height: auto;
max-width: 330px;
padding: 10px 3.1vw 16px;
background: #ddd;
}
.y {
position: relative;
width: 100%;
max-width: 330px;
height: auto;
max-height: 330px;
}
.y img {
width: 100%;
height: auto;
}
(some parameters seem superfluous or strange, but I need them in my context and it doesn't change the problem if I leave them out)
HTML:
<div id="x">
<h2>Header</h2>
<div class="y">
<img src="https://placehold.it/330" alt="my image">
</div>
<p class="z"><span>Some text</span><br>Some more text...</p>
</div>
Now, with this jQuery code I am getting different results depending on the browser:
console.log(jQuery("#x").height());
I put all this into a codepen: http://codepen.io/anon/pen/MyELJV?editors=1111
If you load it in Firefox, the console output is 469. If you load it in Safari, it's 154. (addition: in both Chrome/MacOS and in IE11/Win7 the value is 466). Some small part of the difference is due to different default styles, but the main problem is that Safari doesn't take the image into account when getting the height.
If tried different things (that didn't solve the problem):
I tried innerHeight(), outerHeight() and outerHeight(true) instead of height() - no basic difference (slightly different values, but still the problem in Safari).
I added width=330 heigth=330 as attributes to the img tag, it works in the codepen, but not in my real situation (with another image). Apart from that, the whole thing is responsive, so I'd like to omit these attributes anyway.
By the way: The original images are all 330x330px (i.e. all have aspect ratio 1:1), but they are scaled down on smaller screens.
I'd be very grateful for a solution...
I changed your css so that safari doesn't change height of image.
#x {
position: absolute;
top: 0px;
margin-top: 80px;
right: 54%;
width: auto;
height: auto;
/* max-width: 330px; */
padding: 10px 43px 16px;
background: #ddd;
}
.y {
position: relative;
width: 100%;
max-width: 330px;
height: auto;
max-height: 330px;
}
.y img {
width: auto;
height: auto;
}
Also use load function to fetch exact height of #x.
$(window).load(function(){
console.log($("#x").height());
});
You can refer the changed code here.
I fought a lot with this issue. Safari have a lot of troubles getting the height of an element but I found a javascript method that return the correct height of a specific element.
Here I give you the link and the support confirmation. Actually I used that in a project where I was needing to control an animation depending of an element height.
I hope that it could help someone in my same situation.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Use the getBoundingClientRect and access to the height attribute like this:
element.getBoundingClientRect().height
Here is a fiddle to demonstrate the problem:
http://jsfiddle.net/6e1vg58L/
The javascript adds the "position:fixed" to the nav-content. Everything works how I want, the nav content stays in place while scrolling down the page. Now, if you go and put "position: fixed" under "#nav-content" in the CSS, and delete the JS, it should have the same outcome, correct?
For some reason setting the position in CSS or HTML causes the entire cell to dissapear, while setting it using Javascript or any browser inspector gives it the desired output?
$(document).on("scroll", function(){
if($(window).scrollTop() > 0)
{
$("#nav-content").css("position","fixed");
}
else
{
$("#nav-content").css("position","relative");
$("#nav-content").css("top",0);
}
});
vs
#nav-content {
position: fixed;
}
At first I thought it could be something with the listener causing it to work (but why?), but after opening it up in a live browser and adding the "position: fixed" through the inspector, it works exactly how it should. This is the problem, two out of four ways give the same, desired result, but the other two give the same, undesired result.
Although I am not 100% on the exact whys I think the reason is because by declaring it fixed has the following effect.
fixed
Do not leave space for the element. Instead, position it at a
specified position
so it means content being 100% is allowed to take the whole screen when the page is first rendered. Navigation (although not the one being fixed which is the confusing bit) is on the screen but hidden by the content at 100%. the interesting thing is if you use chrome to disable the fixed property the navigation appears and then because it is now on screen reapplying the position fixed does not hide it which is why the JS route behaves differently.
the changes to fix could defining the initial widths in % relative to each other.
#content {
position: relative;
background-color: #eee;
width: 70%;
max-width: 1300px;
min-width: 450px;
height: auto;
}
and then the same for navigation
#navigation {
width: 30%;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/vemtyyox/
another way to keep the navigation at 300px could be to use calc to define the width of the content
#content {
position: relative;
background-color: #eee;
width: calc(100% - 300px);
max-width: 1300px;
min-width: 450px;
height: auto;
}
#navigation {
width: 300px;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/9db77jvp/
Looking closer i think there is something odd about the way display:table-cell and the fixed properties are working, maybe.
There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob