I'm using react in my app and I'm trying to make a "progress bar" that represents the percentage of the balance that is being used as in this image:
It's working fine but when the percentage is low (5% or less), the border radius stops working as it should, making the bar appear out of the frame:
Is there anyway that I can fix this?
Here is the .scss file I'm using for the progress bar
.progress-bar {
background-color: #c5c5cb;
border-radius: 20px;
outline: 1px solid #212429;
outline-offset: -0.5px;
position: relative;
height: 20px;
width: auto;
margin-right: 12px;
margin-left: 12px;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
}
.progress-done {
background: linear-gradient(to left, #4A439A, #6950AC);
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 1s ease 0.3s;
}
Try overflow: hidden; in your .progress-bar class.
Related
just to preface I would say I'm rather new at coding, in particular, this is related to web coding.
I am using HTML and CSS to code a website and I've created a navbar with animation upon hovering. I followed a tutorial to do so and edited the values accordingly to fit with my website. All was fine, I saved it and opened it again and it was working just fine.
However I opened it up again today and all of the menu options have just been squashed to one side, though the animations still moved to the correct place when hovering over it. I had not edited any of the code and am unsure how to fix it.
I've tried to edit the position (left) of each menu item but it doesn't seem to be working.
Visualisation of the problem
here is the HTML coding for it:
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav>
And here is the CSS
nav {
position: relative;
width: 100%;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1)
}
nav a{
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
/* display: inline-block; */
text-align: center;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: whitesmoke;
border-radius:8px;
transition: all .5s ease 0s;
}
nav a:nth-child(1){
width:120px
}
nav .start-home, a:nth-child(1):hover~.animation{
width: 120px;
left: 00;
}
nav a:nth-child(2){
width: 120px;
}
nav a:nth-child(2):hover~.animation{
width: 150px;
left:102px;
}
nav a:nth-child(3){
width: 120px;
}
nav a:nth-child(3):hover~.animation{
width: 140px;
left: 230px;
}
nav a:nth-child(4){
width: 120px;
}
nav a:nth-child(4):hover~.animation{
width: 140px;
left: 350px;
}
nav a:nth-child(5){
float:right;
margin-right: 40px;
}
nav a:nth-child(5):hover~.animation{
width: 150px;
left: 1290px;
}
a:hover{
color: #c18392;
}
(Also I am aware the navbar doesn't navigate to anything yet)
Please help!
And thank you in advance
nav:adding display:flex to put them in one line. putting gap:10px that is the gap between all the a tags. setting width to 100vw meaning 100% view-width . everything else is the same as you have added previously.
nav a:same as you have added.
nav a:nth-child(5) meaning the last of the a tag with subscribe. adding margin-left:auto meaning what ever space is left in the container put it to the last a tag's left. i hope it makes sense.
hover:adding different bgcolor on hover. but you can do anything you want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
width: 100vw;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}
nav a {
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
}
nav a:nth-child(5) {
margin-left: auto;
}
a:hover {
background-color: whitesmoke;
}
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav
There's empty space to the far right of a header I'm using on all pages. When the window is maximized, the header extends all the way to the right, but when the window is resized smaller, the empty space not only appears, but widens as the window is resized. min-width: 100% hasn't fixed this.
Here's the CSS. .headerItem has padding to it, and that was the initial culprit, but after removing all the padding, the space still persists.
.Header {
height: 2.5rem;
min-width: 100%;
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
background-color: #282828;
border-bottom: 3px solid;
border-color: black;
text-decoration: none;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.Header a {
text-decoration: none;
}
.headerItem {
height: 100%;
line-height: 2.6rem;
background-color: #232227;
font-family: 'Montserrat', sans-serif;
font-size: medium;
margin-bottom: 10px;
padding-left: 1rem;
padding-right: .65rem;
padding-top: .25rem;
padding-bottom: .25rem;
font-variant: small-caps;
font-weight: 600;
transition-property: color;
transition-duration: 2s;
letter-spacing: .4rem;
color: #D6A83D;
border: solid 1px;
}
.headerItem:hover {
transition: .25s;
color: #ffec00;
border-color: #ffec00;
cursor:default;
}
All of the wrappers have also been reduced/edited to see if this would disappear, but it hasn't.
edit: Forgot the header
This is the answer, a very simple one, too: the buttons wouldn't resize while the header would, so they extend past the header.
So I am using Angular Material badge and I want the shape to be full circle if the content is single digit and zoom out on chrome normally using the zoom or ctrl - / + . However I am either getting an ellipsis as the badge content grows or it is a circle with curved edges for small values and it becomes smaller and not centered as we zoom out.
.nav-link-badge {
#media (min-width: 576px){
display: absolute !important;
align-items: center !important;
width: auto !important;
right: unset !important;
text-align: center !important;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
transition: opacity 0.2s ease-in-out 0.1s;
margin-left: 8px;
+ .collapsable-arrow {
margin-left: 8px;
}
}
}
Please suggest how I can get the desired behaviour in Angular badge. thank you
media ( min-width: 576px){
.nav-link-badge {
display: absolute !important;
align-items: center !important;
width: 35px;
height: 35px;
right: unset !important;
text-align: center !important;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
transition: opacity 0.2s ease-in-out 0.1s;
margin-left: 8px;
border-radius: 50%;
So I am trying to put a background image and then center the text to it, but when I change the screen size the text misaligns and moves to the top.
Here's my code:
import React from "react";
import UniversalValues from "../constants.js";
export default function Body() {
return (
<div>
<div className="Container">
<img
className="ResizeImage"
src="https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
alt="Background not loading! X_X"
/>
<div className="TextField">
<h1 className="BGH1">WE DO IT TOGETHER</h1>
<h1 className="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
);
}
Here is my css file:
.App {
font-family: sans-serif;
text-align: center;
}
.BGH1 {
letter-spacing: 0.06em;
font-family: "Cinzel", serif;
font-size: 5rem;
position: relative;
}
.BrandPoint {
font-size: 3rem;
font-family: "Cinzel", serif;
padding-left: 3rem;
}
.Container {
position: relative;
}
.dropbtn {
background: transparent;
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #33393f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderElem {
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
}
.HeaderElem:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderSeperator {
padding-left: 2rem;
}
.HeadUp {
position: fixed;
top: 0;
left: 0;
}
.ResizeImage {
height: auto;
width: 100%;
margin: 0;
padding: 0;
opacity: 0.99;
}
.TextField {
position: absolute;
bottom: 40%;
left: 35%;
color: white;
padding-left: 20px;
padding-right: 20px;
}
What I am getting vs What I wanted:
I want to pack this whole thing together and so it could just effectively change its shape according to the screen size. I have used Bootstrap but I am new to React and designing my entire website on codesandbox.io. Do let me know the best way to do so.
Thanks in advance.
I think your problem is purely HTML/CSS and not so much React. Thanks for flexbox centering content got a lot easier today.
Change your HTML like this:
<div>
<div class="Container">
<div class="imageContainer"></div>
<div class="TextField">
<h1 class="BGH1">WE DO IT TOGETHER</h1>
<h1 class="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
And your CSS like this:
.Container {
display: flex;
justify-content: center;
align-items: center;
background-color:blue;
position: relative;
color: white;
text-align: center;
height: 300px;
}
.imageContainer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
background-position: center center;
}
Here is a fiddle test it: https://jsfiddle.net/gtqna9c1/7/
How it works
Instead of trying to center changing text by absolute positioning it is a lot easier to create conditions where the text is always centered, no matter what. The background image is now a simple background of a div that is covering your whole box.
The fiddle is simplified and coloured for clarity. Feel free to add paddings etc. as you wish.
Web app
snippet
I'm running into a problem with the height of a button in Chrome. It works in Firefox just fine, but it's not filling in the entire height though I have it set to 100%. It's not making much sense to me, so can someone please explain this to me?
It seems to work in the snippet? I'm 100% not using JavaScript to set any of this: purely the CSS I have listed below.
It wasn't a problem until today...which is super weird.
body {
background-color: dimgrey;
margin: 0;
padding: 0;
}
.topbar {
border-radius: 0px;
border-bottom: 1px lightgrey solid;
margin-bottom: 0px;
background-color: white;
max-width: calc(80%-1px);
height: 60px;
max-height: 60px;
text-align: right;
display: flex;
}
.login-button {
max-width: 15%;
min-width: 15%;
background-color: tomato;
border: none;
border-left: 1px lightgrey solid;
login_text: 'color';
color: white;
outline: none;
cursor: pointer;
font-size: 30px;
height: 100%;
}
.e-mess {
width: 85%;
height: 100%;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
}
<div class='topbar'>
<div class='e-mess'></div>
<button class='login-button'>login</button>
</div>
I'm not sure why this was the issue, but I had to set the min-height property for the topbar class.
.topbar {
border-radius: 0px;
border-bottom: 1px lightgrey solid;
margin-bottom: 0px;
background-color: white;
max-width: calc(80%-1px);
min-height: 60px;
height: 60px;
max-height: 60px;
text-align: right;
display: flex;
}