Scrollbar problem in radwindow when using with contenttemplate

[Suraj]

Hi,

I am trying use radwindow with contenttemplate but it is showing scrollbars in popup,although it doesn't show scrollbar when I take that content in separate page & open it with radopen function  providing it's navaigation url.But I don't want use separate page for it.

Here is my code,

       

<telerik:RadWindow runat="server" ID="dlgEditPage" Modal="true" AutoSize="true" Width="506" MaxWidth="510" Top="50" Height="258" MaxHeight="260"><br>
        <ContentTemplate><br>
        <div id="EditTitle"><br>
<br>
        <div class="creat-survey-link-main" style="width:500px;"><br>
          <div><br>
            <div class="header-secondtop-line border-grey"></div><br>
            <div class="creat-survey-link-header-main" style="width:500px;"><br>
              <h3 class="creat-survey-link-green-heading float-lt" style="color:#405d0b;">Edit Page</h3><br>
              <div class="float-rt creat-survey-link-close" onclick="javascript:CloseRadWindow()" > <a href="javascript:void(0)"> <img src="../images/Close_icon.png" class="float-lt" /><br>
                <div class="float-lt" style="margin-top:2px; margin-left:2px;">Close</div><br>
                </a><br>
                <div class="clear"></div><br>
              </div><br>
              <div class="clear"></div><br>
              <div style="padding:20px 30px; background:#fff"><br>
                  <div><br>
                    <div class="title float-lt" style="padding:5px; width:80px; text-align:left;">Page Title:</div><br>
                    <div class="float-lt"><input type="text"  value="Change Your Title Here" style="width:200px;" /></div><br>
                        <div class="clear"></div><br>
                </div><br>
                <div class="marTop"><br>
                      <div class="title float-lt" style="padding:5px; width:80px; text-align:left;">Page Description:</div><br>
                    <div class="float-lt"><textarea type="text" style="width:330px;">Change Your Title Here </textarea></div><br>
                        <div class="clear"></div><br>
                </div>       <br>
                    <div class="clear"></div> <br>
            <br>
                <div style="float:left; margin:20px 0px 0px 90px;"><br>
                <div class="creat-folder-button-curve"><img src="../images/Save.png" style="padding-left:25px;" class="float-lt" width="16" /> <strong style="font-size:14px; padding:0px 10px; display:block; float:left;">Save</strong></div><br>
                             <div class="creat-folder-button-curve" onclick="javascript:CloseRadWindow()"><img src="../images/close.png" style="padding-left:20px;" class="float-lt" width="16" /> <strong style="font-size:14px; padding:0px 10px; display:block; float:left;">Cancel</strong></div><br>
              </div><br>
               <div class="clear"></div>   <br>
            </div><br>
                    <br>
                    <br>
                          </div>   <br>
          </div><br>
        </div><br>
<br>
        </div><br>
        </ContentTemplate><br>
        </telerik:RadWindow>

& it's rendered html



<div id="RadWindowWrapper_ctl00_MainContent_EditSurvey_G3_dlgEditPage" class="RadWindow RadWindow_Default rwNormalWindow rwTransparentWindow popupDialog rwNoTitleBar" style="width: 506px; height: 260px; position: absolute; visibility: visible; left: 250px; top: 516px; z-index: 3002;" unselectable="on">

& this is main content

<td class="rwWindowContent" valign="top">

<div id="ctl00_MainContent_EditSurvey_G3_dlgEditPage_C" style="overflow: auto; border: 0px none; width: 490px; height: 260px;">

as you can see there is difference in width of those divs.

I have also attached the screenshot.

[Shinu]

Hello Suraj,

You can add the following CSS to hide the scrollbar.

CSS:

<style type="text/css">
 HTML
 {
  overflow: hidden;
 }
</style>

Thanks,
Shinu.

[Marin Bratanov]

Hi Suraj,

This issue stems from the fact that you have limited the size of the RadWindow via its properties - MaxWidth, MaxHeight. What you see rendered has the limitations you have set taken into account.

That being said I advise that you do not set explicit size when using the autosize functionality:

<telerik:RadWindow runat="server" ID="dlgEditPage" Modal="true" AutoSize="true">
</telerik:RadWindow>

Also when the RadWindow is Modal it will always open centered on the page and the Top property will not take effect.

Your content with the above settings resulted in correct behavior on my end - see the attached screenshot. Please note the dimensions the RadWindow needed to accommodate it properly - they are larger than the limits you had set.

All the best,
Marin
the Telerik team

[Suraj]

Hi Marin,

Thanks for enlightening my knowledge.As far as AutoSize property is concerned it doesn't work for me unless I set the width explicitly.
See the attached screenshot of it.

And about the dimension,the actual width of my  content div is 502px & when I set the width to 516px as per you have shown in your screenshot(which I tried already) ,it resulted in empty white space around the window. See the attached screenshot of it.

I would like to mention it again that when I take the same content in separate page & open it with radopen function  providing it's navaigation url it works fine.

& also Princy's trick didn't work for me.

[Marin Bratanov]

Hello Suraj,

The screenshot I attached was with autosizing as well, these dimensions are calculated by the RadWIndow's JavaScrfipt, not set by me in the markup. The fact that there is a difference between you and me is probably due to the fact that I do not actually have your content - HTML, CSS, etc and therefore the markup provided in the first post does not render in the same way with me and you.

As for having some width set - the content placed in the RadWindow needs to have explicit dimensions set in pixels. This is necessary, as otherwise you get a confrontation of concepts - a block element (such as the asp Panel, or div, or table) by default takes the width of its parent - 100% of it. This means that it tries to autosize according to the RadWindow. In the same time we want the RadWindow to autosize itself according to this element, which leads to this obvious contradiction. This is the reason why some explicit dimensions must exist in the content.

I also tested the provided content in the ContentTemplate and in an external page and the behavior is the same in both cases: http://screencast.com/t/8ciPZ3rfOB. Please note that you have set explicitly 500px as width for the first container and if the content inside is 502px then you wold get scrollbars due to these two pixels. When explicit dimensions exist the browser returns them, regardless of the fact that your content will overflow. The 516px from my screenshot are the total width of the RadWindow -i.e. your 500px plus the RadWindow's borders.


All the best,
Marin
the Telerik team

[Suraj]

Hi Marine,

Thanks for the reply.

I have attached the screenshot of rendered html at my end.Please note the differences in width.

As you told when explicit dimensions exist the browser returns them, regardless of the fact that your content will overflow,I tested my content but I couldn't find anything wrong.

I have two stylesheets,one of them contain following things related to radwindow

 .rwCorner,  <br>
.rwTopResize,  <br>
.rwFooterCenter,  <br>
.rwTitlebar  <br>
{  <br>
    display: none !important;  <br>
}  <br>
 <br>
.rwTitlebar  <br>
{  <br>
    background-position: 0 -6px !important;  <br>
}

& http://www.woofiles.com/dl-267918-Be0wAiFX-style.css this is the link of other  css file which is particularly used in the content of radwindow

[Marin Bratanov]

Hello Suraj,

The first dimension (502px) is the size of the popup wrapper - i.e. the div holding all the rest of the UI, the second size (486px) is the size of the content cell. The difference is exactly 16px as it should be - this is the sum of the left and right border of the RadWindow, each being 8px. The RadWIndow renders its UI with the concept that its own CSS files will take effect, its borders will show and the code, therefore, accounts for this. You override the CSS and do not display the borders, yet you cannot override this calculation. This is the expected behavior and this is how it should work. Generally if you wish to have a RadWindow with no borders you should create a custom skin and apply the rules you wish to have and/or modify the image sprites.

