Recently I had a request to add Sticky Header Functionality to a DataGrid in one of my Blazor Server Projects. I am using Blazorise and didn't see any existing features for sticky headers and found limited information online so I figured I'd document my solution.
I will preface my answer with the fact that this solution was built for chrome and may need to be tweaked for different browsers.
To start I added a sticky-header class to my site.css file:
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
}
.sticky-header::before {
content: '';
width: 100%;
height: 1px;
position: absolute;
top: -1px;
left: 0;
background-color: #fcfcfc;
z-index: -1;
}
.sticky-header + .sticky-header::after {
content: '';
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: -1px;
background-color: #fcfcfc;
z-index: -1;
}
A couple of notes about the css. top is set to 0 to set the headers to the top of the screen and z-index just needs to be set to a higher index then the surrounding elements so that it will stay in front of the other elements.
Additionally I noticed that position: sticky got rid of my borders and as a result I utilized the ::before and ::after pseudo classes to help act like a internal border but this part of the code isn't necessarily required for sticky headers to work.
Once you have the above css, you will want to add it to your DataGrid. For Each DataGridColumn that you define in the DataGridColumns section you will want to add the following code:
<DataGrid>
<DataGridColumns>
<DataGridColumn HeaderCellClass="sticky-header" TItem="TEntity" Field="#nameof(TEntity.SomeProperty)" Caption="Some Caption" />
</DataGridColumns>
</DataGrid>
Try ensuring other properties are turned off and you should see the change in the accepted answer.
No scrollbar appears but the headers does float there. Resizable=false Responsive="false"
Related
I have tried this for two days but still I couldn't find the solution can any one please help me in this.
I suppose your header HTML be like:
the CSS for it to stick on top must be:
.header {
position: fixed;
width: 100vw;
top: 0px;
left: 0px;
}
I am using the nuxt.js and I have a fixed header which I have a drop-down for changing the languages, but the problem is as I have set a height for header component when I click on the dropdown button it only shows up to that height
you can find the image to problem here:
https://ufile.io/g7tosuph
I have tried giving position: absolute to the drop-down items and also z-index of 9999 but no luck it is still underneath the other components in every page I have also made sure that the styles are note scoped in the .vue files
.header-whole {
background-color: #0e1e25;
position: fixed;
overflow: hidden;
height: 70px;
top: 0;
z-index: 1000;
width: 100%;
}
.lang-items {
position: absolute;
z-index: 9999;
overflow: hidden;
}
Could you provide some sample code?
I guess you have set your <header> position to "fixed", try to set your <header> z-index a z-index value, as well (greater than the <main> z-index value, if any).
I'm just working on a site and I need an image in the top right corner that will link to another site when clicked. I created this in the CSS file:
div.image:before {
content:url(http://LinkToMyImage);
max-height: 169px;
max-width: 220px;
position: absolute;
top: 0px;
right: 0px;
}
Then add this html:
<div class="image"></div>
It appears exactly how I want it but it's obviously not a link, is there a way I can make this linkable? I have tried href to the div but that does not work. Any help is greatly appreciated! Thanks!
You can accomplish the exact same thing by simply using an anchor tag. Also, there's no need to be so specific with your css by referencing the element your class applies to. That will take quite a bit longer to process than just using the class name.
If you need a higher level of specificity, target your element with another class name. Avoiding a specific element makes your code more flexible should the markup need to change in the future.
Change your html to:
<a class="image"></a>
and your css to:
.image:before {
content:url('http://LinkToMyImage');
// You should also be able to safely eliminate `display: block;`
// when setting `position: absolute`, but included it just in case you
// experienced problems setting width and height
display: block;
height: 169px;
width: 220px;
position: absolute;
// top 0 is usually inferred when setting position: absolute;
// you should be able to remove this
top: 0px;
right: 0px;
}
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/
What I have now is this page.
And I want the section title block "Employer Information" to be 40px wider than it naturally is, breaking out of its parent, as shown in this image.
Thus far I tried:
.content form ol {
position: relative;
z-index: 50;
}
.content form ol .section {
position: absolute;
left: -20px;
width: 110%;
z-index: 100;
}
And tried several other parent elements to be position:relative but it never worked.
Any idea? Thanks!
Your main class has overflow: hidden, so it's masking the parts that are outside of it. Try your code with overflow: visible on .main.
Also Use position: relative in .section, or else it will be taken out of natural flow and the rest of the content jumps up behind it.
As "freejost" said, remove overflow:hidden in the class main and add the style position:relative for li
i.e
#submit_form li{
position:relative;
}
#empInfo {
left: 0;
position: absolute;
right: -20px;
top: 0;
}
The HTML edits are :
<div id="empInfo" class="description section" >
<h2>Employer Information</h2>
<div>General information regarding the employer business or organization.</div>
</div>
This should fix it.. there are a few other edits which u have to make to make it work,but this should get you at a comfortable level