Is it possible to align RadDockZones into 3 columns using CSS and not tables?

4 posts, 0 answers
  1. Yevgeniya
    Yevgeniya avatar
    15 posts
    Member since:
    Mar 2008

    Posted 09 Jun 2008 Link to this post

    Hi,
    I need to align RadDockZones into 3 columns using CSS. All of the examples and forum posts use tables to do just the same. I tried the following markup (see below) and expected to see the zones side by side, but instead they appear underneath each other. IE Developer toolbar is showing their display style as BLOCK, even though I set it to INLINE. I've tried creating a custom skin and setting display style to INLINE in .RadDockZone_Gwi2007{}, but still the same result. Am I missing something simple?

    <telerik:RadDockLayout ID="RadDockLayout1" runat="server"                     
                Skin="Office2007" 
                EnableEmbeddedSkins="false"  >
       <div style="display:inline" >            
            <telerik:RadDockZone ID="RadDockZone1" runat="server"                              Height="300px"
                Width="300px"
                style="display:inline !important">
            </telerik:RadDockZone>
       </div>
       <div style="display:inline !important" >
             <telerik:RadDockZone ID="RadDockZone2" runat="server"                              Height="300px"
                 Width="300px"
                 style="display:inline !important">
             </telerik:RadDockZone>
        </div>
        <div style="display:inline">
              <telerik:RadDockZone ID="RadDockZone3" runat="server"                                Height="300px"
                   Width="300px"
                   style="display:inline !important">
              </telerik:RadDockZone>
         </div>
    </telerik:RadDockLayout>

    Thanks,
    Yevgeniya
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Jun 2008 Link to this post

    Hello Yevgeniya,

    In order to achieve the desired behavior I suggest to use the RadDockZone's CSSClass property and assign it to a proper CSS class.

    For your convenience I am attaching a sample demo which shows how this should be done. Please, note that in case you use the embedded skins, it is necessary to use the keyword !important in order to override the skin. Note, also, that the attached solution is just a custom one and with some skins which have bigger borders you should change the values for the margins in order to meet your requirements.



    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Yevgeniya
    Yevgeniya avatar
    15 posts
    Member since:
    Mar 2008

    Posted 12 Jun 2008 Link to this post

    Svetlina, thank you for a quick response.

    The css example you gave me hardcodes the margins and does not allow for zones to shrink and expand in the event of browser window resizing. It's important for us to have a fluid design where the content adjusts to the size of the browser window so I'm trying to find another way to use CSS to accomplish the same. Do you have any ideas on how to avoid hard-coding of margins? I tried the following, hoping that zones will be displayed inline and therefore will form 3 columns, but it did not work.

    <style type="text/css">
        .Test
        {
            display: inline !important;
        }
        .Test1
        {
            display: inline !important;
        }
        .Test2
        {
            display: inline !important;
        }
        </style>

    Thanks,
    Yevgeniya
  4. Yevgeniya
    Yevgeniya avatar
    15 posts
    Member since:
    Mar 2008

    Posted 12 Jun 2008 Link to this post

    Never mind. I think I got it:

        <style type="text/css">
        .Column1
        {
              float:left !important;
              min-width: 29% !important;
              width: 29% !important;
        }
        .Column2
        {
            float:left !important;
            min-width: 29% !important;
            width: 29% !important;
        }
        .Column3
        {
            float:left !important;
            min-width: 29% !important;
            width: 29% !important;
        }
        </style>
Back to Top