I've created a table with react-table and made sticky headers with CSS:
th {
position: sticky;
top: 0; /* required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
font-size: 14px;
}
yet, it's not perfect, when I scroll I can see some of the scrolled text above the table header.
Did anyone face this issue?
The solution is to move the top a little farther:
th { position: sticky; top: -5px; }
I created a bigger heading cell so it won't be noticed using padding-top:5px
Related
I have a mui table with a sticky row, this is the css for the column
position: sticky;
left: 0;
background-color: white;
z-index: 20;
border-right: 1px solid #d9d9d9;
With this the first row can be on top of the other rows when scrolling. But i want to add a hover with this conditions
background-color: rgba(0, 0, 0, 0.01)
But when i do this when i hover on the row the other content can be seen
What can i do?
Is there a way in css to create and overlay with opacity 0.5
And create a class that when applied will somehow affect the overlay so the final result will look something like this?
What I am looking for a way that the class would affect the overlay.
I don't know how the rest of your page looks like, but you can use a pseudo-element (to get an offset) with box-shadow to punch a hole around an element, simply by adding a class to the element you want to highlight. Needs some fine adjustment, if you got other shapes than rectangles.
div {
box-shadow: 0px 0px 10px 1px lightgrey;
border-radius: 1rem;
padding: 1rem;
}
button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border-radius: 1rem;
cursor: pointer;
}
.highlight {
position: relative;
}
.highlight::before {
--white-area: -25px;
content: '';
position: absolute;
left: var(--white-area);
right: var(--white-area);
top: var(--white-area);
bottom: var(--white-area);
box-shadow:
inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5),
0px 0px 0px 9999px rgba(0, 0, 0, 0.3);
pointer-events: none;
border-radius: 2rem;
}
<div>
<h3>Don't Have an Account?</h3>
<button class="highlight">Create Your Account</button>
</div>
You can easily create an overlay with css. But AFAIK there is no way to "punch a hole" into that overlay. But you might put your button above the overlay and give it a (in this case white) shadow. So you would have to apply a class to the button rather than to the overlay.
EDIT:
As Simon shows, there IS a way to make a hole - but there would be a severe issue: How do you find the position above your button in a responsive design?
I still would recommend putting the button ABOVE the overlay.
A way is to create an overlay, and put the button on top of it, using z-index.
button{
background-color: #3499eb;
padding: 10px;
position: relative;
z-index: 999;
color: #fff;
}
.overlay{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color: black;
opacity: 0.5;
}
<div class="overlay"></div>
<button>Click here </button>
This seems to be a fairly common and not-fancy use case, but I haven't run into it before. I set up a pen, but can't replicate it there, and I'm pulling my hair out trying to figure out why.
Demo Pen
The left sidebar has a custom scroll-window for a list of items, but though setting overflow-y: scroll gives me a nice scrollable list, it also creates a huge block of whitespace equal to the height of the list on the left if overflow-y wasn't set to scroll. This whitespace is outside of the HTML tag (and because that blue background stops). So it appears there's something going on with height calculations, but I just don't know what else I can play with.
In my app, I've tried commenting out both the overflow-y and display: grid on my content wrapper, and upon doing either, the whitespace disappears. But of course I need both of these properties. Do I need to set another height somewhere?
I found the issue finally! Had to do with absolutely-positioned elements. I'm using custom checkboxes to do a filled square instead of the browser's defaults, and part of that code (which I borrowed and modified) was to set the input itself to position:absolute which took it out of normal flow of course (hence why my 100vh wasn't making a difference). Adding simply top: 0 fixed it all. I'd love if somebody could explain why setting top to its default value makes a difference here.
HTML (Angular)
<li class="flex justify-between" *ngFor="let error of hardSummary">
<input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
<label for="{{'h' + error.errorCode}}">
{{error.errorCode}}
</label>
<span>{{error.count}}</span>
</li>
SCSS:
.m-checkbox {
position: absolute;
opacity: 0; // hide it
top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD
& + label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
& + label:before {
content: '';
margin-right: 4px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #f4f4f4;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
// Box hover
&:hover + label:before {
background: #d8d8d8;
}
// Box focus
&:focus + label:before {
border: 1px solid #666;
}
// Box checked
&:checked + label:before {
background: #448aff;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
transition: all 0.2s;
}
}
I currently have a custom scrollbar like below. My page has 5 scrollable elements. How do I only have one scrollbar show up when scrolling that element while hiding the rest?
/*custom scrollbar*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(50, 50, 50, 0.1);
-webkit-border-radius: 8px;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: rgba(50, 50, 50, 0.2);
}
::-webkit-scrollbar-track:window-inactive {
background: transparent;
}
::-webkit-scrollbar-thumb:window-inactive {
background: transparent;
}
You can use the CSS property overflow: auto. This will only show the scrollbars when they're needed
You can hide all scrollbars with:
body { overflow: hidden }
As you indicate 'auto' shows scrollbars if content overflows.
I have never tried it but it may be possible to use JavaScript to get closer to what you describe but I have serious doubts about the ergonomics of such a design.
I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!