I have a Text Messaging Mobile Site App that has the following divisions and CSS
.messageDisplay {
background-color: #ffffff;
position: absolute;
z-index: 99999;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
overflow-x: hidden;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transform: translateY(100%);
}
.messageDisplayHeader {
display: flex;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
align-items: center;
background-color: #ffffff;
position: relative;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.messageDisplayTextboxArea {
height: 3.5em;
position: relative;
box-shadow: rgb(0 0 0 / 16%) 0px -1px 4px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
background-color: #000000;
}
.messageTextbox {
resize: none;
height: 2.5em;
width: calc(100% - 14%);
background-color: #fef3f1;
border: none;
border-radius: 100px;
padding-left: 1em;
padding-top: 0.5em;
padding-right: 1em;
color: #fc768a;
}
<div class="messageDisplay" id="messageDisplay">
<div class="messageDisplayHeader"></div>
<div class="messageDisplayBody" id="messageDisplayBody">
</div>
<div class="messageDisplayTextboxArea" id="messageDisplayTextboxArea">
<textarea id="messageTextbox" class="messageTextbox" maxlength="300" placeholder="Type a message"></textarea>
<div class="messageSendBtn" id="messageSendBtn">
<i data-feather="chevron-right"></i>
</div>
</div>
</div>
When using an IOS Device to focus in on the textarea the whole page shifts up.
When the textarea is focused out, the page stays shifted upwards.
I tried to solve this by doing the following:
var messageTextBoxEle = document.getElementById('messageTextbox');
messageTextBoxEle.onfocus = function(){
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
Right now it behaves as such
I also tried setting the page's margin-bottom:0; when the textarea is focused out but it doesnt seem to work.
Anyone have suggestions?
Related
I have a popup window (within the same page) which I'm attempting to put a container which scrolls horizontally into, yet it distorts the popup window and does not display anything other than the scrollbar. I'm honestly at a loss, can anyone help me here? I've looked around for solutions but I can't find anything that I can see applies to my problem.
If anyone can help, or point me in the right direction, I'd be really grateful. The scrollbar works perfectly fine when isolated, but inside the window shows like this:
Standalone:
My HTML (popup window with scrollbar inside)
<div id="formula-popup" class="popup-window">
<div>
<a onclick="closeFormulaWindow()" title="Close" class="close">X</a>
<span id="ftitle" class="title1"></span>
<form method="post" id="formulaform" name="edit">
<span>Current Formula</span>
<p id="current-formula" class="formula">Existing formula</p>
<input id="id-passer" type="hidden" name="formula-id" value="">
<!--sort out horizontal scrollbar from bookmarks here later-->
<input onclick="refreshWindow()" name="edit-formula" type="submit" value="Confirm">
</form>
<div class="h-scrollbar">
<section class="h-scrollbar-container">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
</div>
</div>
<div class="pseudo-track"></div>
</section>
</div>
</div>
My CSS:
.scrollbar-container {
display: flex;
flex-direction: row;
}
.h-scrollbar {
display: flex;
max-width: 30vw;
padding: 0px 10px;
height: 20vh;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.h-scrollbar-container {
width: 100%;
}
.outer-wrapper {
max-width: 100vw;
overflow-x: scroll;
position: relative;
scrollbar-color: #d5ac68 #f1db9d;
scrollbar-width: thin;
-ms-overflow-style: none;
}
.pseudo-track {
background-color: #f1db9d;
height: 2px;
width: 100%;
position: relative;
top: -3px;
z-index: -10;
}
.outer-wrapper::-webkit-scrollbar {
height: 5px;
}
.outer-wrapper::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}
.outer-wrapper::-webkit-scrollbar-thumb {
height: 5px;
background-color: #d5ac68;
}
.outer-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #f1db9d;
}
.outer-wrapper::-webkit-scrollbar:vertical {
display: none;
}
.inner-wrapper {
display: flex;
padding-bottom: 10px;
}
.pseudo-item {
height: 30px;
width: 80px;
margin-right: 15px;
flex-shrink: 0;
background-color: gray;
}
.pseudo-item:nth-of-type(2n) {
background-color: lightgray;
}
.popup-window {
position: fixed;
font-family: Arial, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
}
.popup-window div {
width: 40vw;
height: 30vw;
position: relative;
margin: 10% auto 30%;
border-radius: 10px;
background: #213B54;
padding-top: 2vh;
padding-left: 1vw;
padding-right: 1vw;
padding-bottom: 2vh;
display: flex;
flex-direction: column;
}
.close {
font: Arial, sans-serif;
background: #067A9F;
color: #B5E5E7;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
cursor: pointer;
}
.popup-window div .title1 {
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 36px;
color: #EE6802;
align-self: center;
}
.popup-window form input[type=submit]:hover {
opacity: 0.8;
}
.popup-window form span {
color: #EE6802;
font-size: 22px;
}
.popup-window form {
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
}
.popup-window form span, input {
width: 100%;
}
.popup-window form input[type=submit] {
width: 20%;
background-color: #067A9F;
color: #213B54;
padding: 14px 0;
cursor: pointer;
border: none;
}
I found the solution, it was that I forgot to select an element inside the window properly and instead it was selecting all divs and so overriding the CSS properties.
On my site, there is a scrolling container, which contains static cards that display certain data. The user scrolls through the cards one-by-one. On iOS Safari, only the first 2 cards are displaying, and as I scroll through, the other cards are invisible.
From the screenshot you can see that the element is there on the page, but invisible. You can even select the text on the element as if its there. The HTML and CSS behind every card is exactly the same.
.rc_eid-card {
position: relative;
width: 202px;
min-width: 202px;
height: 282px;
border-radius: 8px;
background: white;
padding: 20px;
box-sizing: border-box;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
scroll-snap-align: start;
margin-right: 16px;
&:last-child {
margin-right: 0;
}
img {
width: 40px;
margin-bottom: 16px;
}
h3 {
font-family: $font-base;
font-size: 32px;
font-weight: 700;
color: #BE67A1;
}
&--text {
font-size: 16px;
line-height: 1.375;
color: $color-grey--dark;
}
&--bottom {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 12px;
color: $color-grey--dark;
}
}
This is the CSS for the container if that matters as well:
.rc_eid-container--scrolling {
display: flex;
justify-content: center;
overflow: auto;
max-width: 1074px;
width: 100%;
margin: auto;
padding: 8px;
scroll-padding: 8px;
scroll-snap-type: x mandatory;
box-sizing: border-box;
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1));
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
&::-webkit-scrollbar {
display: none;
}
#media (max-width: 1073px) {
justify-content: flex-start;
}
}
Thanks in advance!
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 12 months ago.
Can anyone tell me how to solve this problem, As you can see my .tab
class is set to 100% width and it's overlapping on the
.main-container class? I also use overflow on my main container
however it began having a scroll can any tell me what is the correct
way to solve this problem? Thank you
.main-container {
border: 1px solid #D8D8D8;
border-radius: 2px;
width: 99%;
margin: 0 auto;
min-height: 10px;
/* overflow: auto; */
margin-top: 3px;
background: blue;
padding: 10px;
}
.tabs {
position: relative;
padding: 10px;
display: inline-block;
background-color: #f2f7fd;
border-radius: 6px;
width: 100%;
border: 1px solid transparent;
color: #333333;
}
.tabs-title {
margin-bottom: 6px;
font-size: 18px;
font-weight: 600;
color: #000000;
line-height: 22px;
padding: 0 2px;
}
.tabs-subtitle {
margin-bottom: 15px;
position: relative;
padding: 0 4px;
line-height: 18px;
}
.tabs-subtitle+hr {
height: 1px;
border: none;
background-color: #7a8a9a;
display: block;
margin-bottom: 15px;
}
.tabs-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tabs-rdb {
display: none;
order: 1;
}
.tabs-lbl {
position: relative;
top: 0;
padding: 8px 14px;
padding-bottom: 10px;
cursor: pointer;
background-color: transparent;
display: inline-block;
border-radius: 6px 6px 0 0;
font-size: 13px;
order: 2;
font-weight: normal;
user-select: none;
color: #000000;
}
.tabs.tabs-lbl-bold .tabs-lbl {
font-weight: bold;
}
.tabs-rdb+.tabs-lbl:before {
content: '';
position: absolute;
width: 0;
height: 1px;
border: 6px;
background-color: #2575c4;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
transition: .32s ease width;
opacity: 0;
}
.tabs.tabs-lbl-bold .tabs-rdb+.tabs-lbl:before {
height: 2px;
}
.tabs-lbl:hover {
color: #2575c4;
}
.tabs-lbl:first-of-type {
margin-left: 16px;
}
.tabs-lbl:last-of-type {
margin-right: 16px;
}
.tabs-rdb:checked+.tabs-lbl {
background-color: #ffffff;
color: #2575c4;
box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.tabs-rdb:checked+.tabs-lbl+.tabs-text {
display: block;
}
.tabs-rdb:checked+.tabs-lbl:before {
width: 32%;
opacity: 1;
}
.tabs-text {
display: none;
top: 0;
order: 999;
padding: 10px;
background-color: #ffffff;
border-radius: 6px;
line-height: 18px;
box-shadow: 0 0px 8px -4px rgba(0, 0, 0, .24);
width: 100%;
z-index: 1;
min-height: 38px;
}
<div class="main-container">
<div class="tabs tabs-lbl-bold">
<div class="tabs-title">Main Title (Optional)</div>
<div class="tabs-subtitle">Subtitle Lorem ipsum dolor at met (Optional).</div>
<hr>
<div class="tabs-content">
<input id="nkTabs_a_1" type="radio" class="tabs-rdb" checked name="tabs-a">
<label for="nkTabs_a_1" class="tabs-lbl">Home</label>
<div class="tabs-text">This area is for Home tab.</div>
<!-- -->
<input id="nkTabs_a_2" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_2" class="tabs-lbl">About</label>
<div class="tabs-text">
This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab.
</div>
<!-- -->
<input id="nkTabs_a_3" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_3" class="tabs-lbl">Help</label>
<div class="tabs-text">This area is for Help tab. This area is for Help tab.</div>
</div>
</div>
</div>
This overflow is caused by the box-sizing. Just add .tabs { box-sizing: border-box; } and the issue should be fixed.
The default value of box-sizing: content-box does not include the paddings and border. As such 100% width of the parent + paddings and border will always overflow! As such you have an overflow by 22px without border-box
PS: To stop the horizontal overflow of the viewport you should use width: auto instead of width: 99% on the wrapping parent element.
.tabs {
box-sizing: border-box;
}
/* original CSS */
.main-container {
border: 1px solid #D8D8D8;
border-radius: 2px;
width: 99%;
margin: 0 auto;
min-height: 10px;
/* overflow: auto; */
margin-top: 3px;
background: blue;
padding: 10px;
}
.tabs {
position: relative;
padding: 10px;
display: inline-block;
background-color: #f2f7fd;
border-radius: 6px;
width: 100%;
border: 1px solid transparent;
color: #333333;
}
.tabs-title {
margin-bottom: 6px;
font-size: 18px;
font-weight: 600;
color: #000000;
line-height: 22px;
padding: 0 2px;
}
.tabs-subtitle {
margin-bottom: 15px;
position: relative;
padding: 0 4px;
line-height: 18px;
}
.tabs-subtitle+hr {
height: 1px;
border: none;
background-color: #7a8a9a;
display: block;
margin-bottom: 15px;
}
.tabs-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tabs-rdb {
display: none;
order: 1;
}
.tabs-lbl {
position: relative;
top: 0;
padding: 8px 14px;
padding-bottom: 10px;
cursor: pointer;
background-color: transparent;
display: inline-block;
border-radius: 6px 6px 0 0;
font-size: 13px;
order: 2;
font-weight: normal;
user-select: none;
color: #000000;
}
.tabs.tabs-lbl-bold .tabs-lbl {
font-weight: bold;
}
.tabs-rdb+.tabs-lbl:before {
content: '';
position: absolute;
width: 0;
height: 1px;
border: 6px;
background-color: #2575c4;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
transition: .32s ease width;
opacity: 0;
}
.tabs.tabs-lbl-bold .tabs-rdb+.tabs-lbl:before {
height: 2px;
}
.tabs-lbl:hover {
color: #2575c4;
}
.tabs-lbl:first-of-type {
margin-left: 16px;
}
.tabs-lbl:last-of-type {
margin-right: 16px;
}
.tabs-rdb:checked+.tabs-lbl {
background-color: #ffffff;
color: #2575c4;
box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.tabs-rdb:checked+.tabs-lbl+.tabs-text {
display: block;
}
.tabs-rdb:checked+.tabs-lbl:before {
width: 32%;
opacity: 1;
}
.tabs-text {
display: none;
top: 0;
order: 999;
padding: 10px;
background-color: #ffffff;
border-radius: 6px;
line-height: 18px;
box-shadow: 0 0px 8px -4px rgba(0, 0, 0, .24);
width: 100%;
z-index: 1;
min-height: 38px;
}
<div class="main-container">
<div class="tabs tabs-lbl-bold">
<div class="tabs-title">Main Title (Optional)</div>
<div class="tabs-subtitle">Subtitle Lorem ipsum dolor at met (Optional).</div>
<hr>
<div class="tabs-content">
<input id="nkTabs_a_1" type="radio" class="tabs-rdb" checked name="tabs-a">
<label for="nkTabs_a_1" class="tabs-lbl">Home</label>
<div class="tabs-text">This area is for Home tab.</div>
<!-- -->
<input id="nkTabs_a_2" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_2" class="tabs-lbl">About</label>
<div class="tabs-text">
This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab.
</div>
<!-- -->
<input id="nkTabs_a_3" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_3" class="tabs-lbl">Help</label>
<div class="tabs-text">This area is for Help tab. This area is for Help tab.</div>
</div>
</div>
</div>
I have an input element which has a padding of 1em on both the left and the right side. But I have applied "box-sizing: border-box" to it. However, It's width is still more than the other elements. I think it might be because I need to remove some piece of code but I'm not sure. The input element is definitely the one issue as the other element is properly center aligned.
Below is the code:
:root {
--main-color: #00308f;
--secondary-color: #7cb9e8;
--dark-color: #444;
--light-color: #fafafa
}
body {
font-family: Montserrat, sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin-top: 70px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1em
}
.my-contacts-div {
align-items: center
}
.contacts-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.contact-card {
width: 288px;
margin: .5em;
border-radius: .5em;
box-shadow: var(--secondary-color) 1px 1px 10px;
padding: 0 .75em;
word-wrap: break-word
}
.contact-form {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: grid;
align-self: center;
width: 350px;
z-index: 1;
background-color: var(--secondary-color);
border-radius: 1em;
padding: 1em;
box-shadow: 1px 1px 1.5em var(--main-color);
visibility: hidden
}
.contact-form:target {
visibility: visible
}
.input-field {
margin: .5em 0;
border: solid 1px var(--secondary-color);
border-radius: .5em;
padding: 0 1em;
height: 40px;
box-sizing: border-box
}
.searchbar {
margin: .5em;
width: 100%
}
#media screen and (max-width:687px) {
.my-contacts-div {
padding: 0
}
.contact-card {
width: 100%
}
}
#media screen and (max-width:614px) {
body {
margin-top: 130px
}
}
<div class="my-contacts-div">
<h2>Heading</h2>
<form><input class="input-field searchbar" type="text" placeholder="Search here..."></form>
<div class="contacts-list">
<div class="contact-card">
<h3>Other component</h3>
</div>
</div>
</div>
What is wrong with it?
The issue was most likely that when you were using '.input-field' in the CSS, it was maybe not correctly using it so I just put 'form input.input-field' and also added some CSS to the form element. Now it is looking completely aligned.
:root {
--main-color: #00308f;
--secondary-color: #7cb9e8;
--dark-color: #444;
--light-color: #fafafa
}
body {
font-family: Montserrat, sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin-top: 70px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1em
}
.my-contacts-div {
align-items: center
}
.contacts-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.contact-card {
width: 288px;
margin: .5em;
border-radius: .5em;
box-shadow: var(--secondary-color) 1px 1px 10px;
padding: 0 .75em;
word-wrap: break-word
}
.contact-form {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: grid;
align-self: center;
width: 350px;
z-index: 1;
background-color: var(--secondary-color);
border-radius: 1em;
padding: 1em;
box-shadow: 1px 1px 1.5em var(--main-color);
visibility: hidden
}
.contact-form:target {
visibility: visible
}
form input.input-field {
margin: .5em 0;
border: solid 1px var(--secondary-color);
border-radius: .5em;
padding: 0 1em;
height: 40px;
box-sizing: border-box;
}
form {
box-sizing: border-box;
padding: 0 0.5em;
}
.searchbar {
margin: .5em;
width: 100%
}
#media screen and (max-width:687px) {
.my-contacts-div {
padding: 0
}
.contact-card {
width: 100%
}
}
#media screen and (max-width:614px) {
body {
margin-top: 130px
}
}
<div class="my-contacts-div">
<h2>Heading</h2>
<form><input class="input-field searchbar" type="text" placeholder="Search here..."></form>
<div class="contacts-list">
<div class="contact-card">
<h3>Other component</h3>
</div>
</div>
</div>
Add display: flex in the tag. It will solve the overflowing issue.
display: flex fills the entire container taking margin and padding into consideration. That's why it didn't overflow.
display: block is at 100% width by default and then adds margin and padding after causing the overflow.
Having trouble centering text vertically in a fieldset. This particularly when a sibling is hidden.
This is what the code should looks like when the sibling is showing:
#title {
margin: 20px;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
hr {
color: white;
background-color: white;
width: 80%;
height: 1px;
}
#formulaLine {
color: white;
background-color: white;
height: 1px;
}
section#formula {
width: auto;
max-width: 70%;
background: #393e46;
box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
border-radius: 5px;
margin: 5% auto;
padding: 10px;
font-size: 2vmax 1vmin;
}
.center {
text-align: center;
}
p .center {
margin-top: 5%;
}
.tBox {
position: relative;
width: auto;
max-width: 100%;
min-height: 400px;
max-height: 500px;
background-color: #222831;
border-radius: 5px;
margin: 40px auto;
align-content: center;
color: #eeeeee;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
font-family: 'Lato', sans-serif;
}
.legend {
padding: 0.2em 0.8em;
background: #d65a31;
border-radius: 25px;
float: left;
margin-top: -20px;
margin-left: 20px;
width: auto;
min-width: 200px;
font-size: 3vmax 2vmin;
font-family: 'Lato', sans-serif;
}
<div>
<fieldset class="tBox">
<legend class="legend">Definition</legend>
<div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div>
<div>
<hr>
<section id="formula">
<div class="row">
<p class="column center" style="margin-top: 5%; margin-left: 3%;">Formula:</p>
<div class="column center">
<p>∑ # completed tasks in month 'A' (from month 'B' schedule)</p>
<hr id="formulaLine">
<p>∑ # tasks forecased to finish in month 'A'</p>
</div>
</div>
</section>
</div>
</fieldset>
</div>
Problem is that when hiding the formula sibling (I am using React), the definition doesn't center. It looks like this:
#title {
margin: 20px;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
hr {
color: white;
background-color: white;
width: 80%;
height: 1px;
}
#formulaLine {
color: white;
background-color: white;
height: 1px;
}
section#formula {
width: auto;
max-width: 70%;
background: #393e46;
box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
border-radius: 5px;
margin: 5% auto;
padding: 10px;
font-size: 2vmax 1vmin;
}
.center {
text-align: center;
}
p .center {
margin-top: 5%;
}
.tBox {
position: relative;
width: auto;
max-width: 100%;
min-height: 400px;
max-height: 500px;
background-color: #222831;
border-radius: 5px;
margin: 40px auto;
align-content: center;
color: #eeeeee;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
font-family: 'Lato', sans-serif;
}
.legend {
padding: 0.2em 0.8em;
background: #d65a31;
border-radius: 25px;
float: left;
margin-top: -20px;
margin-left: 20px;
width: auto;
min-width: 200px;
font-size: 3vmax 2vmin;
font-family: 'Lato', sans-serif;
}
<div>
<fieldset class="tBox">
<legend class="legend">Definition</legend>
<div id="definition">MY TEXT HERE. IT CAN GET LONG. MULTI-LINE. HERE'S MORE TO FILL THIS OUT. LONG LONG LONG.</div>
</fieldset>
</div>
Note that the CSS for this second example is the same as above. What am I doing wrong? I've tried Top, Float, and a variety of other options. None seem to work.
I would recommend adjusting your markup to support using :only-child in CSS. This is a pseudo-class that represents an element without any siblings. Definitely give the documentation a review for some other examples.
/* Selects each <p>, but only if it is the only child of its parent. */
p:only-child {
background-color: lime;
}
It's pretty useful for situations just like this and the implementation wouldn't take very many changes.
var formula = document.createElement("P");
formula.innerText = "This element represents your formula being added to the container which removes the styles applied with :only-child.";
var active = false;
function toggleFormula() {
active = !active;
document.getElementById("legend").innerText = active ? "Click here to hide formula." :
"Click here to show formula.";
let tbox = document.getElementById("t-box");
if (active)
tbox.appendChild(formula);
else
tbox.removeChild(formula);
}
.container { position: relative; }
.legend {
position: absolute;
top: -10px;
left: 20px;
z-index: 1;
padding: 0.2em 0.8em;
background: #d65a31;
border-radius: 25px;
width: auto;
min-width: 200px;
font-size: 3vmax 2vmin;
font-family: 'Lato', sans-serif;
cursor: pointer;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
#definition:only-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tBox {
position: relative;
width: auto;
max-width: 100%;
min-height: 400px;
max-height: 500px;
background-color: #222831;
border-radius: 5px;
margin: 40px auto;
align-content: center;
color: #eeeeee;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
font-family: 'Lato', sans-serif;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
#definition:only-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<legend id="legend" class="legend" onclick="toggleFormula();">Click here to show formula.</legend>
<fieldset id="t-box" class="tBox">
<div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div>
</fieldset>
</div>
Alternative options are using position: absolute or display: flex:
/* Absolute Version */
#definition.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Flex Version */
.tBox {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
With your exiting code, just adding few properties to your css will be an easy fix. Flex properties are really helpful in these scenarios, align-items: center will align all elements inside the div to align vertically and justify-content: center will align items horizontally.
section#formula {
width: auto;
max-width: 70%;
background: #393e46;
box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
border-radius: 5px;
margin: 5% auto;
padding: 10px;
font-size: 2vmax 1vmin;
display: flex;
justify-content: center;
align-items: center;
}
.center {
justify-content: center;
display: flex;
width: 100%;
flex-flow: row wrap;
}
You can see it here.