I am facing a case like this, a popup which is hidden using "visibility : hidden" still holds a space in the screen, while I have no control over the coordinates of this element as it's auto calculated by Primefaces control
JSFiddle example
here's a simulation for my case
<div class="main"></div>
<div class="dialog"></div>
<style>
.main{
background-color: red;
width: 100%;
height: 100%;
}
.dialog{
position: absolute;
top: 800px;
left: 0px;
width: 200px;
height: 200px;
visibility: hidden;
}
</style>
hope you can help, thank you
use jquery to remove the particular element from the screen
$( ".dialog" ).remove();
Related
I am attempting to make a coloured "blob" with a parallax scroll in the background. This is my current CSS, and the blob (an empty with class name "blob"), remains fixed as you scroll down the page:
.blob1 {
background: #FFFAD1;
border-radius:40%;
transform: rotate(-130deg);
width:40%;
top:10%;
right: -20%;
position: fixed;
height: 20em;
overflow: scroll;
}
I have no idea where that little box/border at the end is coming from though. Has anyone seen something like this before?
Bonus round: I have got the scrolling with the page (position: fixed), but what I really want is for it to slowly move upwards as I scroll down. How might I achieve something like that?
Code
.blob1 {
background: #FFFAD1;
border-radius: 40%;
transform: rotate(-130deg);
width: 40%;
top: 40%;
right: -20%;
position: fixed;
height: 20em;
overflow: scroll;
}
<div class="blob1"></div>
If you change overflow: scroll; to overflow: auto; or : hidden or remove it completly. then the border will disappear.
To get rid of the scrollbars, you need to hide the overflow with overflow: hidden;.
When you use position:fixed; the element stays fixed without consuming space.
So I added 2 other divs. The first is bringing some space between the two, the second is a background that gets over blob1. To do that, you need to play with z-index. You need to position:relative; the other div and since blob has the default z-index you can assign at the background div a z-index: 1;.
.blob1 {
background: #FFFAD1;
border-radius: 40%;
transform: rotate(-130deg);
width: 20%;
top: 20%;
right: 50%;
position: fixed;
height: 10em;
overflow: hidden;
}
.spacer {
min-height: 300px;
}
.get-over-blob {
min-height: 600px;
background: darkorange;
position: relative;
z-index: 1;
}
<div class="blob1"></div>
<div class="spacer"></div>
<div class="get-over-blob"></div>
I formatted blob1 values for a better representation, be sure to change them back to yours.
I have looked at the already asked questions and tried multiple solutions but nothing seems to be working for me. I have a div, with multiple div's inside of it, and I cannot get it to center in the middle of the page on resize
This is the parent div which contains multiple others
<div id="showme" class="newmodal" style="position: absolute; z-index: 1000;
max-width: 561px; left: 700px; top: 263px; display: none;">
This is the css for the div
.newmodal {
position: fixed;
margin: 0 auto;
max-width: 900px; /* our page width */
min-width: 500px;
width: 50%;
}
Sorry if I am being really stupid, very new to this. I have tried removing the left and top inline styles but nothing is working.
EDIT
I forgot to mention that this div is being hidden and unhidden using a button so I am not sure if that changes any of the current answers.
.newmodal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
max-width: 900px;
/* our page width */
min-width: 500px;
background: #222;
}
<div id="showme" class="newmodal">Some content</div>
It will center div vertically and horizontally.
You need to close your div tag. Why use width,max-width,min-width? Try the following code:
.newmodal {
background: red;
max-width: 200px;
margin: 0 auto;
height: 50px;
}
<div id="showme" class="newmodal"></div>
Try this:
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.newmodal {
border: 1px solid black;
display: block;
margin: 1.5em auto;
text-align:center;
padding:7px;
width: 50%;
background:#222;
color:#fff;
}
<div id="container">
<div class="newmodal">Some content here</div>
</div>
I created this CodePen that you can use to look at. Try using something like this:
.newmodal {
position: relative;
margin: 0 auto;
max-width: 900px;
min-width: 500px;
background-color: red;
}
Remove all of your styling from your HTML because you had some contradicting styles going on between the CSS and HTML you provided.
<div id="showme" class="newmodal">
<!--Some added data-->
</div>
Remember also that in order for margin: 0 auto; to work, the element must be block style, it can't float, it can't be fixed or absolute, and a width that is not auto. Found this information from this post: What, exactly, is needed for "margin: 0 auto;" to work?
Edit:
So if you are using jQuery and you want to make it appear and disappear, you can do something like this:
$(".newmodal div").on("click", function() {
if ($(this).css('display') == 'block') {
$(this).hide();
}
else {
$(this).show();
}
});
The only problem with this is making the element reappear. But I'm not sure what your entire project looks like but I hope this points you in the right direction.
1st the css part of "margin: 0 auto" and "width 50%" should be for the child div and not the parent.
2nd you can make your life much easier my moving to flexbox which does all that automatically.
See https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Ok, i thought of starting afresh following some confusions in my previous similiar post. Here, I am trying to know the exact "reason" as to why exactly my outer container div ("container" , pink) is not automatically expanding vertically to fit the content div ("content" , red) (which automatically expands vertically with length of text). I am looking a reason more than the solution, because the reason will help me understand the concept more deeply. Please copy dummy text loremipsum... several times in the "content" div so that it overflows from page
Screenshot
here is the code:
html, body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}
.container {
width: 600px;
left: 0px;
position: relative;
right: 0px;
background-color: rgba(216,86,112,0.5);
margin: auto;
height: 100%;
}
.content {
height: auto;
width: 200px;
background-color: rgba(255,0,0,1);
position: absolute;
top: 0px;
bottom: auto;
left: 0px;
right: 0px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
/* Paste dummy text here more than a page */
</div>
</div>
</body>
</html>
The problem is the following:
Instead of using
.container {
height: 100%;
}
try:
.container {
height: auto;
}
and instead of
.content {
position: absolute;
}
use
.content {
position: relative;
}
Here's why
When an element is set to be 'position: absolute' it wont collapse with any other element, that's why your container doesn't expand at all.
When an element is set to be 'Height:100%' it takes the height of its container, in your case the cointainer is the body which means it will take 100% percent of your screen (in your case), but your content is way higher than the screen and that's why it overflows your content.
Hope you understand....
I have some trouble with focusing elments which are in div with absolute position.
Problem is with absolute div which have large size and it is out of window bounds. When I focus this absolute div, than chrome automaticaly scrolls widow body, but I want to prevent scrolling
I know there is javascript solutions like "document.body.scrollTop = 0;", but I want to find is there css solution for it?
HTML Codde:
<div class="container">
<input type="button" value="make focus" onclick="document.getElementById('innerContainer').focus();" />
<div tabindex="0" id="innerContainer" /></div>
</div>
Css code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow:hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
height: 200px;
overflow: hidden
}
#innerContainer{
background-color: green;
width: 100%;
height: 4000px;
position: absolute;
top: 100px;
}
#innerContainer:focus{
background-color: red;
}
Link to js fiddle - https://jsfiddle.net/3tLbqj5z/2/
I'm trying to reveal a page from a specific point in this case the (div:content) further down the page.
Desired effect will have the red block at the top, however scrolling down will reveal the blue block above
UPDATED: http://jsfiddle.net/cr8uj/1/
HTML
<div class="block">
block
</div>
<div class="content">
content
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
You are looking for: scrollTop
http://api.jquery.com/scrollTop/
Set the current vertical position of the scroll bar for each of the
set of matched elements.
Example:
$('body').scrollTo('#YourDiv');
There is a question related to this: jQuery scroll to element
A good library: http://mmenu.frebsite.nl/examples/responsive/index.html
Other options:
What you need is the JavaScript window.scrollTo method
window.scrollTo(xpos,ypos)
Insert the div position in there.
Or use the JQuery method ScrollTo, see an example here
$(...).scrollTo( 'div:eq(YourDiv)', 800 );