Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I need to create a row, where three divs are positioned side by side:
In the divs, the middle one is always vertical aligned middle and the other ones are vertical aligned top.
I did this with the settings
Container:
display:table
Row:
display:table-row
Cell:
display:table-cell with float:none
This works fine, but now the requirement is, that only the last div should become vertical bottom aligned. (see attachment 2):
Anyways, I couldn't manage it, since display table cell and vertical-align:top on the left and right div doesn't allow me to vertical align bottom.
I also tried to use position absolute on the last div, but I can't know if the variable height of the div is bigger in the left or in the right div
thanks for your help!
flexbox can do that quite easily
* {
box-sizing: border-box;
}
.wrap {
width: 80%;
margin: 5vh auto;
border: 1px solid grey;
display: flex;
}
.col {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
padding: 1em;
margin: 1em;
}
.left,
.right {
flex: 2;
/* just a number...means they are twice as wide as the middle */
}
.middle {
justify-content: center;
}
header {
flex: 0 0 25px;
background: red;
margin-bottom: 1em;
}
nav {
flex: 0 0 35px;
background: blue;
margin-bottom: 1em;
}
.content {
flex: 0 0 auto;
background: orange;
margin-bottom: 1em;
}
footer {
height: 50px;
background: green;
width: 50px;
align-self: flex-end;
width: 100%;
margin-top: auto;
}
<div class="wrap">
<div class="col left">
<header></header>
<nav></nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate cum magnam maiores unde consequuntur, similique deserunt delectus omnis expedita in, laborum praesentium consequatur
eius adipisci saepe rerum reprehenderit nostrum temporibus.</div>
<footer></footer>
</div>
<div class="col middle">
<div class="content">Lorem ipsum dolor sit amet.</div>
</div>
<div class="col right">
<header></header>
<nav></nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, modi!</div>
<footer></footer>
</div>
</div>
I would do this with flexbox: http://codepen.io/pjetr/pen/KpYzqj
div { display: flex; }
/* I was required to add some code, to accompany the codepen link :) */
but remember to check this: http://caniuse.com/#feat=flexbox
Related
Hello I have this siple accordion, and I have an issue, that whenever i copy text from accordion, click event listener triggers and closes the accordion.
I would like to make it work without using jQuery
How could I fix it?
and how would I make it , so when i click somewhere else than on .question / .answer it would close automaticaly? i tried adding event listener to window, but after a long time of not figuring out how to makeit work I gave up.
here is my codepen : https://codepen.io/drabfi/pen/LYrBxzWhttps://codepen.io/drabfi/pen/LYrBxzW
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container active">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
const accordion = document.querySelectorAll(".content-container");
for(let i=0;i<accordion.length;i++){
accordion[i].addEventListener("click", function (){
if(this.classList.contains("active")){
accordion.forEach((panel)=>panel.classList.remove("active"));
}else{
accordion.forEach((panel)=>panel.classList.remove("active"));
this.classList.add("active");
}
})
}
.accordion{
margin: 0 auto;
width: 60%;
border-color: #fff;
padding: 2rem;
border-radius: 30px;
&-title{
margin-bottom: 2rem;
text-align: center;
}
.content-container
.question{
padding: 1rem 0;
font-size: 22px;
cursor: pointer;
border-bottom: 1px solid #000;
position: relative;
&::after{
content: "+";
position: absolute;
right: -5px;
}
}
.answer{
padding-top: 1rem;
font-size: 22px;
line-height: 1.5;
width: 100%;
height: 0px;
overflow: hidden;
transition: all .5s;
}
}
// js styling link
.accordion .content-container.active{
.question{
&::after{
content: "-";
font-size: 2rem;
transition: .5s;
}
}
.answer{
height: 150px;
}
}
I would be very happy to see the solutions so I could move on from this spot. Thank you for any advices.
you need to learn a bit about event delegation...
const
accordion = document.querySelector('.accordion')
, accordionEl = accordion.querySelectorAll('.content-container')
;
accordion.onclick = ({target: elmAcc}) =>
{
if (!elmAcc.matches('.content-container > div.question')) return // select only this div
let elContainer = elmAcc.closest('.content-container')
if (elContainer.classList.toggle('active'))
accordionEl.forEach( panel => panel.classList.toggle('active', panel===elContainer))
}
// clicking outside will close accordion :
document.addEventListener('click', event =>
{
if (!accordion.contains(event.target))
accordionEl.forEach( panel => panel.classList.remove('active'))
});
.accordion {
margin : 0 auto;
width : 60%;
border-color : #fff;
padding : 2rem;
border-radius : 30px;
}
.accordion-title {
margin-bottom : 2rem;
text-align : center;
}
.accordion .content-container .question {
padding : 1rem 0;
font-size : 22px;
cursor : pointer;
border-bottom : 1px solid #000;
position : relative;
}
.accordion .content-container .question::after {
content : "+";
position : absolute;
right : -5px;
}
.accordion .answer {
padding-top : 1rem;
font-size : 22px;
line-height : 1.5;
width : 100%;
height : 0px;
overflow : hidden;
transition : all 0.5s;
}
.accordion .content-container.active .question::after {
content : "-";
font-size : 2rem;
transition : 0.5s;
}
.accordion .content-container.active .answer {
height : 150px;
}
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
I have a design in front of me that looks like this,
As you can see there is a blue square (this right half will be hidden off screen) that overlaps three disticnt sections of a webpage, and I have not how to tackle it.
The only 2 options I can are,
1) Add a portion of the purple square to each of the 3 sections to it merges together, however each section has flexible content so the changes of lining up are slim.
2) Add an absolutely positioned div and position it where i need with the square as a background image and then play with z-indexing?
Is there a simple solution that I am missing?
You can try something like this
.parent {
display: flex;
flex-direction: column
}
.card {
disaply: flex;
background: darkblue;
height: 200px;
width: 350px;
}
.card2 {
disaply: flex;
background: skyblue;
height: 200px;
width: 350px;
}
* {
margin: 0;
padding: 10px;
}
.diamond {
height: 150px;
width: 150px;
background-color: purple;
transform: rotate(45deg);
z-index: 1000;
margin-left:274px;
top: 0;
background: linear-gradient(to left bottom, #ff66ff 50%, #ffe6ff 50%);
}
<div class="parent">
<div class="card">
<h1>Item1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>
<div class="diamond"></div>
</div>
<div class="card2">
<h1>Item1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>
</div>
</div>
https://codepen.io/tonytomk/pen/ExPNWjz
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 3 years ago.
I am a very new developer attempting to make a presentable photo-gallery-esque type thing to practice a bit. I have been leaning on CSS grid heavily for my layout...and I am pretty proud of what I have thus far.
I have four cards each containing an image thumbnail, a header, and some text. When the user hovers over any card they have the option to "view" the image which brings up a full screen modal. Everything works as I have intended...however...when I decrease the screen size some cards end up disappearing off screen!
I am very new to CSS grid and I have tried just about everything I know at this point. Please help me cross the finish line!
The code below works perfectly if just copy-pasted into the html portion on codepen.io.
Thank you in advance for any help you may offer!
const buttons = document.querySelectorAll('button');
const modal = document.querySelector('.modal');
const image = modal.querySelector('img');
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(event) {
const card = event.currentTarget.closest('.card');
const chosenImage = card.querySelector('img').src;
image.src = chosenImage;
modal.classList.add('open');
}
document.addEventListener('click', function(event) {
const target = event.target;
const isModal = target.classList[0] === 'modal';
if (isModal) {
modal.classList.remove('open');
}
});
body {
margin: 0;
height: 100vh;
display: grid;
align-content: center;
background: linear-gradient(0deg, rgba(130, 109, 118, 1) 0%, rgba(172, 52, 52, 1) 100%);
}
.wrapper {
display: grid;
grid-gap: 40px;
justify-content: center;
grid-template-columns: repeat(auto-fit, 300px);
grid-template-rows: 450px;
grid-auto-rows: 450px;
}
.card {
border: solid 5px #ac3434;
border-radius: 0.8rem;
overflow: hidden;
background: #3a363670;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.img-wrapper {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
display: grid;
}
.img-wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
border: solid 3px #ac3434;
border-radius: 50%;
}
.card-body {
grid-column: 1 / -1;
grid-row: 5 / -1;
padding: 0 10px 0;
font-family: 'Ubuntu', sans-serif;
}
.card-body h2 {
font-family: 'Anton', sans-serif;
}
.card-overlay {
grid-column: 1 / -1;
grid-row: 1 / -1;
background: #ac34347a;
display: grid;
place-items: center center;
transform: translateY(100%);
transition: 0.4s;
}
.card:hover .card-overlay {
transform: translateY(0%);
}
.card-overlay button {
background: none;
color: white;
text-transform: uppercase;
position: relative;
bottom: 78px;
border: solid 3px white;
border-radius: 0.4rem;
font-family: 'Ubuntu', sans-serif;
}
.modal {
height: 100vh;
width: 100vw;
position: fixed;
background: #0000008f;
display: grid;
place-items: center center;
/* Make modal invisible until triggered */
opacity: 0;
/* Makes it so the modal does not log click
events */
pointer-events: none;
}
.open {
/* Displays the modal */
opacity: 1;
pointer-events: all;
}
.modal-inner {
width: 500px;
}
.modal-inner img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="wrapper">
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sunny Walls</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cupiditate molestias sed ea sit, dolore quos itaque consectetur doloribus at. Dolor accusamus consequuntur perspiciatis! Deserunt?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Kit-the-Kat</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quaerat veritatis nobis voluptas minus exercitationem.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sass in the City</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium consectetur vel ullam assumenda corrupti id ratione odio, nisi adipisci?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>City Things</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint culpa suscipit libero consequatur quod non dolore neque aperiam nihil beatae? Dolores, deserunt.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
</div>
<div class="modal">
<div class="modal-inner">
<img>
</div>
</div>
You need to use media tags in the css.
Your site is not responsive and when you change screen size it does not resize the components.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I would like to remove the space between the avatar and my div with a class of .prof-cont, which both are in a a div with a class of maincontent I have tried using no-padding not working tied in my classes to still the same issue, what am I doing wrong my code for the view and sass file. This a Ionic 3 project.
View
<ion-content>
<div class="profile">
</div>
<div class="maincontent">
<ion-avatar no-padding>
<img src="../assets/profile/profilesnap.png" class="dp">
</ion-avatar>
<div class="prof-cont">
<h2 text-center>John Doe</h2>
<p text-center padding>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa fuga cupiditate quos doloremque nulla ex a, rerum, eos nesciunt dolorum excepturi unde dolores nam.</p>
</div>
<!--Segments -->
<div padding>
<ion-segment [(ngModel)]="profile">
<ion-segment-button value="service">
Service
</ion-segment-button>
<ion-segment-button value="review">
Review
</ion-segment-button>
</ion-segment>
</div>
....
<ion-content>
And for my SASS file
page-instraprofile {
.scroll-content{
// text-align: center;
// display: flex;
// flex-direction: column;
// justify-content: center;
// text-align: center;
}
.profile{
// background-image: url('../assets/bg#3x.png');
background-repeat: no-repeat;
background-size: cover;
height: 30%;
}
.maincontent{
background-color: aqua;
}
.dp{
position: relative;
left: 50%;
transform: translate(-50%,-50%);
// z-index: 10;
}
ion-avatar{
img{}
}
.prof-cont{
height: 100%;
color: red;
padding-top: 0 !important;
background-color: yellow;
h2{
color: green;
}
}
}
The main problem here is the transform: translate().
It moves the image half its height towards the top (the second parameter in translate(-50%,-50%) re-position the element along its y axis), though this happens only visually, which means it still, technically, is at its original position in the document flow. (see image below)
To keep a dynamic flow of the document, and since the image wrapper <ion-avatar no-padding> appeared purpose is to hold the image in place, decrease its height to a value about half the image's height and it will still position the image where it is now, though the following elements will move up.
I.e.:
ion-avatar{
height: 60px; /* adjust this value to control the distance to the text */
}
I have two paragraphs that need to be positioned so that they meet these criteria:
Both paragraphs must be centered in their container at the same height, even if one or both of them take up more than one line. This effectively overlaps the paragraphs.
The paragraphs container must be centered on the page and have a maximum width less than 100% of the page width.
These criteria must remain true if either the page is resized or the content of the paragraphs change.
I know that's a lot to keep track of, so I made a JSFiddle to explain and demonstrate what is needed.
Interestingly enough, that JSFiddle seems to be centered properly, but only if the text takes up more than one line...
StackOverflow won't let me post the question without code so here's some code:
<div id="container">
<p id="p1"></p>
<p id="p2"></p>
</div>
Note: The reason I said "outside DOM flow" in the title is because at least the second paragraph needs to be outside the DOM flow otherwise it can't be positioned on top of the first paragraph.
You can do this by css flex property like this
#container {
display: flex; /* equal height of the children */
}
#container > p {
flex: 1; /* additionally, equal width */
text-align:center;
padding: 1em;
border: solid;
background-color:#ff0000
}
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam</p>
</div>
Try this:
function randomNumber(low, high) {return Math.floor(Math.random() * high) + low;}
function generateSentence(length) {
var sentence = "";
var count = 0;
var wordLength = randomNumber(1, 10);
for (i = 0;i < length;i++){
if (count == wordLength) {
sentence += " ";
wordLength = randomNumber(1, 10);
count = 0;
} else {
sentence += "a";
count++;
}
}
return sentence
}
var tracker = 1;
setInterval(function(){
var randomLength = randomNumber(10, 150);
if (tracker == 1){
document.getElementById('p1').innerHTML = generateSentence(randomLength);
tracker = 2;
} else {
document.getElementById('p2').innerHTML = generateSentence(randomLength);
tracker = 1;
}
}, 1000)
#container{
position: absolute;
width: 50%;
left: 25%;
min-height: 100px;
background-color: red;
text-align: center;
display:flex;
align-items:center;
flex-direction:column;
justify-content:center;
}
#container p {
margin:0px;
}
<p>The text in both paragraphs below need to stay centered, even when the text changes. The bottom paragraph should be at the same height as the first one, effectively overlapping them.</p>
<div id="container">
<p id="p1"></p>
<p id="p2"></p>
</div>
I was able to accomplish this by wrapping the paragraphs in a non-statically positioned container.
Then absolutely position the paragraphs and set their width to 100% that of the container. Now using text-align: center; will center the text in the container and you can place the container anywhere on the page, and scale it to any size. The paragraphs will resize to fit the container, they will stay centered and they will stay at the same height.
HTML
<div id="container">
<div id="p1"></div>
<div id="p2"></div>
</div>
CSS
#container {
position: relative;
width: 70%;
left: 15%;
}
#container div {
position: absolute;
left: 0;
width: 100%;
text-align: center;
padding: 1em;
border: solid;
}
JSFiddle