Issue with RadWindow title bar appearance on mobile screen in classic render mode for MetroTouch skin

[SUNIL]

I checked the demo at https://demos.telerik.com/aspnet-ajax/window/examples/rendermodes/defaultcs.aspx?skin=MetroTouch with render mode set to classic in Chrome's Dev Tools > Mobile device emulator. I noticed a vertical line between the td cells in the title bar row as shown in screenshot below. I also noticed a similar issue with Metro skin in classic render mode. If I view the same in non-mobile mode in Chrome then this issue disappears. Perhaps, its some styling issue, but I could not find any CSS causing this.

It makes the title bar look non-uniform and not good in appearance.

What is causing the break among the td cells in the title bar for this case? (i.e. vertical line can be seen where the first td cell in title bar ends and then where the third td cell begins)

However, I did find a workaround solution using the  jquery code below. 

$(".RadWindow:visible").each((index, emt) => {
    $(this).find("tr.rwTitleRow td.rwTopLeft, .RadWindow tr.rwTitleRow td.rwTopRight").css("display", "none");
    $(this).find("tr.rwTitleRow td.rwTitlebar").attr("colspan", "3");
});

[Vasko]

Hi SUNIL,

The issue you are experiencing with the RadWindow title bar in classic render mode on mobile screens is likely due to the way the classic render mode handles styling. Here are some insights and suggestions:

Possible Cause: The classic render mode uses background images for styling, which may not scale well on mobile devices. This can result in visual artifacts like the vertical lines you are seeing. These artifacts occur because the background images do not adapt to the smaller screen sizes, leading to breaks between table cells (td) in the title bar.

Workaround: Your jQuery workaround effectively hides the problematic table cells (td.rwTopLeft and td.rwTopRight) and adjusts the colspan of the td.rwTitlebar to span across three columns. This simplifies the title bar structure, removing the visible lines between cells.

Alternative Solution: Consider switching to the Lightweight render mode, which uses font icons instead of background images. This mode is generally more responsive and adapts better to different screen sizes, including mobile devices. You can configure this in your web.config file:

• <add key="Telerik.Web.UI.RenderMode" value="lightweight" />
  

By addressing these aspects, you should be able to achieve a more uniform appearance for the RadWindow title bar across different devices.

Regards,
Vasko
Progress Telerik