how to modify css so that RadDoc has auto width?

2 posts, 0 answers
  1. Rich
    Rich avatar
    2 posts
    Member since:
    Nov 2015

    Posted 03 Dec 2015 Link to this post

    I have an aspx page with two telerik RadDockZones so that when the page is expanded I have two columns on the page displaying a list of RadDocks.  I need to convert to this to one column (or no columns really) where the RadDockzone and the RadDocks take up the width of the page.  It was easy to make the display one (or no) column -- I just removed the 2nd RadDockZone tag (and associated tags) so that the RadDocks on the right side of the page are now directly under the RadDocks on the left side of the page.  The problem I am having is that I need the RadDockZone and the RadDocks to take up the width of the page.  How to do this?  I was able to hardcode a value in the width of the RadDockZone (but that is hardcoded -- I need auto) and the RadDocks reference a class in Dock.Custom.css.  This .css file is reference by several other pages in the web app.  I will list a bit of the markup for the RadDockZone/RadDock and list the content of the Dock.Custom.css file.  I would appreciate any suggestions how to proceed from here on making the RadDockZon/RadDocks auto width (without affecting all the other pages in the web app)

    ................................some markup from the .aspx page -- Skin ="Custom"  this is the css class for the RadDock

                <div style="float: left; padding-left: 5px;">
                    <telerik:RadDockZone ID="LeftRadDockZone" FitDocks="False" Width="955px" Height="610px" runat="server">
                        <telerik:RadDock ID="PersonalInformationRadDock" Title="Personal Information" DefaultCommands="ExpandCollapse"
                            DockMode="Docked" EnableRoundedCorners="True" Collapsed="False" EnableEmbeddedSkins="False"
                            Skin="Custom" EnableDrag="False" runat="server">
                            <ContentTemplate>
                                <table id="ExecutiveDescriptionTable">
                                    <tr>

    ..........

    And here is the .css file with the custom class -- how to make RadDockZone/RadDock autowidth?

    ...............................................

    .RadDock_Custom
    {
        height: 220px !important;
        width: 640px !important;
    }
    .RadDock_Custom .rdMiddle .rdLeft,
    .RadDock_Custom .rdMiddle .rdRight {
      background-image: url('../Images/VerticalSprite.gif'); }
    .RadDock_Custom .rdTop .rdLeft,
    .RadDock_Custom .rdTop .rdRight,
    .RadDock_Custom .rdTop .rdCenter,
    .RadDock_Custom .rdBottom .rdLeft,
    .RadDock_Custom .rdBottom .rdRight,
    .RadDock_Custom .rdBottom .rdCenter {
      background-image: url('../Images/HorizontalSprite.png');
     }
    .RadDock_Custom .rdCenter .rdCommands a span {
      background-image: url('../Images/CommandSprite.gif') }
    .RadDock_Custom .rdMiddle .rdCenter,
    .RadDock_Custom .rdBottom .rdCenter {
      background-color: white; }
    .RadDock_Custom .rdTitleBar em {
      color: white !important;
      font-size:12pt !important;
      font-family:"Segoe UI", Arial, sans-serif;
      font-weight:bold !important;}
    .RadDock_Custom .rdContent
    {
        background-repeat:repeat-y;
     background-position:left;
     margin:10px auto;
     height:190px !important;
     width:620px !important;
     color:black !important;
     font-family:"Segoe UI", Arial, sans-serif;
     line-height:16pt !important;
     text-align:justify;
     font-size:12px !important;
     vertical-align:bottom !important}
    .RadDock_Custom .rdTitleBar, .rdTitle {
      background:#476bb3;} 

    ...........................................

  2. Rich
    Rich avatar
    2 posts
    Member since:
    Nov 2015

    Posted 03 Dec 2015 in reply to Rich Link to this post

    I got the fix.  BTW, this is a webform app.  The fix was to create another (arbitrary name) css file and add the class names of the items that need to be modified on the Telerik css file to this custom css file and then override the values from the Telerik css because changing values in the Telerik css won't have any effect on the Telerik controls in the web page -- it seems like the values in the Telerik css are pretty much set in stone in the underlying libraries, but they can be overridden by creating a custom css and taking the names of stuff from Telerik to the new css and then add the override values there.  I think I got it. 
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top