I have the below code that is displaying cross fading flight numbers and next to them, a time. Yet this time element is not displaying in the correct position, therefore being covered by a separate element and hidden.
I cannot see why the cross fading elements are causing the issue.
<div id='p1r0' class='cell sdrow' style='top:3px;'>
<div class='cell sp2'> </div>
<div id='p1r0flts' class='cell flts' style='top:0px;position:absolute;'>
<div class='cell' style='top:0px;position:absolute;'>
<div id='p1r0flts1' class='cell flts xfader_1'>LM234</div>
</div>
<div class='cell' style='top:0px;position:absolute;'>
<div id='p1r0flts0' class='cell flts xfader_0'>FR1234</div>
</div>
</div>
<div class='cell time'>11:30</div>
And the CSS:
.flts{
left: 238px;
width: 250px;
color: White;
text-align: left;
background-color: SkyBlue;
}
.time{
left: 488px;
width: 200px;
color: White;
text-align: center;
}
.sdrow{
position: absolute;
left: 0px;
width: 1920px;
max-height: 100px;
}
UPDATE:
I have added positioning of relative and absolute but this changed nothing.
The below code without crossfade does not interfere with the time node:
<div class='cell flts' style='background-color:LightSlateGray;'>GMAJY</div>
<div class='cell time'>11:50</div>
Adding 'Flex' instead of 'Absolute' positioning on the flights column has solved the issue. Code as below:
<div id='p1r0flts' class='cell flts' style='top:0px;position:flex;'>
<div class='cell' style='top:0px;position:absolute;'>
<div id='p1r0flts1' class='cell flts xfader2_1'>
LM234</div>
</div>
<div class='cell' style='top:0px;position:absolute;'>
<div id='p1r0flts0' class='cell flts xfader2_0'>
FR1234</div>
</div>
</div>
<div class='cell time'>11:30</div>
Related
In this CodePen, I am trying to get the .icon div to appear the full height of the div it's in. Unfortunately, it looks like it's loading before the text is there so the div has a height of 0 when it loads. How would I get it to load once the text is there and grab that full height? Preferably with no JS if possible.
All help is appreciated!
HTML
.faqSection {
height: 600px;
width: 100vw;
}
.topFaqSection {
margin: 100px 0 40px 10vw;
}
.innerFaqSection {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.leftFaq {
width: 35%;
height: 100%;
/* background-color: violet; */
}
.rightFaq {
width: 35%;
height: 100%;
/* background-color: blanchedalmond; */
}
.singleFaqBlock {
margin: 20px 0 0 0;
}
.questionBlock {
background-color: red;
display: flex;
flex-direction: row;
align-content: flex-start;
}
.icon {
background-color: blue;
width: 50px;
height: 100%;
}
.questionText {
/* display: none; */
background-color: green;
width: 100%;
}
.answerBlock {}
.answerBlock p {
margin: 0 0 0 62px;
}
.hiddenText {
display: none;
}
.notHiddenText {
display: block;
}
<div class="faqSection">
<div class="topFaqSection">
<h1>Questions? Look Here</h1>
<div class="bar blue"></div>
</div>
<div class="innerFaqSection">
<div class="leftFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
How do I earn a return?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
What kind of returns can I expect?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
<div class="space"></div>
<div class="rightFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
When is the platform releasing?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
Why invest in real estate? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
I'm a - and interested in raising money through -, what should I do? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
</div>
</div>
As I said in a a comment, removing the height: 100% rule should fix it for you. The "why" for it is a bit... unsavory.
Flex children default to "align-self: stretch", so they'll stretch naturally. But when you set a height, it will use that value. The problem is percentage height is calculated from the height actually specified for the parent and .icon's parent (.questionBlock) has no height specified: so .icon gets 100% of 0. If you were to set a height to .questionBlock, .icon would adapt.
From the specs:
The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'.
This is the comment that pointed me into the right direction. Maybe check it out?
I'm building the graphic aspect of a mancala game with HTML, CSS and Javascript (Though JS is iirelevant to this question). I managed to build the board, but my teacher wants the game so that the player will be able to enter the number of holes they want between 3 to 7. My problem is that the holes get weird looking when I remove or add holes (I want them to be circles!).
https://jsfiddle.net/kxdetz12/
<h1 style="text-align:center;">
Mancala
</h1>
<div class="board">
<div class='player1name'> Player 1 </div>
<div class="containerStore">
<div class="storep1">
<div class="label">
0
</div>
</div>
</div>
<div class="containerStore">
<div class="storep2">
<div class="label">
0
</div>
</div>
</div>
<div class="row">
<div class="pit">
</div>
<div class="pit">
</div>
<div class="pit">
</div>
<div class="pit"> </div>
<div class="pit"> </div>
<div class="pit"> </div>
</div>
<div class="row">
<div class="pit"> </div>
<div class="pit"> </div>
<div class="pit"> </div>
<div class="pit"> </div>
<div class="pit"> </div>
</div>
<div class='player2name'> Player 2 </div>
</div>
I think I understand...
I took the fixed widths and heights off of the pits. Then inserted a block in to each .pit using css. Padding-top, surprisingly, is relative to the width of the element.
This is a handy trick for maintaining aspect ratios on responsive elements.
.pit {
position: relative;
display: flex;
flex-grow: 1;
background-color: rgba(255, 169, 77, 0.7);
text-align: center;
color: aliceblue;
margin: 5px;
border: 5px;
border-radius: 100px;
border-style: inset;
border-color: saddlebrown;
}
.pit:before {
content: '';
display: block;
padding-top: 100%;
}
Updated fiddle: https://jsfiddle.net/3q5ctjw0/
So, I am having an issue where I can mostly get my flexbox working, except when it comes to two columns side by side with uneven rows beside each other. For the life of me I can't figure out why it isn't working.
Here is the screenshot of how it looks now:
http://prntscr.com/ndig4v (by lightshot)
Here is the HTML:
/* Stats */
#stats-container {
width: 100%;
height: 100%;
border: 1px black solid;
}
#free-stats {
width: 100%;
height: 45%;
border: 1px black solid;
}
#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}
#stats-column-one {
width: 75%;
}
#stats-column-two {
width: 25%;
}
#stats-flex-one,
#stats-flex-two {
display: flex;
flex-direction: row;
}
#str-row,
#end-row,
#dex-row,
#eva-row,
#int-row,
#res-row,
#has-row {
background: black;
display: flex;
flex-direction: row;
position: relative;
width: 55px;
border: 1px yellow solid;
}
<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>
Basically everything is correct, until it reaches the HR block, it SHOULD be on the right side. I want avoid using float: right;
I'm pretty sure I am doing this in the wrong order, but I am not sure which order I am messing up. I've played with it some, but each different thing I try I seem to break a bit more, this is the closest I've gotten.
I got it, I forgot the order in which things are supposed to work, but here is the fix
HTML:
<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-container">
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>
</div>
I just wrapped it all in another contain div, and added:
#stats-column-container {
display: flex;
flex-direction: row;
}
I also removed this completely
#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}
For reference on how it was supposed to look
http://prntscr.com/ndijk0 (by lightshot)
Hope this may help someone understand the order better in the future cause it confuses me sometimes.
Here is an example: https://jsfiddle.net/sunvom3a/
I have a list of items.
Basically a container with some text and a dropdown. The idea is when you hover over the text the dropdown should be directly below (kina like a tooltip).
.container {
overflow-y: scroll;
height: 100px;
border: solid 2px green;
}
.popup {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
display: none;
}
.item:hover .popup {
display: block;
}
<div class="container">
<div class="item"><span> Text1</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text2</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text3</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text4</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text5</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text6</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text7</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text8</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text9</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text10</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text11</span>
<div class="popup"></div>
</div>
</div>
The first few elements that fit below the scrollbar of overflow-y (with my resolution these are first 5 items) work great:
but the rest are broken - when the scroll bar is moved this offset is added as a distance between the popup and the text:
Is there any way to get the consistent behavior for all items in the list?
This is exhibited in Chrome and Edge (Firefox works as expected). It is calculating the relative position based on the initial, out-of-view position.
You need to add this...
.item{
position: relative;
}
...to make the absolutely positioned element positioned relative to the hovered item.
Fiddle: https://jsfiddle.net/sunvom3a/1/
The downside to the above solution is that it moves the tooltip inside the container, making a portion of it likely to be out of view. On a side note, I'm not sure this is a great UI anyway since you are covering other options with your tooltip. I would recommend attaching it to the parent of your container (then you don't have to worry about the tooltip being out of view either.
Adding to your snippet...
body{
position: relative;
}
...will always put the tooltip in the top right corner of the body. This would be better done by adding a container for your scrolling container, but this is a mere example.
Fiddle: https://jsfiddle.net/sunvom3a/2/
just change position absolute to relative in popup class
jsfiddle: demo
.container {
overflow-y: scroll;
height: 100px;
border: solid 2px green;
}
.popup {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
display: none;
}
.item:hover .popup {
display: block;
}
<div class="container">
<div class="item"><span>Text1</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text2</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text3</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text4</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text5</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text6</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text7</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text8</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text9</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text10</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text11</span>
<div class="popup"></div>
</div>
</div>
With how my HTML is structure I am having hard time selecting 3n child. It doesn't seem even notice the 3n selector of class heroLetter, but if I use the 1n child selector the code notices the class, but it also selects every div. I am not sure how to call the 3n child selector with this structure of classes I have made.
Code:
.heroLetter {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 600px;
color: #f5543a;
position: relative;
}
.windowWrapper .section .heroLetter:nth-child(3n) {
float: left;
width: 48%;
margin-top: 150px;
text-align: center;
font-size: 200px;
color: #f5543a;
position: relative;
}
<div class="wrapper">
<div id="section1" class="windowWrapper">
<div class="section group">
<h1 class="introH1">
<span class="Grand">GRAND</span>
<span class="Stand">STAND</span>
</h1>
<p class="introP">A new font.</p>
scroll down
</div>
</div>
<div id="section2" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>STORY</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
G
</div>
</div>
</div>
<div id="section3" class="windowWrapper">
<div class="section group">
<div class="col span_6_of_12">
<h1>PROCESS</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
S
</div>
</div>
</div>
<div id="section4" class="windowWrapper form">
<div class="section group">
<div class="col span_6_of_12">
<h1>BEAM</h1>
<p>Grandstand invokes</p>
</div>
<div class="heroLetter">
<div class="circle"></div>
a
</div>
</div>
</div>
</div>
</div>
The nth-child refers to children of the same parent only.
You could adjust your code to refer to the outer most common element.
Some css like this should help you:
.windowWrapper:nth-child(4n) .section .heroLetter {}
In this case it's the 4th windowWrapper since it contains your 3rd heroLetter