RadPageLayout - Difference between Span and (SpanXs, SpanSm, SpanMd, SpanLg, SpanXl)

8 posts, 3 answers
  1. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 27 Jul Link to this post

    I have looked at the documentation for RadPageLayout to try to understand what is the difference between Span and (SpanXs, SpanSm, SpanMd, SpanLg, SpanXl) but the documentation only covers Span and does not explain what (SpanXs, SpanSm, SpanMd, SpanLg, SpanXl) is.

    With Span for columns, it just says it is the size or width in grid units of the column.  One grid equals 1/12 of the total width.

    That is still not clear enough for me.

    For example, what does it mean when a column has Span=4 and SpanMd=8?

    Sincerely,

    Keith Jackson

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 01 Aug Link to this post

    Hi Keith,

    The concept of different Span unit sizes is explained and exemplified in the Responsive Layout help article. You should also take a look at the Viewport Breakpoints help article to get clearer when each kind of Span is used.

    I would try to summarize the concept. The whole width of the screen is divided into 12 columns. So you may fit next to each other columns, whose Span values sum up to 12. If you have one column with Span 6 and 2 columns with Span 3 each, the first column would take half of the viewport width, and the other two would take 1/4 each. All 3 columns will be next to each other.

    SpanXs, SpanSm, SpanMd, SpanLg and SpanXl allow you to specify different width for some columns when viewed on a viewport width, falling into a specified size range.

    If SpanXs is set to 12 and Span is set to 6 for a column, when the respective column is viewed on a viewport with extra small size, it will occupy the whole viewport width (all12 grid units available). And for the rest of the cases (when viewed on larger viewports), it will occupy half of the screen size (6 of the available 12 grid units). You could further specify the width of the column for different sizes using the rest of the Span subsets.

    For a live demo, take a look at the PageLayout demo and browse its WindowContent.aspx content in the code viewer.

    Regards,
    Dimitar
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 01 Aug Link to this post

    Thanks Dimitar!  That helps to clarify it more.

    What would happen if there is a column without Span but has SpanMd = 3 and SpanSm = 6?

    Sincerely,

    Keith Jackson

  5. Answer
    Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 01 Aug Link to this post

    Hello Keith,

    If no Span is set, then it will fallback to its default value 12, which means that the respective column would occupy the entire row. If it has SpanMd and SpanSm defined, they will be taken into account for the respective viewport size ranges and the column would be 1/4 of the row for medium size and 1/2 for small size. For the rest of the cases, it will occupy the entire row because the Span value is used whenever a sub Span range is not specified. I would suggest you to try it yourself based on the RadPageLayout demo and documentation examples to make the case clearer.

    Regards,
    Dimitar
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 01 Aug in reply to Dimitar Link to this post

    Hi Dimitar,

         So basically Span property is used as a default when the viewport size hits the range that is not covered by the other Span property like SpanMd, SpanSm, etc.

         That means if a column has Span=2 SpanMd=3 SpanSm=6 then the column width will be 2/12 of the screen when viewport size is in the SpanXl, SpanLg, or SpanXs range.  Is that correct?

    Sincerely,

    Keith Jackson

  7. Answer
    Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 02 Aug Link to this post

    Hi Keith,

    Yes, this is correct. The Span property is a general one, while the more specific "Span+Size" properties overwrite the Span one for the respective screen size range and allow you more flexibility when defining your layout.

    Regards,
    Dimitar
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 02 Aug in reply to Dimitar Link to this post

    Thanks Dimitar!  That helps to clear it up.

    I would strongly recommend that Telerik update the documentation for the PageLayout.  It does not state what the default would be if Span property is not used.  It does explain what the "Span+Size" properties do but does not explain clearly what the Span property does in comparison to the "Span+Size" properties.  It needs to state and have some examples on how Span property is used when only some of the "Span+Size" properties is used with the Span property.  All the examples in the documentation show having the Span property and some of the "Span+Size" properties.  The Span and "Span+Size" properties are the most confusing part of the RadPageLayout because the documentation is not clear enough.

    Sincerely,

    Keith Jackson

  9. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 05 Aug Link to this post

    Hi Keith,

    Thank you for your feedback.

    I have logged a task for improving the RadPageLayout documentation in our backlog. It will be updated as soon as we have resource for it. And on a side note, we have recently added a feedback form below all our documentation articles. It may be used to submit feedback about articles which need improvement and clarifications as well.

    Regards,
    Dimitar
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017