I'm making this accordion: https://codepen.io/rafaelmollad/pen/JjRZbeW but the problem is that when I click on one of the accordion item, the content expands and pushes the title up. I noticed that if the accordion is not vertically centered, then I get the result that I want but I need to center it.
I've added this code to the container in order to center it but it doesn't work:
position: absolute;
top: 50%;
transform: translateY(-50%)
If I remove those lines, the form will position on the top of the page and I'll get the result that I want (without the container being in the center of the page)
Update your container class like
.container {
width: 90%;
max-width: 96rem;
margin: 0 auto;
padding: 1rem;
background: #fff;
position: absolute;
top: 50%;
/* transform: translateY(-50%); */
}
i.e remove transform property, it works exactly like you want.
Related
there. I was trying to make a hover popup. When my mouse hovers over a table header, a detail explanation will pop up.
However, when I scroll left the table, the popup stays. Is there any way that I can make it stick with the header?
Jsfiddle Link:
https://jsfiddle.net/fmchen/hmaczn87/10/
Some Screenshots:
When scroll left:
I know that I can change the position: absolute; to position: relative; in .CellComment1
However, it will be looking like this:
I added the position: relative; to the field_29 class, then position: absolute; to the span and it worked properly. If you want to be in 1 row then add the span a width: max-content; and for the center align add a margin-left: 50%; and transform: translateX(-50%);
.field_29:hover span.CellComment{ display: block; position: absolute; width: max-content; margin-left: 50%; transform: translateX(-50%); }
.field_29 { position: relative; }
I'm looking for a relatively simple and standard way of changing CSS pseudoelement property value by JS Scrollspy.
The parent element (section of a landpage) should change grayscale, while scrolled, and its child should have position:fixed.
As it turns out, it's impossible to make it in an easy way, because any filter is removing position:fixed by definition. More about this: CSS-Filter on parent breaks child positioning
Moving that background-image to a pseudoelement creates another problem: manipulation of the pseudoelement's properties by JS.
The expected result: I wanted to make a section of a landing page, having grayscale filter for background image. That's the easy part. But it should has less grayscale, while moving upward (the more picture user see, the more color it has), and centered content element shuffles up from previous section, and later hiding under next one.
So basically I need two things:
filter grayscaled background image, with dynamically changing value of a grayscale, relative to distance to the top of the window (JS scrollspy)
position:fixed central content element visible only in that section
Illustration (with background-picture in pseudoelement) is here: https://codepen.io/tdudkowski/pen/MLyMyG
HTML
<section class="one">
</section>
<section class="two">
<div><p>DIV with a position:fixed</p></div>
</section>
<section class="three"></section>
CSS
section {
position: relative;
max-width: 1000px;
height: 70vh;
background-color: #eee;
margin: 0 auto;
overflow: hidden;
}
.two {
background-color: transparent;
/* Try to uncomment rule below */
/* filter: grayscale(50%); */
}
.two div {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 10rem;
background-color: #f00;
z-index: 1;
}
.one,
.three {
z-index: 100;
}
/* background of section */
section.two::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(https://picsum.photos/1000/200);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
/* filter: grayscale(50%); */
}
I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image.
The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.
Here is the fiddle that has some fixup javascript to make it work: http://jsfiddle.net/d3y0b8bd/
The code below will work for smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)
But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
/*aesthetic*/
background-color: red;
}
.lightboxImg {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*aesthetic*/
background-color: blue;
}
html:
<div class="lightboxRoot">
<div class="lightboxImg">
<img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
</div>
</div>
here's a fiddle in which JS is updating the position of scrollTop and scrollLeft, so to set the scroll to center of img.
Figured it out, in retrospect kind of silly: Just make a containing div that can't get any larger than the parent element, and make sure that it has the overflow property set so it gets the scrollbars. then the image inside can get is big as it wants: http://jsfiddle.net/abrady0/d3y0b8bd/2/
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
/*aesthetic*/
background-color: red;
}
.lightboxContainer {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
overflow: auto;
/*aesthetic*/
background-color: blue;
}
and the html:
<div class="lightboxRoot">
<div class="lightboxContainer">
<div>
<img id="imgElt" src="foo"></img>
</div>
</div>
</div>
one thing to fix in this case is that I'd still like the div's scroll centered with pure CSS, but this is a good first step.
I have 4 'tabs' at the top of my page, which, when clicked, slide down to reveal a hidden div using the jQuery slide down function. The problem is that I don't want the 4 static 'tabs' to be affected by this. I want them to remain in the same position. I can't seem to find a away to stop them moving down when the hidden div is revealed.
Here is a JSFiddle of my code: https://jsfiddle.net/k6nzyrhm/
And here is the CSS for the static tabs:
.static {
width: 160px;
height: 120px;
float: left;
text-align: center;
margin: 250px 35px 0 35px;
}
Please does somebody know a way to stop the 4 static 'tabs' at the bottom from moving down when the hidden div is revealed. Thanks.
Use position: absolute on .content. Absolutely positioned elements won't push the rest of the content down.
.content {
height: 0px;
width: 880px;
margin-left: 20px;
overflow: hidden;
background-color: #e62d67;
/* properties added */
position: absolute;
top: 240px;
}
See Example.