I have a dynamic table whose first three columns are sticky and the rest relative. When there is horizontal overflow-x, the first non-sticky column is positioned behind the sticky column. How can I style the components to make sure the first non-sticky column is positioned directly to the right of the first three sticky columns?
Styled-Components:
const TableDiv = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1100px!important;
overflow-x: auto;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
`
const Table = styled(MDBTable)`
&& {
align-self: center;
width: auto;
max-width: 80vw!important;
overflow-x: auto;
& tr, td {
background-color: #fff;
}
background-color: #fff;
z-index: 2;
& :not(caption) > * > * {
border: 0;
}
& .float-right {
text-align: right!important;
}
& .item, .label {
text-align: left;
background-color: #fff;
}
& td, th {
position: relative;
text-align: center;
transition: width 2s ease, min-width 2s ease, max-width 2s ease;
z-index: 1;
}
& tr th:first-child, tr td:nth-child(-n + 2) {
position: sticky;
left: 0;
z-index: 3;
}
& tr th:nth-child(n + 2), tr td:nth-child(n + 2) {
margin-left: 162px;
}
& tr td:nth-child(2) {
position: sticky;
left: 17px;
z-index: 3;
border-left-width: 0;
}
}
`
Related
I encountered a problem. I made a progress bar that will run to the corresponding position according to the value of progress. But I don't quite know how to modify the dot into a pattern like the design draft of the attached drawing, so that it can be wrapped in the progress-bar.
// 假設後端傳來的值是30
var progress = 10;
// 計算小圓點的位置
var dot = document.getElementById("dot");
var dotPosition = (progress / 30) * 100;
dot.style.left = dotPosition + "%";
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#progress-bar-container {
width: 600px;
height: 5px;
background-color: #fff;
position: relative;
display: flex;
flex-wrap: nowrap;
}
.progress-bar {
width: 33.33%;
height: 5px;
background-color: #fff;
margin-right: 8px;
border-radius: 20px;
}
#progress-bar-1 {
background-color: #ddd;
}
#progress-bar-2 {
background-color: #ddd;
}
#progress-bar-3 {
background-color: #ddd;
margin-right: 0;
}
#dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: orange;
position: absolute;
top: -3px;
left: 0;
transition: left 0.2s ease-out;
}
<div id="progress-bar-container">
<div class="progress-bar" id="progress-bar-1"></div>
<div class="progress-bar" id="progress-bar-2"></div>
<div class="progress-bar" id="progress-bar-3"></div>
<div id="dot"></div>
</div>
I know the height of the tree buttons (3rem, 3.75rem, 4.25rem). I need to place the i icon element at the right, in the middle of an imaginary square positioned at the right end of the button itself (purple area).
I've used right: 0 along with translateX(-50%) but it seems working only for the middle button (by chance). Any help is much appreciated.
.btn > i {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translate(-100%, -50%);
}
If you know the dimensions of the icon, then you can use calculate()
lets say the icon is 10x20px
.btn > i {
width: 20px;
height: 10px;
position: absolute;
z-index: 1;
top: calculate(50% - 5px);
right: calculate(50% - 10px);
}
.btn > i:after {
display: block;
width: 20px;
height: 10px;
}
If you would like to avoid the absolute positioning, you can use flexbox:
.btn {
display: flex;
justify-content: center;
align-items: center;
}
this will effectively center any single element inside of flexbox
Just with a couple simple calc()'s and a few CSS variables this is quite simple
.btn-sm {
--btnSize: 3.00rem;
}
.btn-md {
--btnSize: 3.75rem;
}
.btn-lg {
--btnSize: 4.25rem;
}
.btn {
border: 2px solid purple;
color: purple;
display: inline-block;
font-family: sans-serif;
margin-bottom: 1rem;
position: relative;
border-radius: var(--btnSize);
line-height: var(--btnSize);
height: var(--btnSize);
padding: 0 calc( var(--btnSize) + 2rem ) 0 2rem;
}
.btn::before,
.btn::after {
position: absolute;
}
.btn::before {
inset: 0 0 0 auto;
content: "";
background: purple;
border-radius: 100%;
width: var(--btnSize);
}
.btn::after {
inset: 0 calc( var(--btnSize) / 2 ) 0 auto;
color: white;
content: "→";
transform: translateX(50%);
}
<div class="btn btn-sm">Approfondisci</div><br>
<div class="btn btn-md">Approfondisci</div><br>
<div class="btn btn-lg">Approfondisci</div><br>
I am creating a calendar layout using flexbox. I am getting an extra gap before my first box:
Below is my code. Could anyone suggest what is creating this additional gap and how I can remove it?
Thank you in advance.
html {
font-size: 62, 5%;
box-sizing: border-box;
}
*,::before, ::after {
box-sizing: inherit;
}
body {
font-size: 1.6rem;
padding: 0;
margin: 0;
display: flex;
flex-direction:column;
}
header.header-news {
& > button {
position: absolute;
top: 0;
height: 100%;
opacity: .5;
&.last {
right: 0;
}
}
& > div.header-news_container {
display: flex;
}
& > div {
flex: 1 0 0;
}
min-height: 18rem;
position: relative;
}
section.main-content {
padding-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-left: 1rem;
}
.main-content__day {
aspect-ratio: 1/1;
width: calc(100% /7 - 1rem);
display:flex;
border: 1px solid rgba(0, 0, 0, .3);
align-items: center;
border-radius: .5rem;
justify-content: center;
cursor: pointer;
transition: .5s;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Inline block adding bottom space
(3 answers)
Closed 4 years ago.
So, there seems to be some whitespace added to an element on my page when I set the display to be inline-block. Is there a way to get rid of this white space without changing the line-height to 0px or changing the display type to block and manually setting a width? I may want the red element below to expand dynamically based upon the content in the future.
This is what I want (no green below the red):
This is what I am getting (green below the red):
Here's a JSFiddle of the issue: https://jsfiddle.net/rstL6omk/5/
The additional space is from the box model for laying out the "inline" elements including all inline-block or inline element. It seems like voodoo because you don't see it in the box-model for the elements involved. If you set font-size: 0; on .nav_container it goes away.
The problem is that you have overflow: hidden on your .logo_container. Removing this will get rid of the 4 pixels at the bottom of the element.
Then you simply need to make use of height: auto (the default for height) on .brand_logo_icon in order for it to expand based on its content.
This can be seen in the following:
body {
background: rgb(40, 40, 40);
font-family: Helvetica, Arial, sans-serif;
font-weight: lighter;
user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
margin: 0;
cursor: default;
color: rgb(60, 60, 60);
}
div {
box-sizing: border-box;
}
#supports(padding: max(0px)) {
.container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
#nav .nav_container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
}
#nav {
padding: 0px;
display: block;
background: rgb(55, 155, 55);
}
.brand_logo_icon {
display: block;
background-color: rgb(200, 30, 30);
width: 60px;
}
#nav .logo_link {
position: relative;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 45px;
}
#nav .nav_container {
display: block;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#nav .nav_container .logo_container {
display: inline-block;
padding: 0px;
background: rgb(80, 80, 80);
border-radius: 0px 0px 5px 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
}
#nav .nav_container .brand_logo_icon {
width: 70px;
}
.container {
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
transition: margin 225ms linear;
}
.container .splash:before {
content: "";
display: block;
padding-top: 56.2%;
}
.container .splash {
position: relative;
display: block;
width: 90vw;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
text-align: center;
}
.container .splash .splashimg {
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-size: 100%;
background-repeat: no-repeat;
opacity: 0;
}
.container .content {
display: block;
position: relative;
left: 0;
richness: 0;
margin-left: auto;
margin-right: auto;
max-width: 1300px;
opacity: 1;
animation: introAnimation 400ms ease-in-out 0ms forwards;
vertical-align: top;
white-space: 0;
font-size: 0px;
}
.container .content.c {
text-align: center;
}
.container .content .home_img:before {
content: '';
display: block;
padding-top: 56%;
}
.container .content .home_img {
display: block;
background-color: rgb(30, 30, 90);
}
.container .content .item_block {
display: inline-block;
width: 50%;
padding: 10px;
vertical-align: top;
box-sizing: border-box;
text-align: center;
}
.container .content .item_block .poster:before {
content: '';
display: block;
padding-top: 151%;
}
.container .content .item_block .poster.sqr:before {
padding-top: 100%;
}
.container .content .item_block .poster {
display: block;
max-width: 550px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-image: url('/assets/no_poster.png');
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div id="nav">
<div class="nav_container">
<div class="logo_container">
<div class="brand_logo_icon">ABC ABC ABC ABC ABC ABC ABC ABC</div>
</div>
</div>
</div>
<div id="container" class="container">
<div class="content">
<div class="home_img"></div>
</div>
</div>
I have some beautiful CSS:
$itemHeight: 40px;
$arrowModifier: 8;
$pageBackgroundColor: $color-gray-50;
.processBar {
display: flex;
flex-wrap: wrap;
&_item {
display: inline-block;
background: $color-gray-200;
height: $itemHeight;
position: relative;
flex-grow: 1;
text-align: center;
line-height: $itemHeight;
text-decoration: none;
color: $color-text;
padding-left: 10px;
padding-right: 10px;
&:hover {
text-decoration: none;
color: $color-text;
}
&-default {
&:hover {
background: $color-light-gray;
}
}
&-selected {
background: $color-white;
}
&:before,
&:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
&:first-child {
&:before {
left:0;
border: none;
}
}
&:not(:first-child) {
&:before {
left:0;
border-color: transparent transparent transparent $pageBackgroundColor;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
&:last-child {
&:after {
right: 0;
border: none;
}
}
&:not(:last-child) {
&:after {
right:0;
border-color: $pageBackgroundColor transparent;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
}
}
Here is the HTML that uses it:
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>
Here is what it does:
But at a certain size the :after elements can jump down, as seen here:
I don't understand why that is happening. How can I stop it from happening?
The ::before and ::after pseudo-elements on a flex container are considered flex items.
The ::before pseudo is the first item. The ::after pseudo is the last. So you have to think of them as siblings of the other flex items.
You can try using the order property to re-arrange items to achieve the effect you want.
What CSS pre-processor is this? I used every pre-compiler on CodePen and got errors from the $variables so I removed them and filled them in with whatever. Is this Stylus? Anyways, besides the variables being removed and some color changes, the only significant change is that I changed flex-wrap:wrap to flex-wrap:nowrap.
SNIPPET
.processBar {
display: flex;
flex-wrap: nowrap;
}
.processBar_item {
display: inline-block;
background: #c8c8c8;
height: 40px;
position: relative;
flex-grow: 1;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #000;
padding-left: 10px;
padding-right: 10px;
}
.processBar_item:hover {
text-decoration: none;
color: red;
}
.processBar_item-default:hover {
background: #808080;
}
.processBar_item-selected {
background: cyan;
}
.processBar_item:before,
.processBar_item:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
.processBar_item:first-child:before {
left: 0;
border: none;
}
.processBar_item:not(:first-child):before {
left: 0;
border-color: red;
border-width: 20px 0 20px 5px;
}
.processBar_item:last-child:after {
right: 0;
border: none;
}
.processBar_item:not(:last-child):after {
right: 0;
border-color: tomato;
border-width: 20px 0 20px 5px;
}
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>