This is a migrated thread and some comments may be shown as answers.

Problem with dock size in Chrome

6 Answers 163 Views
Dock
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 12 Apr 2013, 10:45 AM
Hi Telerik,

Unusually, this is related to Chrome rather than IE, as with IE, everything works properly.

I have spent weeks on this issue and have got nowhere. I have read countless forum posts and tried various things I have found but no result.

I have attached two pictures.

One of them, the title of the boxes (some... not all, i.e. Actions is there, but Matters and Documents is not) is missing and the treeview area is all squashed to the left. The other is almost correct, but a lot better than the bad one. As you can see, the titles are all there and you can see the treeview.

When I try a fix that I have found, quite often, it appears to work, but come back half an hour later (after a session timeout I guess) and it has failed again.

The page starts a load to show the title bar. Now, the rendering of the main area of the page can take a while, so we put up a waiting clock thing and use ajax to get the balance of the page. This is done with...
function pageLoad(sender, eventArgs) {
    if (!eventArgs.get_isPartialLoad()) {
        $find('<%= RadAjaxManager.GetCurrent(this).ClientID %>').ajaxRequest("InitialPageLoad");
    }
}

The above calls...
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    //To produce postback
    if (e.Argument.ToString() == "InitialPageLoad")
    {
        SetupWidgets();
         
        dLoading.Visible = false;
    }
}
 
private void SetupWidgets()
{
    List<DockState> currentStates = CurrentDockStates.OrderBy(cs => cs.Index).ToList();
 
    for (int i = 0; i < currentStates.Count; i++)
    {
        if (currentStates[i].Closed == false)
        {
            CustomRadDock dock = CustomCreateRadDockFromState(currentStates[i]);
            rdlPageDesign.Controls.Add(dock);
            CustomLoadWidget(dock);
        }
    }
 
}

Now, you don't need to understand what SetupWidgets is doing... but it does work. Basically, it gets information about the items (such as action, matters and documents) and loads them into the page.

If I remove the javascript pageLoad and have the setupwidgets called from pageload in codebehind, then everything works perfect EVERY SINGLE TIME.

I have also noted that when it fails, a few things happen...
1. When all the items initially load on the page, the page is squished and then sorts itself out but the documents do not and some of the titles are missing.
2. When I view the css in the dev tools, they are not correct... for example, the Actions title area, which always works the html is...
<em style="display: block;">Actions</em>
but for the documents where it is not working, it is...
<em style="display: block; width: 0px;">Documents</em>
The documents area is in a RadSplitter, It is set as...

<telerik:RadSplitter ID="rsDocumentsView" runat="server" Height="300" width="99%">
If I set  it as a value rather than a percent, it sort of works, but we need dynamic sizing. I have also tried the various resize options and that has failed to work as well. The output shows as...

<div id="ctl00_ContentPlaceHolder1_RadDock58a5fa95adcefa45bea8805a81cfcd8ee6f9_C_ctrl58a5fa95adcefa45bea8805a81cfcd8ee6f9_rsDocumentsView" style="height: 300px; width: 118px;"><div style=""><table id="RAD_SPLITTER_ctl00_ContentPlaceHolder1_RadDock58a5fa95adcefa45bea8805a81cfcd8ee6f9_C_ctrl58a5fa95adcefa45bea8805a81cfcd8ee6f9_rsDocumentsView" class="RadSplitter RadSplitter_Default" cellpadding="0" cellspacing="0" style="width:1px;height:1px;border-left-width:1px;border-top-width:1px;">

so it comes as 118px. No matter what the browser width is, it is allways 118px.

I have also ensured that all the wrapping containers have all their widths set as well, to no avail.

I think my bosses think I am swinging the lead on this.

If you need any more information, please ask. I have provided as much as I can think of.

Thanks.
David.

6 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 17 Apr 2013, 07:59 AM
Hi David,

Since you do not experience the problem when RadSplitter is set in pixel values rather in percentage it makes me believe that the requirements of the splitter are not met. Please take a look at the following article for more information on the subject:
http://www.telerik.com/help/aspnet-ajax/splitter-layout-filling-page.html

