Radpagelayout - .t-container-fluid .t-col - question about padding

[Amy]

Hi,

I was wondering what the reason was behind the .t-container-fluid .t-col styles having a padding of 15px?  Also, what is the best way to override the style in order to achieve no padding.

Thanks!

[Ivan Zhekov]

Hello, Amy.

We got the number by trial and error: we needed a number that's easy to use in calculations, say dividable by 5. However, 10 is a bit too narrow and 20 is a bit to wide. So we chose 15.

It's probably not the best number so we'll be experimenting with it to use different numbers on different resolutions. For instance on smaller resolutions, 10 would make much more sense.

How to override it? Just use a stronger selector:

div.t-container-fluid .t-col {
    padding-left: 20px;
    padding-right: 20px;
}

It should be noted that the control is still in beta and the final styling may change. In particular it might change based on feedback from customers, such as yourself: after all, the control should suit your needs.

Regards,
Ivan Zhekov
Telerik

 

 

[Amy]

Ivan, thank you for your response.  I have some additional questions that I'm including below; please let me know if I should create a new post for these instead.

I'm not quite sure I understand when the 'content' placeholder element should be used instead of a 'layoutcolumn'.  The documentation states the element is for "own content", but I don't know what that means.

Also,could you provide a bit more detail on the difference between 'layoutcolumn' and 'compositelayoutcolumn'.  Should the 'compositelayoutcolumn' be used when you want to nest additional rows and columns?

Thanks!

[Ivan Zhekov]

Amy, you can use the same thread as long as we stay on a similar topic (say not shift the focus to a different topic).

The variety of containers... They all offer flexibility, and I will elaborate.

With RadPageLayout we wanted create a server control that offers complete or mostly complete control of generated markup and be able to achieve simple / common cases with ease.

One such case is to allow nesting of columns inside columns. Without composite columns, you would need to add a new RadPageLayout control and do the rest from there. However, that PageLayout will be "outside" of the top one e.g. you will not be able to easily navigate around the controls collection should you wanted to.

Composite columns solve that issue: Content is just a placeholder where you put the actual content (immediately inside the DIV tag) and then the nested columns.

<!-- "simple" column -->
<LayoutColumn>
    Some content
</LayoutColumn>

<div class="t-col...">
    Some content
</div>


<!-- Composite column -->
<CompositeLayoutColumn>
    <content>Some content</content>
    <Rows>...</Rows>
</CompositeLayoutColumn>

<div class="t-col...">
    Some content
    <div class="t-row">...</div>
</div>

I hope that clarifies the usage examples.

By the way, if you feel that something is not right with the documentation, or seems vague, ambiguous and in anyway not clear enough or needs improving -- please tell us. We would like to improve the documentation for the final release.

Regards,
Ivan Zhekov
Telerik

 

 

[Henry]

I am having same question for the padding, I tried this css but doesn't seems to work. Is there any example demo page that I can reference to? Thanks.

[Ivan Zhekov]

Henry,

Depending on your actual structure, the selector might not be accurate. In most cases (provided that you are using a recent version) you can do:

html .t-col {
    padding-left: 10px;
    padding-right: 10px;
}

to modify the padding.

But if the above styles did not work for you, we'll need more context in order to understand why it's happening, say a live URL or a sample page that always produces the issue.

Regards,
Ivan Zhekov
Telerik

[Henry]

thanks. I tried this and it worked:

 div.t-container-fluid .t-col {

    padding: 5px;
    margin: 5px;
}