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

7 posts, 1 answers
  1. Amy
    Amy avatar
    105 posts
    Member since:
    Aug 2010

    Posted 12 Mar 2014 Link to this post

    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!
  2. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 17 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amy
    Amy avatar
    105 posts
    Member since:
    Aug 2010

    Posted 21 Mar 2014 Link to this post

    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!
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 25 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  6. Henry
    Henry avatar
    42 posts
    Member since:
    Apr 2012

    Posted 25 May 2015 in reply to Ivan Zhekov Link to this post

    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.
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 28 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Henry
    Henry avatar
    42 posts
    Member since:
    Apr 2012

    Posted 29 May 2015 in reply to Ivan Zhekov Link to this post

    thanks. I tried this and it worked:

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

        padding: 5px;
        margin: 5px;
    }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017