Intersoft Community - WebDesktop - Mozilla Firefox Rendering Issues

Mozilla Firefox Rendering Issues

Glayaar — Sun, 18 Jul 2010 23:18:15 GMT

Under such condition, UseDefaultStyle = false, you will need to overwrite the default css style by using the RowStyle and AlternatingRowStyle property. Here is the WebGrid snippet:

<RowStyle CssClass="CustomRow" />
<AlternatingRowStyle CssClass="CustomRow" />

The css class snippet:

<style type="text/css">
    .CustomRow
    {
        overflow: hidden !important;
    }
</style>

Mozilla Firefox Rendering Issues

Motser — Fri, 16 Jul 2010 10:24:03 GMT

Hi Glenn,

Thanks for your reply. I had the above already set. These changes did not make a difference. I have the Web Grids DefaultStyleMode="Elegant" but did not have the set UseDefaultStyle=true. This caused this overlapping of text in the WebGrid in firefox. Once I set this setting, the Grid performed correctly.

Thanks,

Dermot

Mozilla Firefox Rendering Issues

Glayaar — Thu, 15 Jul 2010 22:17:19 GMT

The Firefox issue could be solved by adding overflow hidden to the RowStyle and AlternatingRowStyle. Here is the snippet:

<RowStyle CustomRules="overflow: hidden;" />
<AlternatingRowStyle CustomRules="overflow: hidden;" />

However in my test, using the latest build of WebGrid 7, WebGrid 7 build 403, the style is already added in Firefox and will not cause such issue. Please try updating you control to the latest build.

Mozilla Firefox Rendering Issues

Motser — Thu, 15 Jul 2010 08:04:49 GMT

I fixed the issue highlighted with the gap appearing at the bottom of the WebDesktopWindow. This occurs when the setting AnimationStyle="VistaStyleZoom" is used in firefox. I still have the other issues of the data overlapping between the colmns.

Regards,

Dermot

Mozilla Firefox Rendering Issues

Motser — Thu, 15 Jul 2010 06:42:48 GMT

Just for some clarity, it doesnt matter what page the iframe points at in the default.aspx page, the same issue occurs. I have pointed it at random websites and the issue occurrs. Is this a bug or is there a setting I must set to make the iframe within the WebDesktopWindow take up 100% of the page in firefox.

Thanks,

Dermot

Mozilla Firefox Rendering Issues

Motser — Thu, 15 Jul 2010 05:19:27 GMT

Hi Glenn,

I made these changes but this made no difference to the issue I have. The iframe is still short by approx 100px in the example I provided. There is still a gap at the end of the WebDesktopWindow. Did these changes solve the issue for yourself? I have attached another screen shot highlighting my issue if clarity is needed. I have circled the issue in the screenshot. The iframe should take up 100% of the WebDesktopWindow.

Regards,

Dermot

Mozilla Firefox Rendering Issues

Glayaar — Wed, 14 Jul 2010 23:21:45 GMT

From my analysis of the attached sample, it seems the issue is caused by browser difference. Here is some suggestion in order to get a similar result in Firefox:

- Remove the width property in the TabItemStyle

<TabItemStyle>
    <Normal Cursor="Hand" Font-Names="segoe ui,tahoma" Font-Size="9pt" Height="100%"
        Width="100%" BackColor="White"
        BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px">
        <Padding Top="2px" Left="10px" Right="10px" Bottom="0px"></Padding>
    </Normal>
    <Over BaseStyle="Normal" BackColor="WhiteSmoke" BorderColor="#3C7FB1">
    </Over>
    <Active BaseStyle="Normal" 
        BackColor="White" BorderColor="#898C95" BorderStyle="Solid" BorderWidth="1px">
    </Active>
</TabItemStyle>

- Remove the width property in the WebTab ContainerStyle

<ContainerStyle Overflow="Auto" OverflowY="Auto" OverflowX="Auto" BackColor="White"
    BorderColor="#898C95" BorderStyle="Solid" BorderWidth="1px" Height="100%" Width="100%"
    Font-Names="segoe ui,tahoma" Font-Size="9pt">
    <Padding Top="5px" Left="5px" Right="5px" Bottom="5px"></Padding>
</ContainerStyle>

- Set the WebDesktopManager CaptionButtonStyle border width to 0px

<CaptionButtonStyle>
    <Over BaseStyle="Normal" GradientType=Vertical>
        <BorderSettings>
            <Bottom Color="Gray" />
            <Right Color="Gray" />
        </BorderSettings>
    </Over>
    <Normal BorderColor="White" BorderStyle="Solid" BorderWidth="0px" Height="17px" Overflow="Hidden"
        OverflowX="Hidden" OverflowY="Hidden" GradientType=Vertical>
    </Normal>
    <Active BaseStyle="Normal" GradientType=Vertical>
        <BorderSettings>
            <Left Color="Gray" />
            <Top Color="Gray" />
        </BorderSettings>
    </Active>
</CaptionButtonStyle>

Mozilla Firefox Rendering Issues

Motser — Wed, 14 Jul 2010 07:28:41 GMT

Hi Glenn,

I have attached a simple website to demonstrate the issue as requested. The website contains a webdesktop which launches a WebDesktop Window using an iFrame that contains a page which has a web tab on it. As you will see in firefox the iframe does not use up the full space of the window, so there is a gap down the bottom of the window with nothing on it. This project uses doc type html. Because I am using a Webtab in this demonstration and not WebGrid, this would suggest the issue is with the WebDesktop.

Regards,

Dermot

Mozilla Firefox Rendering Issues

Glayaar — Wed, 14 Jul 2010 05:46:50 GMT

Do you mins sharing the setting you are using for the WebDesktop and WebGrid in order for us to replicate the issue in our environment? We will also be very grateful if you could provide us with a simple page that could replicate the issue.

Is the page using XHTML doctype or HTML doctype? If you are using XHTML doctype, if possible please try using HTML doctype and check if the issue has been resolved.

Mozilla Firefox Rendering Issues

Motser — Tue, 13 Jul 2010 12:50:21 GMT

Hi,

I was wondering is there any specific settings that I must use for rendering the WebDesktop/WebGrid in firefox/Chrome. I host a page containing a webgrid in WebDesktop window which renders perfectly in IE8, nearly perfectly in Chrome but I have major issues in Firefox. I have attached 3 screen shots with the different issues on them. I have also attached another 2 screen shots of how they should look. (Internet Explorer)

Issues

FirefoxIssues1.jpg - The page contained in the iframes does not take up 100% of the window. The columns overlap.

FirefoxIssues2.jpg - A WebDesktop is contained with a web site. The different pages are loaded into a webdesktopwindow within the webdesktop but they do not render to the correct size. The WebDesktopWindow should take 100% of the Webdesktop. I know webdesktop is the correct size because the invoices tab shows at the bottom of the webdesktop.

ChromeIssues1.jpg - The titles take up two rows. Task bar show down the bottom (same as firefox) but this is set to not show.

Any help with this would be greatly appreciated,

Thanks,

Dermot