There is a circular progress bar. This bar prints the number of days remaining, taking the day difference. But I'm having trouble adjusting the position of this bar.
I am trying to do;
What I've been able to do so far;
html
<div className={'circularremainingtime__container only-desktop' + circularColor}>
<div className="remainingday">
<p>{endDate.getDate()}</p>
<p>{endDateMonth}</p>
</div>
<AS.CircularProgress
className="circularprogress"
style={style}
variant="determinate"
value={persentage}
thickness={3}
/>
<p>{circularText}</p>
</div>
css
.circularremainingtime__container.only-desktop {
width: 110px;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 1.5em;
& > p {
margin: 0;
font-weight: 600;
margin-top: 0.5em;
font-size: 1.2rem;
font-weight: 500;
color: var(--palette-red-300);
}
& > div {
padding: var(--padding);
}
.circularprogress {
color: var(--palette-red-300);
}
.remainingday {
//position: absolute;
color: #004dcf !important;
padding-top: 5px;
p{
margin: 0;
text-align: center;
color: #004dcf !important;
font-size: 8px;
font-weight: bolder;
}
p:first-child{
font-size: 13px;
text-align: center;
}
}
}
When I set the remainingday class to absolute, I can get the image I want. But when I swipe the screen, the dates don't change at all. That's why I commented that line.
You need to use position: absolute; top:0px; for . circularprogress in your style because what you are doing is rendering the element next to the div, that's why it is showing below that.
Cheers.
Related
I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for
With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>
How to start my progressbar counting when i will go to container section of my webpage.I think i have to change my javascript code a bit please help me.
HTML CODE
<div class="container">
<div class="circular-progress">
<span class="progress-value">100%</span>
</div>
<span class="text">HTML & CSS</span>
</div>
<!-- JavaScript -->
<script src="js/script.js"></script>
CSS CODE
/* Google Fonts - Poppins */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #7d2ae8;
}
.container{
display: flex;
width: 420px;
padding: 50px 0;
border-radius: 8px;
background: #fff;
row-gap: 30px;
flex-direction: column;
align-items: center;
}
.circular-progress{
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
}
.circular-progress::before{
content: "";
position: absolute;
height: 210px;
width: 210px;
border-radius: 50%;
background-color: #fff;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
.text{
font-size: 30px;
font-weight: 500;
color: #606060;
}
Javascriptcode
let circularProgress = document.querySelector(".circular-progress"),
progressValue = document.querySelector(".progress-value");
let progressStartValue = 0,
progressEndValue = 90,
speed = 100;
let progress = setInterval(() => {
progressStartValue++;
progressValue.textContent = `${progressStartValue}%`
circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`
if(progressStartValue == progressEndValue){
clearInterval(progress);
}
}, speed);
When i load my page at first then progressbar is count value But i want to start the counting after i go to that section of that webpage.
You could use Intersection Observer. You choose an HTML element to observe and once this element is in view, that will trigger the start of the progress bar.
I have these three icons, could be more, with tooltips which have the position: absolute;, and the whole icon part is aligned to the right. When hovering the icon, a tooltip appears, and in the case of the short text, it looks fine. However there is a problem, especially with the last tooltip, if there is a longer text.
It overflows to the right or just appears in a bad way, and what I'm trying to achieve is that when there is a long text, the tooltip should shift the position somehow to the left, so it's entirely visible... It would be great if this could be done in CSS only, but any working solution would be great. Thanks for any tips.
.container {
background: darkgrey;
padding: 20px 20px 50px;
display: flex;
width: 400px;
justify-content: flex-end;
}
.icon {
font-size: 20px;
color: white;
margin-right: 20px;
position: relative;
display: flex;
justify-content: center;
}
.container .icon:hover .tooltip {
visibility: visible;
}
.tooltip {
color: #fff;
position: absolute;
visibility: hidden;
font-size: 12px;
top: 30px;
min-width: 200px;
text-align: center;
}
<div class="container">
ICON <span class="tooltip">text1</span>
ICON <span class="tooltip">a bit longer tooltip text</span>
ICON <span class="tooltip">very long tooltip text goes here, and it should not overflow to the side</span>
</div>
I think you can use element.scrollWidth | element.clientWidth and element.getBoundingClientRect() to calculate if the tooltips go out of the window but i makes a lot of calculation for a simple probleme
Maybe you can juste create a class tooltip-left where element are moved to the right :
.container {
background: darkgrey;
padding: 20px 20px 50px;
display: flex;
width: 400px;
justify-content: flex-end;
}
.icon {
font-size: 20px;
color: white;
margin-right: 20px;
position: relative;
display: flex;
justify-content: center;
}
.container .icon:hover .tooltip {
visibility: visible;
}
.tooltip {
color: #fff;
position: absolute;
visibility: hidden;
font-size: 12px;
top: 30px;
min-width: 200px;
text-align: center;
}
.tooltip-left {
right:25%;
text-align: right;
}
<div class="container">
ICON <span class="tooltip">text1</span>
ICON <span class="tooltip">a bit longer tooltip text</span>
ICON <span class="tooltip tooltip-left">very long tooltip text goes here, and it should not overflow to the side</span>
</div>
I have a div with text that is positioned over a photo. I wrote some JS that ensures that if the div is greater than 500px in height, the position goes back to inherit.
It works as when I look at the page on my phone or Ipad, the DIV is well positioned.
However, when I reduce the browser on my computer, the Javascript only works if I refresh the page. I would like it to be responsive as I reduce my screen size. I realize that my javascript isn't taking account the movement of the screensize changing.
I'm fairly new to Javscript so I'm a bit stuck.
parentHeight = document.getElementById('boxinside').offsetHeight;
if (parentHeight > 500){
console.log(parentHeight)
document.querySelector('#boxinside').style.position = "inherit";
} else {
document.querySelector('#boxinside').style.position = "absolute";
}
body {
h1, h2, h3, h4, h5, h6, p {
font-family: 'Lato';
}
p {
font-weight: 300;
}
background-color: white;
position: relative;
}
.parallax-window {
min-height: 300px;
background: transparent;
position: relative;
object-fit: 50% 50%;
img {
width: 100%;
object-fit: cover;
height: 500px;
}
}
.text {
color: white;
text-transform: uppercase;
p {
font-size: 25px;
font-weight: 200;
}
h3 {
font-family:'Lato';
font-weight: 500;
letter-spacing: 2px;
font-size: 30px;
#include from-medium {
font-size: 40px;
}
}
font-family: 'Lato';
width: 100%;
position: absolute;
top: 30%;
padding: 10px;
display: flex;
margin-left: 0px;
align-items: flex-start;
justify-content: center;
flex-direction: column;
#include from-medium-low {
margin-left: 100px;
}
}
.button {
margin-top: 50px;
padding: 10px 20px;
background-color: white;
a {
color: #5B1B14;
letter-spacing: 1px;
text-decoration: none;
}
&:hover {
color: white;
background-color:#5B1B14;
}
}
.photo-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
#include from-medium-low {
flex-direction: row;
align-items: inherit;
justify-content: flex-start;
}
}
.container-macaron {
margin: 50px 20px;
position: relative;
}
.header-text {
h1 {
margin-bottom: 0px;
}
h2 {
color: #5B1B14;
font-weight: 300;
}
}
#boxinside {
padding: 10px;
position: absolute;
background-color: white;
left: 420px;
p {
margin-bottom: 0px;
}
}
.photo {
// img {
// position: relative;
// }
padding: 10px 20px;
}
<div class="home">
<div class="parallax-window">
<img src="https://images.unsplash.com/photo-1590080876351-941da357bde6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2960&q=80" alt="Italian Trulli">
<div class="text">
<p>ABOUT US</p>
<h3>Good quality baking<br> for a reasonable price</h3>
</div>
</div>
</div>
<div class="container-macaron">
<div class="photo-left">
<div class="photo">
<img src="https://images.unsplash.com/photo-1590080876351-941da357bde6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2960&q=80" alt="Italian Trulli" height='550px'>
</div>
<div class="text-box">
<div class="header-text">
<h1>Benjamin Pallais</h1>
<h2 style='color:#5B1B14;'>Founder of Monsieur Macaron</h2>
</div>
<div id='boxinside'>
<div class='boxtext'>
<p class='question'><b>Who are you?</b></p>
<p>Bonjour, I am Benjamin. Creator of Monsieur Macaron, foodie, and ex rugby player.</p>
<br>
<p class='question'><b>Why did you chose New Zealand?</b></p>
<p>Probably, for the love of rugby and the attractions around the myth of the All Blacks. I first visited New Zealand in 2007, when I was 21 years old. Since that trip, I have been motivated to become a Kiwi.</p>
<br>
<p class='question'><b>Why did you become a Pastry chef?</b></p>
<p>Probably the best job to express myself creatively with my patisserie, to allow me to travel around the world, and to provide happiness to my customers.</p>
<br>
<p class='question'><b>Why have you created Monsieur Macaron Ltd? Why did you choose macarons?</b></p>
<p>In my opinion, Macarons are the most glamorous biscuit in the world. As a Parisien, the macaron is the most trendy patisserie and is well known to Kiwi people. The creation of the company gave me the opportunity to fully express myself, manage my own relationships with customers/partners, and have the honour of helping the NZ Food culture.</p>
<br>
<p class='question'><b>What's the best part of your job?</b></p>
<p>Having the pleasure to sell my pasteries and meet my customers at the Farmers Market in Hastings every Sunday.</p>
</div>
</div>
</div>
</div>
</div>
you can use the following code to detect window resizing:
function changePosition() {
let parentHeight = document.getElementById('boxinside').offsetHeight;
if (parentHeight > 500){
console.log(parentHeight)
document.querySelector('#boxinside').style.position = "inherit";
} else {
document.querySelector('#boxinside').style.position = "absolute";
}
}
document.addEventListener("DOMContentLoaded", function() {
changePosition();
});
window.addEventListener("resize", function(){
changePosition();
});
I'm trying to vertical-align: middle a text inside a container with different font sizes. This has been asked before, but I can't get any of the solutions to work for me, What I'm missing?
I want the text with different font sizes to align vertically in the middle of the container.
Here is the code:
.
let upperGuideText = document.getElementById("upperGuideText");
let guide = "Some text here"
setTimeout(function(){
upperGuideText.style.fontSize = "3vw";
upperGuideText.innerHTML = `${guide}`;
}, 500);
setTimeout(function(){
upperGuideText.style.fontSize = "5vw";
upperGuideText.innerHTML = `${guide}`;
}, 2500);
.upperGuideContainer {
position: absolute;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.upperGuide {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
left: 0.5vw;
top: -11.4vh;
opacity: 1;
vertical-align: middle;
}
<div class = "upperGuideContainer">
<p id="upperGuideText" class="upperGuide"></p>
</div>
You're asking your CSS to do two different things, which is causing your problem.
the below flexbox properties that you included in the parent container are enough to achieve what you want.
.upperGuideContainer {
display: flex;
justify-content: center;
align-items: center;
}
When you tell the child <p> to take an absolute position, you're breaking the flexbox properties of the parent
.upperGuide {
/* position: absolute; */
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
/* left: 0.5vw; */
/* top: -11.4vh; */
opacity: 1;
/* vertical-align: middle; */
}
EDIT: If you want to learn more about the magical properties of flexbox, I highly recommend this article. I reference it constantly.
I think you are using position absolute on the child when you don't really need to do it. once your parent container has "display: flex" as a property you can align things with "align-items" and "justify-content", there is no need for the child to have position absolute unless you need it to for other purposes.
.upperGuideContainer {
position: absolute;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.upperGuide {
/*position: absolute;*/
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
/*left: 0.5vw;*/
/*top: -11.4vh;*/
opacity: 1;
/*vertical-align: middle;*/
}
As a side note, if you are using position absolute in a container inside of an absolute container, you should avoid using vh (viewport height) and vw (viewport width) as these are values coming from the viewport. I recommend using % or px instead as these are more accurate.
Remove position:absolute, and top from .upperGrid. Because when you use absolute it is positioned according to the nearest containing block that is not absolute. Also the element is taken out of the flex display.
.upperGuideContainer {
position: absolute;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.upperGuide {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
left: 0.5vw;
opacity: 1;
vertical-align: middle;
}