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
10 Answers, 1 is accepted
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
Rank 1
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
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
Rank 1
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
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
Rank 1
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
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
Rank 1
<row><column>
Span=6 SpanXs=12 SpanSm=12
radchart1
</column>
<column>
Span=6
radchart2
</column>
</row>
when the span is set 6 for two charts. they are not fitting to the layout,instead span 4 is taken for both charts,
how to get the charts with the span as 6 as it is given?
Sincerely,
Ruckmani
I tested your setup and I do not reproduce such behavior. Here is a screenshot of my test. The red borders are for the layout column and the green borders are for the Chart dimensions. So the chart occupies the whole space available. There is 15px padding on the left and the right of the chart, which comes from the column styles. If you uncomment the rules in the following CSS, the 15px padding will be removed as well:
<style type="text/css"> html .t-col { border: 1px solid red; /*padding-left: 0; padding-right: 0;*/ } html .RadHtmlChart { border: 1px solid green; }</style>And as your question is not related directly to the topic of the current thread, I would suggest you to open a new support ticket, if further assistance on this matter is needed. You may include a this thread for reference. Thus, we would keep threads as short and concise as possible, avoiding mixing different topic in them.
Regards,
Dimitar
Telerik by Progress
Rank 1