Bug Report T335056
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

HotFixes for version 15.2.4 break HTML Table rendering if doctypeMode="Xhtml"

CSS rules from the System.css file change the external layout

created 9 years ago

[DevExpress Support Team: CLONED FROM T319200: ASPxPopupControl - A modal popup is hidden behind another one when a nested drop-down editor is selected]
Hello Alessandro,
I downloaded the hot fix DevExpressComponents-15.2.4.16013.exe installed it. I am running DevExpress 15.2.4.
After the hot fix installation I noticed that all my tables had collapsed border by default. I went into source code to figure out the problem and found out that hot fix modified  DevExpress.Web\Css\System.css. The code that was added is:
/* td paddings and spacing styles */
table
{
   border-width: 0;
   border-collapse: collapse;
   border-spacing: 0;
}
td,
th
{
   padding: 0;
}
The effect of this is that it affects all tables across the board which affects the original design drastically. This is not acceptable it must be fixed ASAP!
Thank you
Dmitri.

Show previous comments (3)
DE DE
Dmitry Evstratovski 9 years ago

    Hi Jenny,
    Thank you for taking case of the issue. Please let developers know that the same applies for styles
    td,
    th
    {
      padding: 0;
    }
    this will affect padding of all td and th tags. Same rules should apply - they must create separate classes and use them on the elements they want to change, not across all of them as they did here.
    Thank you
    Dmitri.
    PS: Jenny, this is an urgent matter. It is not just one control that was affected but the entire site design for us.  I understand that your team is working on the solution, however please keep in mind the urgency of the matter.
    We need the hot fix because it is fixing improper behavior of the other controls, but we cannot accept the default styles on the tags described in the original post.

      Jenny
      I'd just like to add that this issue is causing us a major problem as well.
      Regards
      Don

        While I have DevEx 15.2.5 installed on one of my sites and I didn't see a problem, I just updated to 15.2.5 on my second site and I'm having the same problem described above. You created CSS for a Major component the is site wide. I'm just now digging into it and while I seem to have most of the site working fine now, I'm still finding a couple of spots where my form just doesn't look right because you put in CSS for Table and TD. I can't imagine why that should have been acceptable. There was a lot of explanation that you gave but I don't understand a lot of it on first glance and again, you gave CSS for a Table for gosh sakes. Tables are used everywhere even though we should be weening off of them. Just my 2 cents.

        Answers approved by DevExpress Support

        created 9 years ago

        Hello,

        Thank you for your patience. Having researched this issue, we have concluded that it is caused by the following reason:

        By default, different tags (such as the table, td, and th that are widely used in DevExpress ASP.NET controls' rendering) may have different appearance in different browsers (according to their default user agent stylesheets). Usually, the so-called "reset css" or "normalize css" technique is used to make styling of all/certain HTML elements/tags consistent in different browsers.

        A similar technique is used when placing any visual DevExpress ASP.NET control to the form. However, the related CSS only resets/normalizes the default table, td, and th tags appearance, but does not specify some pre-defined/custom appearance. Applying custom CSS classes to all tags (table, td, th) to be reset/normalized may significantly increase the volume of the resultant HTML rendering (because numerous HTML tags for different visual elements may be rendered).

        If you need to specify some non-default (i.e., non-normalized, but custom one) appearance for certain tags, simply place the corresponding CSS ("inline" or separate files) to the "head" tag.

        Please note that this technique may cause unexpected visual effects. See the KA18769: CSS - Conflicts when applying global CSS selectors for common HTML tags (table, etc.) KB Article for more information.

        Let us know if you need further assistance with customizing styles in your real affected project. We will be happy to help you.

          Show previous comments (1)
          EP EP
          Eugene Paradizov 9 years ago

            Hi MIke,
            Your response is not appropriate, in my opinion. DevExpress just changed the way an HTML tag is rendering across the board, whether or not the tag is part of DevExpress control or not. This is absolutely unacceptable. Plus, you can imagine that other non-DevExpress components or controls may be used in the same project, can't you? With this late fix of yours, you changed their behavior as well. You cannot assume the role of an all-knowing entity (God?) and dictate how certain HTML tags are to be rendered for the whole site. Please undo this as soon as possible, as this is completely unacceptable.
            Thank you
            Eugene

            EP EP
            Eugene Paradizov 9 years ago

              In addition to what I said earlier, I would like to add that I looked at KA 18769 article that you referred to. It actually outlines the appropriate behavior that DevExpress claims to be following, just not in this particular case. For example, these statements are from the article you referred to:
              -------------------------
              Currently, we offer the following solutions for the mentioned scenarios:
              - Standard Visual Studio project templates:
              Take special note why it is recommended to use DevExpress project templates when creating a new application from scratch.

              1. Our project templates do not include global styles that might implicitly affect other 3-rd party controls/elements derived from regular HTML elements.

                - Custom (legacy) stylesheets with global CSS selectors:
                When defining your own stylesheets (or you have existing legacy stylesheets), it is recommended to use the CSS classes (rather than the global) with unique names. This approach allows you to apply styling for the specified HTML elements only and does not affect 3rd party control elements.
                -------------------------
                As you can see, the rules above about making CSS classes and not affecting regular HTML elements are the rules we should all follow, including DevExpress.
              Mike (DevExpress) 9 years ago

                Hello,

                Thank you for your valuable feedback and patience. We have resolved this issue in the context of the T337390: HotFixes for version 15.2.4 break HTML Table rendering if doctypeMode="Xhtml" report. You are welcome to download and install the hotfix from that report, upgrade your application and check if the issue goes away. We look forward to your feedback once you have had the opportunity to install and check the new build.

                Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

                Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.