Also, without the exact page setup and the code of all customizations applied to the controls we can only assume what may be causing the issue, so, could you please open formal support ticket and provide sample fully runnable project reproducing the problem so we can examine and debug it locally?

All the best,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
David
Top achievements
Rank 1
answered on 17 Apr 2013, 12:05 PM
Hi,

I have tried setting width : 100% on all of the parent controls with no success. The example you show says to set height : 100% so I have tried that as well, even though I would have assumed just setting the width would be correct.

(As it is, 100% width is causing problems elsewhere, but lets assume that we have no other problems for the time being).

I have tried creating a test example but am having other problems now as well..ResizeDocSplitter is not defined. I have uploaded my test page (and UC) to http://www.revilloc.com/docform.zip with the ResizeDocSplitter problem.

I am currently using telerik version 2013.1.403.40.

One of the biggest issues with this is that sometimes it works, others it doesn't. This means I have to spend a lot of time just waiting for it to fail, but sure enough, it does.

I am informed that this issue is also present in firefox.

Thanks.
David.


EDIT:
Oops. ResizeDocSplitter is my bad... this was trying to fix the issue found elsewhere in the forum, but didn't work. I am removing that from my local code... the uploaded code also has another slight issue, a width=100% in one of the rad controls which doesn't have a width attribute.

I will continue with trying to create an example where the problem exists and will upload again in due course.
0
David
Top achievements
Rank 1
answered on 17 Apr 2013, 03:59 PM
I have modified the code and taken out the errors I introduced and have re-uploaded it.

Also in the zip is an image of my browser, using the exact code.

Now... it doesn't happen every time, but it does happen.
0
Dobromir
Telerik team
answered on 22 Apr 2013, 10:43 AM
Hi David,

Thank you for the provided sample page.

The problem with the correct sizing of the splitter nested inside the RadDock comes from the fact that the dock resize after being docked and its initial size (when the splitter calculates its size) is not the actual size.

Unfortunately, RadDock does not expose any client-side event that is suitable for this scenario to be handled and size the splitter properly. However, as a possible workaround you can handle the dock's ClientInitialize client-side event and use small timeout to handle the case, e.g.:
function DockInitialize(dock) {
     
    var splitter = $find(dock.get_id() + "_C_ctl00_rsDocumentsView");
    setTimeout(function(){
        var parent = splitter.get_element().parentNode;
        splitter.resize( parseInt(parent.clientWidth), 300);
    }, 500);
}

public RadDock CustomDock(string id)
{
    RadDock dock = new RadDock();
 
    dock.Style.Add("margin-bottom", "10px");
    dock.DockMode = DockMode.Docked;
    dock.ID = string.Format("RadDock{0}", id);
     
    dock.Commands.Add(new DockExpandCollapseCommand());
    dock.Width = Unit.Percentage(100);
    dock.Text = string.Empty;
 
    dock.OnClientInitialize="DockInitialize";
 
    dock.EnableDrag = false;
    dock.Resizable = false;
    
    return dock;
}

Please note that you might need to tweak the timeout set to provide enough dock to be sized.

Kind regards,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
David
Top achievements
Rank 1
answered on 23 Apr 2013, 10:05 AM
Hi Telerik,

This sort of works but I still have problems...

I have made the timeout to 2000 to give the page a chance.

See the two attached screenshots. One is a shot of IE10 and the other is Chrome.

In IE10, the splitter area is too wide, while in Chrome, it is not wide enough. (It is supposed to line up with the right edge of the green toolbar).

In IE, you can see all the titles... e.g. "Matters", "Documents". In Chrome, "Matters" and "Documents" are missing. I think it is all related...

Thank you for your help so far...

David.
0
Slav
Telerik team
answered on 26 Apr 2013, 12:46 PM
Hi David,

It appears there is a problem with resizing the RadSplitter when it is created programmatically via an AJAX request. I have reported this issue to our developers, nevertheless I cannot provide a firm estimate when it will be fixed. I am afraid that there is not a workaround for this problem at the moment.

I have updated your Telerik points as a token of gratitude for reporting this bug.

Greetings,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Dock
Asked by
David
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
David
Top achievements
Rank 1
Slav
Telerik team
Share this question
or