Question about CSS for listview

[Glenn]

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

  

 

[Anton Mironov]

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

[Glenn]

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".

[Anton Mironov]

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