This is a migrated thread and some comments may be shown as answers.

Question about CSS for listview

3 Answers 165 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Glenn
Top achievements
Rank 1
Veteran
Glenn asked on 16 Oct 2020, 06:22 AM

In the sample code for the listview the following CSS appears. I've adapted the sample code for my app but I don't understand the purpose of this CSS. When I remove it the pager doesn't display properly. So I'd appreciate an explanation.

 

 .k-listview:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden

}

  

 

3 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 19 Oct 2020, 04:57 PM

Hi Glenn,

Thank you for the provided code snippet.

Generally speaking, this is a style needed by the component. It's what's known as a CSS  "Clearfix". Although there is no official documentation on the topic, this highly upvoted StackOverflow answer has a nice explanation.

Let me know if you need any further information.

Kind Regards,
Anton Mironov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Glenn
Top achievements
Rank 1
Veteran
answered on 19 Oct 2020, 06:22 PM
According to that post, the clearfix is mainly used when using floating elements. But where is the floating element here? When I look in the developer tools I see that both the listview and pager have a float setting of "none".
0
Anton Mironov
Telerik team
answered on 21 Oct 2020, 12:41 PM

Hi Glenn,

Clearfix is used on the parent container when the children elements are floated. In this case, the elements with class "product" are floated, so clearfix is used to maintain the height of the ListView parent container.

I hope this information helps.

 

Best Regards,
Anton Mironov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
ListView
Asked by
Glenn
Top achievements
Rank 1
Veteran
Answers by
Anton Mironov
Telerik team
Glenn
Top achievements
Rank 1
Veteran
Share this question
or