That being said - the your code works as expected on my end: http://screencast.com/t/VPUG8kHiCO. I am also attaching my test page here as a reference.

The only case where I think this can be an issue is if you place colors or other images that span the entire width of the content template. What you can do to avoid this is to override the default table behavior:

.rwTable
{
    width: auto !important;
}

This causes the browser to calculate the sizes differently and causes the behavior from the second archive and screenshot. Note that I added an inline style to add the color.


Best wishes,
Marin
the Telerik team

[Suraj]

Hi Marine,

Your suggestion of overriding default table behavior worked but it is causing unexpected behavior(width problem) in other radwindows which are created using external pages.

That being said it works fine when I take that content to external page on my end,I am giving new link http://www.surveyconductor.flexdna.com/Styles/style.css of my stylesheet as my previous link wasn't working so you can test at your side.

Regards,
Suraj Patil.

[Marin Bratanov]

Hello Suraj,

I assumed you needed this globally on the page as your other selectors for the RadWindow were global. What you can do is simply cascade the .rwTable class through a class given to this specific RadWindow:

.contentWidthFix .rwTable
{
    width: auto !important;
}

<telerik:RadWindow CssClass="contentWidthFix" runat="server" ID="dlgEditPage" Modal="true" AutoSize="true" VisibleOnPageLoad="true">
        <ContentTemplate>
            <div id="EditTitle" style="background-color:Green;">
               . . .

Best wishes,
Marin
the Telerik team

[Suraj]

Hi Marine,

I tried as what you told in above post but it didn't work.

I am not sure if that css class got applied to radwindow.

Do I need to create custom css class/skin for radwindow?

Regards,
Suraj Patil.

[Marin Bratanov]

Hi Suraj,

It is not necessary to create a custom skin in order to apply a CSS class to the popup element of a RadWindow. Please make sure that there isn't a typing mistake in the class name and that it is added to the correct RadWIndow. Also, this cascade would work only with the ContentTemplate, as an external page creates an iframe which does not inherit styles from its parent page.


Kind regards,
Marin
the Telerik team

[Suraj]

Hi Marine,
I checked as you said but I couldn't find anything wrong.

Please see the screencast  & let me know if anything is wrong.Note that Css class isn't getting applied & it's working when I add it manually through firebug.

Regards,
Suraj Patil.

[Marin Bratanov]

Hello Suraj,

This is the first time I see this issue and I am not sure what may be causing it. Can you confirm you are using the latest version (Q2 2011 SP1) and if not does upgrading to it resolve this? In case it does not I advise that you open a support ticket and send us a runnable project that reproduces this behavior so we can investigate it and see what is going on.


Best wishes,
Marin
the Telerik team

[Suraj]

Hi Marine,

I upgraded my dll to latest version but it didn't work.

But I found the workaround, I called  set_cssClass method before show method & it worked.

But there is another issue I want your opinion about.Please see the attached screenshot & note the extra height.

Now what I am doing is calling method on OnClientAutoSizeEnd event & decreasing height by 16 as told by you that sum of the left and right border of the RadWindow is 16.

The above trick is working & I just want you to tell me if it is right way.

Also as being said earlier I use following style for hiding borders.

.rwCorner,
.rwTopResize,
.rwFooterCenter,
.rwTitlebar
{
    display: none !important;
}

.rwTitlebar
{
    background-position: 0 -6px !important;
}

[Marin Bratanov]

Hi Suraj,

I am glad to hear that you have found a workaround for your issue :)

As to your other questions - I am not sure how you expect the popup to look like, but I cannot see issues on the screenshot.

Please note that we generally do not support custom skins and this is about what you are doing with removing all the borders. This changes the appearance, dimensions and markup of the RadWindow greatly and I cannot confirm there is a right way to do it - this is not a scenario which is supported by the RadWindow - it is not intended to work like this and such a setup has, therefore, never been tested. I hope this will work well for you, though :)


All the best,
Marin
the Telerik team