MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
What about column width within the Gridview to automatically adjust with the content.?
Column width should be specified in % manner. So it's width will be based on (your defined percent of) the size of it's parent element. Now all you have to do it write css media queries based on screen size. In these media queries you specify the size of
the parent element.
The media queries code should be something like:
.childColumn1{
width: 20%;
}
.childColumn2{
width: 30%;
}
.childColumn3{
width: 40%;
}
.childColumn4{
width: 10%;
}
// css media queries start here
@media only screen and (min-width : 320px) and (max-width : 480px) {
.parentElement {
width: 320px;
}
//other styles for the screen size 320px to 480px
}
@media only screen and (min-width : 481px) and (max-width : 540px) {
.parentElement {
width: 481px;
}
//other styles for the screen size 481px to 540px
}
@media only screen and (min-width : 541px) and (max-width : 767px) {
.parentElement {
width: 541px;
}
//other styles for the screen size 541px to 767px
}
@media only screen and (min-width : 768px) and (max-width : 959px) {
.parentElement{
width: 541px;
}
//other styles for the screen size 768px to 959px
}
I personally think that implementing responsiveness on the GridView you using CSS media queries is the simplest task.
Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
Member
32 Points
319 Posts
Gridview with Responsive Headers
Aug 22, 2019 09:51 PM|masterdineen|LINK
Hello there
could someone help with the following please
I have a gridview with Fixed headers and have aligned them up using margins etc...
But I want to make them responsive when viewing on different screens.
See current styles & gridview code below. all I want to do is make the gridview and headers responsive on difference screens.
Regards Rob
Participant
1860 Points
707 Posts
Re: Gridview with Responsive Headers
Aug 23, 2019 03:06 AM|samwu|LINK
Hi masterdineen,
I suggest that you don't use CSS directly to make GridView responsive, because it's complicated and troublesomeb.
you can try to use Foottable plugin.
The code:
The result:
Best regards,
Sam
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
32 Points
319 Posts
Re: Gridview with Responsive Headers
Aug 23, 2019 12:51 PM|masterdineen|LINK
Thank you very much
I shall give that a go later.
Regards Rob
Member
32 Points
319 Posts
Re: Gridview with Responsive Headers
Aug 23, 2019 03:49 PM|masterdineen|LINK
Hello Sam
What about column width within the Gridview to automatically adjust with the content.?
Member
32 Points
319 Posts
Re: Gridview with Responsive Headers
Aug 24, 2019 10:49 AM|masterdineen|LINK
Hi Sam
I am using HorizontalAlign ="Justify" which is making my headers line up nicely.
But how do to get the headers to be fixed when scrolling up and down.
Regards
Rob
Participant
1060 Points
732 Posts
Re: Gridview with Responsive Headers
Aug 25, 2019 11:49 AM|yogyogi|LINK
Column width should be specified in % manner. So it's width will be based on (your defined percent of) the size of it's parent element. Now all you have to do it write css media queries based on screen size. In these media queries you specify the size of the parent element.
The media queries code should be something like:
Recommend you to read - https://www.yogihosting.com/css-media-queries-for-responsive-web-design/
I personally think that implementing responsiveness on the GridView you using CSS media queries is the simplest task.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