iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
Hi,
I'm currently trying to get WebGrid to resize with the page (both height and width), and I'm not finding a good solution. I've tried several combinations of AutoHeight = true, and Grid.Height = 100% with no success. Can you please provide me with an example of how to make the grid expand with the screen, where the DocType of the page is XHTML 1.0, and the example works in IE, Firefox, and Chrome.
Thanks in advance.
I’m currently still investigating this issue and need more time to provide you with solution, suggestion, or sample. I’ll get back to you as soon as possible.
Regards,
Lili Khiung
Lili,
Can you please give me an update on this request?
Thanks.
Deeply apologize for the late response. Using XHTML doctype, it would be better if add this code in the HTML tag, body tag, form tag, and div tag:
style="height:100%"
Here's I attach the sample for you.
Hope it helps.
Lili
Thank you for the response. I tried your suggestion, and it works for Chrome and Firefox, but does not work in Internet Explorer. In IE, when the height of the page is expanded, the box around the grid expands with the page, but the footer bar stays in the same place (see screenshots).
I've attached the sample that I used to make the attached screenshots. In IE 9, the footer bar will never move until the page is refreshed at the new height. In IE 8, if I expand the window extremely slowly, it will occassionally move the footer bar, but it generally does not move.
I have tried your sample. But it worked fine in both IE8 and IE9. I also attacht the video. The video using IE9, but in IE8 the result is just the same. I can't replicate the issue on my end.
Thank you for the video. Clearly it works for you, but unfortunately it is still not working for me. I could send you a video of the grid not resizing, but I think the screenshots I attached earlier are sufficient.
I have tried your example as well as the one that I've sent you, and neither of them work in Internet Explorer (8 or 9). To help diagnose what might be causing the issue, I'm listing as many details about my setup that might be relevant:
Internet Explorer 8 Version: 8.0.7601.17514Internet Explorer 9 Version: 9.0.8112.16421Operating System: Windows 7 (64-bit)WebGrid Version: 7.0.7200.429
Also, I'm running the site in the local intranet zone. Could there be any special settings that need to be enabled on the browser/site to make this work?
Unfortunately, this has become the highest priority issue in our current product development cycle, so thank you for continuing to work through this issue with me.
Maybe you could try to add this script:
<script language="javascript"> function window::onresize() { wgDoResize(true,true); } </script>
It is another way to call the resize function of WebGrid. Hope it helps.
This solution appears to work, but only on two conditions. First, I had to set AutoHeight=false to make the grid re-size with the page. I'm not sure why this had a negative affect on the resizing, but even with the extra javascript you suggested it doesn't work if AutoHeight=true.
Secondly, your example only works if you assume that the WebGrid is the only item on the page, and it can take up 100% of the page. Unfortunately, the WebGrid is never the only thing on the page in my application, so this example will not work.
I've attached another sample page for you to demonstrate my issue. In Default.aspx, I've added some content on the page above the WebGrid. Then, to prevent the WebGrid from running off the bottom of the screen, I set the height of the div=65%. When viewed at the appropriate size, everything looks great (see WebGrid_small.jpg). However, as the screen is expanded the 65% leaves a larger and larger gap at the bottom of the screen (see WebGrid_large.jpg).
So, it appears as though I need a solution using AutoHeight=true that allows the grid to fill its container. Can you please provide a solution?
We are forwarding your issue to the developer. We will inform you when there is any solution, workaround or fix about the issue.
Hi Lili,
Thanks for forwarding our issue.
This is a critical issue in a large project that we are in the middle of - upgrading our IE web application to support all browsers. The whole project will be canceled if we can't get AutoHeight/AutoWidth working in IE8/IE9 standards mode.
Because of the seriousness of this issue, we greatly appreciate any updates and information you can give us. Thanks very much.
Here's an update about your sample issue. Practically, in your sample, you don't need to set the AutoHeigt to True, just set it to False because AutoHeight is only used when the Grid needs to fill the entire screen. Since the Grid only needs to fill 65% of the parent DIV, it doesn't require AutoHeight. If AutoHeight set to False, the sample works fine.
I've attached another example which more clearly demonstrates the desired outcome, as well as the issue we're experiencing. The attached example has two pages: WorkingPage.aspx, and BrokenPage.aspx. The only difference between the two pages is the DOCTYPE tag.
WorkingPage.aspx is using HTML 4.01 Transitional (ie: Quirks mode). Notice that when viewing the page, there is a fixed amount of gray content above and below the WebGrid. WebGrid fills the remaining space on the screen, with its own vertical scrollbar to allow users to see all of the results. When you resize the page, the WebGrid expands to fill up the extra space, keeping both gray content boxes on the screen. This is the desired behaviour.
BrokenPage.aspx is using XHTML 1.0. Notice that when viewing the page, the WebGrid expands to show all 100 results, rather than only filling the available space on the page. As a result, the lower gray content is pushed off the bottom of the screen, and a vertical scrollbar is added to the window (not the WebGrid). This is the behaviour we are looking to resolve. We would like it to work like the other page.
Note: We cannot simply switch the page to HTML 4.01 Transitional to fix this issue, as we are trying to get away from Quirks mode.
This issue is still our highest priority at the moment. As soon as you've had a chance to review the latest example, please let me know what the next step for this issue is.
Hello,
I am able to replicate the issue. It seems AutoHeight properties is not working in XHTML. I will forward this issue to our developer teams. While waiting the response, please add this attribute in your XHTML page. Notice that, without this attribute, you can see Column header alignment issue in your last sample.
<html xmlns="http://www.w3.org/1999/xhtml">
Regards,Handy
Handy,
I'm glad we've finally established what the issue is. Thank you for working with me on this. Can you please update me on the current status of this issue? This is currently a very high priority item for our development team.
Currently, I haven't received any words from our developer teams. I will keep follow up this issue to our developer teams.
My supervisor would like an update on the status of this issue. Has there been any progress?
Of course there has been some progresses in this issue. Our developer teams has been fixed some issue about this auto height. But it has not fully worked as expected yet. Please give us a little time and we will deliver it for you when it's fixed completely.
After further investigation, unfortunately, this is not a bug from ours.
The problem are located in diferences rendering behviour between HTML and XHTML.
Therefore, you need also to customize the style when inside XHTML page.
e.g
I modified your sample and customized the style. Now, it looks similiar to HTML page.
I also send you the comparation between HTML and XHTML with WebGrid stand alone in the page.
You can see that with style customization, it works fine. Please see the attachment.
Handy
Thank you for the response. Unfortunately, the page you modified (BrokenPage.aspx) does not work.
If you open the page with a small window height, and then expand the window to the full height of the screen, you should see the following errors:
1. Notice that the grid does not expand to show more rows, but only expands the beige coloured portion below the status bar.
2. Notice that at the bottom of the window, there is a large area of whitespace. This whitespace increases in size as you expand the window.
The last sample I sent you included a file called "WorkingPage.aspx". This file demonstrates how the grid should behave without these errors. I can provide screenshots of the errors mentioned above, but the forum is not allowing me to upload files.
Thank you for your continued support.
NOTE: I had a long conversation with Yudhiy on MSN and Live Meeting in which we described this problem. If you are still unclear of the current issues, please speak with him.
As I said before, it is not a bug. It is a different behaviour rendering in HTML and XHTML. You would need to adjust the style.Here, I show you the prove about white space below WebGrid control.I made 3 divs in simple sample (default.aspx) to show you that I can replicate the same problem without WebGrid.If you put <p> in the bottom <div>, you will able to see the white space. If you open in HTML doctype, it works well. That's because HTML and XHTML has some differnces behaviour in rendering its element and style.Or, try to remove <p> in BrokenPage.aspx. You will see that the white area at the bottom grid would be dissapeared.To remove the white space, simply set padding and margin to 0 in your <p>.
However, about the resize issue when resize the page, it might be an issue.When you resize the page, WebGrid should automatically resize based on the screen.However, sometimes, the resize got stuck by time out and not functioning properly.In this case, we would like to call wgDoResize(true,true) with timeout in window::onresize.WebGrid would resize when called this code.Based on your scenario, I am able to resize WebGrid when resize the screen. But I found one issue. The height is not resized. I would need more time to discuss this issue to our developer teams.
Thank you for your response. The WebGrid resize problem is exactly the issue we need resolved.
We would like for the grid to behave in XHTML or HTML strict the same as it does in my "WorkingPage" example.
My manager ready to cancel our current development project if we cannot get a resolution for this resizing issue. In other words, if WebGrid cannot resize vertically in either HTML Strict or XHTML the same as it does in HTML Quirks mode, the project will be cancelled.
Can you please give me another update on the vertical resizing issue, and when we might expect a solution?
I have sent an email and mark it as important item for your request. I will keep follow up your issue to our developer daily.
Hi Handy,
Any update? We do not need your solution right away, we just want to answer one question:
Will Intersoft fix the AutoHeight functionality so that WebGrid can function properly in Internet Explorer, in either XHTML or HTML Strict mode?
Please, just tell us yes or no, and then we can plan our business, postpone or cancel our current projects, and notify our customers. We don't need the fix immediately, but we need to know as soon as possible if you are going to fix this at all. We've been pursuing this for four months and we're very frustrated.
I have discussed with our developer teams. They will surely to fix the height and resize issue.One more thing that I need to tell you. After discussed with our developer teams, Auto height and Auto width are properties that used for old browser. Those properties are not recommended to be used anymore. Morelikely, to use Height or Witdh 100%. In the container we would need to set the actual or proper height.However, by using height 100%, we would like to adjust it a little. We will try to make it closely with AutoHeight behaviour in resizing. I would back to you asap with the solution.
It has been a week since your last update. Do you have a better idea of when we can expect a fix for this issue?
I am still looking for an update as to when we can expect a fix for this issue. Please investigate and let me know when this issue will be resolved.
I haven't received any update about the fix. I will try to ask them again.
I'm afraid my patience has finally run out. I have been trying to get a resolution on this issue since May 25th (over 3 months ago)! It seems we have finally agreed on what the issue is, and you have committed to fixing this issue. However, it has been 3 weeks since you committed to fixing the issue, and you have been unable to give me a timeline for when I can expect a resolution. This is very frustrating, and unacceptable.
I have been very reasonable and understanding up to this point, but my development team cannot accept any more delays in our schedule. Within the next few days you must provide me with a timeline of when I can expect this issue to be delayed (even a rough timeline).
Once again, I do not need the solution within the next few days, but I need an idea of how long I will have to wait for a solution.
I don't think it is possible for them to fix the problem at all as there is NO problem with Intersoft WebGrid. The problem is that in XHTML specification they changed how the elements work.
The webgrid fills it's container element height fine, the problem is in XHTML there is no way of making a container element fit 100% of the height page, this is how it is designed. A web page is meant to be conitnuosly flowing length and not be a set height like a page. In HTML DOCTYPE this si still possible though.
I see the only solution as maybe using javascript compatible with all relevent browsers to resive the container div on page load and resize to fit teh extent of teh "Window" size of browser, taking into account scrollbar etc. Then you call wgDoResize() event on webgrid to make it refit it's container. As far as I see it if wgDoresize can be called at anytime after page is loaded and the webgird resizes to fit it's container then it is wokring correctly. Put a big red border on the container element if you want proof, whether teh container is a div, a table or teh page body element.
Just to prove to you Questica support that the problem is XHTML not Intersoft the two most widely used web applications i can think off that have full screen view; Gooogle Gmail and Microsoft Outlook Webmail both use HTML doctype instead of XHTML, hence why they have full screen view in all browsers!
Use HTML doctype or use some javascript to resize the containers manually ann stop hassling Intersoft support for a porblem they have already proved to you is not their fault.
Karl,
I appreciate you taking the time to write out all your thoughts. Unfortunately we can't get the grid to function correctly in HTML Strict Mode either (quirks mode is not an option.) And the solution you proposed using wgDoResize in XHTML mode didn't work either. We have tried abolutely everything, hence this lengthy thread and our continued frustration. Intersoft has agreed that there is a bug in the software and committed to fixing it, but they haven't given us a date yet.
Put html and body element to 100% height , no margins and try following code:
setHeight();
});
maxHeight = document.body.clientHeight;
}
};
Put AutoHeight to false, and WebGrid height to 100%.
Put fix height fo HeaderContainer,for example Height="33px".
Tomislav,
Thanks for your response. Unfortunately your solution, like the others we have tried, only expand the frame of the WebGrid, not the content.
For example, assume there are 15 rows visible in the grid with the screen at its original height.
In quirks mode, as you expand the height of the window, the WebGrid will expand to show more than 15 rows. It will continue expanding with the screen, revealing more rows as it expands.
In XHTML and HTML Strict mode, the frame of the WebGrid expands with the height of the screen, but the content section does not. In other words, as you expand the screen, it will continue to show just 15 rows of data, but the beige WebGrid frame will expand with the screen.
We're waiting on Intersoft to provide an estimated date for a fix to this issue.
Please let me know if you have any deadline regarding develop application by using this control. I can help to push or give pressure to our developer teams in order to fix the issue asap.Currently, they are very busy regarding our R2 release plan.
Our original deadline for this work has already passed. However, we've been able to keep this development open in hopes that you would have a solution for us. The last possible day that we will be able to use a fix is September 21, 2011.
If you can have something for us by September 21, 2011, we would greatly appreciate it.
After investigating your scenario, it seems this is not a bug in WebGrid. Morelikely, limitation in XHTML.Example, try to discard WebGrid and only use Div with Red background in there.When resize the browser, you can see that the middle div (Red) is not resized correctly. It seems in XHTML, you would need resize it manually.For WebGrid, you would need to resize it manually when resize the browser to get the perfect result.To resize WebGrid manually, you can use SetHeight() method.
var grid = ISGetObject("WebGrid1"); grid.SetHeight("20%");
You seem to keep forgetting the issue. We've had to re-prove to you over and over for the last four months that the behaviour is a bug. I thought we were way past this. Does this mean you will not be giving us a date that this issue will be resolved?
Please re-check our posting above from June 22, 2011 at 4:04 PM. We painstakingly built a visual studio project with a working (IE Quirks) page and a broken page. Your suggestion will not cause WebGrid to behave as it does in the working page from that sample.
This is not an XHTML limitation. The function does not work in HTML Strict mode either. It only works in IE Quirks mode.
I can't believe we've gone backwards again. You already agreed on July 27th that the height resizing is a real issue. On August 9th you said you will surely fix it. You said you would try and push your developer team to come up with a fix, possibly by our September 21st deadline. We told our managers that.
I've prepared yet another sample which is attached. This one contains three pages: WorkingPage.aspx demonstrates the behaviour working correctly in IE Quirks Mode. BrokenPageXhtml.aspx shows the bug with the XHTML doctype. BrokenPageHtmlStrict shows the bug with the HTML Strict doctype.
Please respond and tell me that you remember now that this is a real issue and whether you could possibly fix it by our September 21st deadline.
WebGrid1.SetHeight(WebGrid1.HtmlObj.parentElement.clientHeight - (document.documentElement.scrollHeight - document.documentElement.clientHeight) - buffer);
buffer++;
Ok, please give me a little time. I am seeing your sample now. I responded your issue based the last conversation about resizing browser issue.
I re-iterate that Microsoft Outlook Web mail and Google mail both use quirks mode to get around this issue, it's not particular to Webgrid.
Web browsers do not allow you to fill vertical page in a cross browser friendly way.
You will need javascript that checks the container element size and scroll size as i posted previously, that script syncHeight function fixed the height issue in the broken sample. simply replace the function commented out in the broken sample provided.
intersoft caould include similar script in webgrid to do it correctly, most likely in their wgDoResize() function, but in either case be aware that browsers are not very consistent at returning content size info: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
I have seen your sample a while ago. If you were talking about gap issue with bottom <div> in 1.png, as I told you, this is not WebGrid fault. Please see my response at July 27, 2011 11:48 PM. I have given the prove there. It is because different behavior rendering in XHTML, not because WebGrid.I already explained by using 3 diffents div looks like your structure page. The gap is happened because different rendering in <p> tag. You can also see Karl's post at August 30, 2011 7:05 PM.As I said before, If you placed only WebGrid in XHTML, you might not find any issue, except for charting because it has not support XHTML yet.But if you placed WebGrid with others element and the layout is mess up, you would need to customize your style. I have suggested some workarounds for style before. This happens because you could not expect all other elements to work perfectly in XHTML without any customization.You can try to have others element without WebGrid and you will notice that you needs to set style.The style can be different with HTML doctype.
I thought you already understand this last time, that's why I agreed to check the remaining issue about WebGrid is not resized well when you resized the browser.
Please let me know if there is something that I am missing.
There is an additional issue. Our problem is not what you and Karl are describing.
I undertand the different rules that apply in the different rendering modes. I am fine with the fact that the AutoHeight/AutoWidth features only work in quirks mode, and I don't mind using javascript or any other reasonable approach to get the equivalent behaviour in another doctype. What's more, we have been able to get the WebGrid to resize with the page just the way we want through the use of javascript, months ago.
The issue is that in IE9 only the grid frame and the grid width resize correctly - the WebGrid's inner contents do not resize to the new height (other major browsers work correctly with the same page.) So we can get the perimeter of the webgrid to correctly expand/contract when the browser window size changes, and the columns expand or contract to fill the available horizontal space, but the grid does not display any more or less rows of data, only empty space when the window gets taller, or cutting off the status bar and visible data when the window gets shorter. Calling wgDoResize does not fix this issue. This is the bug we thought you acknowledged above, but it sounds like we have been miscommunicating.
I've prepared another sample, and a video, that uses the suggestions from your and Karl. The Quirks page with AutoHeight enabled demonstrates the desired behaviour. The XHTML page using your javascript solution resizes in exactly the right way by using SetHeight() and wgDoResize() but the grid's inner contents don't resize with it in IE9. Hitting the "Refresh" button in the grid footer causes the grid's inner contents to size correctly.
The video demonstrates the XHTML/Javascript resizing working correctly in Firefox and Chrome, then demonstrates the desired behaviour by showing the quirks mode page in IE9, then finally shows the XHTML/javascript resizing issue in IE9.
Hopefully this latest post will make things clear. Thanks for continuing to work with us on this issue.
Edit: the video attachment doesn't seem to be working. Here it is on YouTube.
The behaviour of each browser in rendering is also different. I can prove it. Try to remove WebGrid and have only div with Red background in the middle div. When you resize, the result would be different with HTML doctype and in other browser.Notice that, WebGrid is designed by collection of div and table element. That's why it behaves like that. You would need to adjust or customize the style for rendering.Btw, I also have suggested workaround in previous post. You will need to calculate the proper height in window::resize event and set the height by using SetHeigth() method to WebGrid.You can also consider to implement wgDoResize(), to enforce WebGrid resize it again.
Please take a closer look at the sample I just posted. It uses javascript to calculate the correct height and uses SetHeight() followed by wgDoResize. The sample and movie I provided are the result of your suggested workaround. Is there a way to get it working in IE9?
It's hard to achieve it in XHTML since the rendering is trouble some in your scenario. However, when it does have a workaround. You would need to add time out when call SetHeigth and wgDoResize.
example
function syncHeight() { var grid = ISGetObject('WebGrid1'); var newHeight = (document.documentElement.clientHeight - 250) + 'px'; if ((document.documentElement.clientHeight - 250) > 48) { window.setTimeout(function () { grid.SetHeight(newHeight); wgDoResize(true, true); }, 500); } }
Thanks for the suggestion. I'm glad we're making progress.
I tried your sample but I was unable to get any combination of timing that would make the height size correctly for IE9. It seems that wgDoResize isn't doing anything in IE9 no matter when it gets called.
I made another sample (see video below) where the SetHeight() and wgDoResize() functions are mapped to buttons, to illustrate the problem a bit better.
We're standing by for your next suggestion. Very close to our deadline now, so we appreciate your help!
The video is private. I could not see it in here. Yes, I am discussing this with our developer team reagading the height. I will let you know when I got update.
Sorry for the mix-up. The video is available now.
Ok, Thank you. Our developer is still working on that. It seems the height state is not configured well in XHTML. That's why it could not automatic resize the height. Only width that succesfully resized.
Our developer tried hard to make it better. Please try to use attached hotfix. Also, it seems, it needs to call twice SetHeight() method.
Thank you for the update. I have updated our "BrokenPage" with the example you provided, and updated WebGrid by using the new .dll's you provided.
Unfortunately, I now receive an error message when viewing your example page. I have attached the error message, and a zip file containing the example solution I used to test the updated version of WebGrid.
Can you please instruct me on how to get around this error message?
It seems the nightly build need new WebUIFramework as well. I could not send you WebUIFramework hotfixes because it is not stable. Some issues has been reported during the testing in here. I will ask our developer to fix this asap then send it to you.
Is there any update on this issue? We are standing by for the fix, please let us know as soon as it is ready.
Thanks!
Actually, It is ready. But we haven't fully tested it because we are preaparing for release r2. I afraid some errors might show because there is a major enhancement in our framework. I will discuss first to our developer first. If it is safe, I will send it to you.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname