Issues with controls and CSS

[John]

Whilst adding various RAD controls to my application I have come across quite a few cases where because I have altered default styling of certain HTML tags the RAD controls do not appear correctly. I would expect that the RAD controls would override the default styling in these cases.

Some examples of this are:

TD: Any padding or borders are not overriden in RAD Editor and the dialogs do not appear correctly.

LI: if a background image is applied many RAD controls do not look correct, eg. tree view, editor tool bar and dialogs.

To get around this I simply need to put various fixes in my CSS file, eg:

 

.RadComboBoxDropDown ul li, .rtsLI, .reEditorModes li, .rtLI, .rmItem, .rwControlButtons li
{
    background-image: none;
}
.RadWindow TD
{
    border: 0;
    padding:0;
}

But this is a nuisance to have to add these fixes everytime I notice an issue. I would expect that all RAD controls would override all CSS values and I think this should be fixed.

[Bozhidar]

Hi John,

If you have created a custom stylesheet where you have set any global CSS styles to elements such as: TABLE, TR, TD, UL, LI, A etc. it is expected that some of the controls will be broken. When you are using third party controls, you should not use global CSS styles. If you have in your custom CSS padding, margin and border globally applied to a LI element, it is expected that styles to be applied to all LI elements on the page.

We could not predict what kind of styles that are possible to be applied to that LI element in order to prevent it to be broken, and it is not a common and wise practice. Firstly, it is not possible to protect the element from all global overrides, and second - that will increase the CSS file a lot.

To ensure that the controls will behave properly, you should use CSS classes for your custom HTML elements.

All the best,
Bojo
the Telerik team

[John]

There are reasons why in some cases there is a need to set global CSS styles to some HTML elements and I don't think it is unreasonable to expect that the various RAD controls styles should set all CSS values so that they can accomodate any changes. Is it unreasonable for RAD Editor dialogs to be broken simply because the default padding for the TD element is not set to zero? I am very suprised that this has been overlooked.

[Bozhidar]

Hi John,

Yes, sometimes it is useful and good to have global CSS styles, but when working with third party controls, it could be painful. Telerik developer could not predict all of the possible CSS styles, that could be implemented into an application and to predefined them. Let`s take a look at possible CSS styles that could be implemented into a table cell, and note that these are about the half possible:

td
        {
            background: #000;
            background-color: #000;
            background-image: url(image.jpg);
            background-position: 0 0;
            background-repeat: no-repeat;
            border: 1px solid red;
            border-bottom: 1px solid blue;
            border-left: 1px solid blue;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            border-collapse: collapse;
            color: #000;
            direction: rtl;
            display: inline-table;
            empty-cells: hide;
            float: left;
            font-family: Arial;
            font-style: 12px;
            font-variant: small-caps;
            font-weight: bold;
            height: 30px;
            letter-spacing: 4px;
            line-height: 30px;
            margin: 20px;
            margin-left: 5px;
            margin-top: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
            padding: 20px;
            padding-left: 5px;
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
            overflow: auto;
            position: relative;
            table-layout: fixed;
            text-align: right;
            text-decoration: underline;
            text-indent: 20px;
            text-transform: uppercase;
            vertical-align: middle;
            visibility: visible;
            white-space: nowrap;
            width: 200px;
            word-spacing: 5px;
        }

If we should predefined them for each control, for all all HTML elements, or even for the most used such as: TABLE, TR, TD, UL, OL, LI, DIV, SPAN, A, INPUT, SELECT, TEXTAREA, HTML, BODY, IMG - the CSS file will become enormous and that will decrease the performance a lot. In that case I think most of the developer would prefer to apply some CSS using CSS cascades from where the power of CSS comes. If we ignore the fact with increasing the files, the fact that a lot applications will be broken still exists. And what will happen when new CSS properties will be present, should we predefined them again in all possible controls? It is not common practice for thrif party web based applications to predefine all possible CSS styles. The common practice is when extending them to use a set of predefined CSS classes e.g. - .myClassName td.

Kind regards,
Bojo
the Telerik team

[John]

No point arguing but I don't think that a simple CSS reset would add much. Search "css reset" for more efficient ways of doing this than your example.

[Bozhidar]

Hi John,

The CSS reset is usually used to reset the browser default padding and margins. I agree, that for a single application this could be useful, and will give you better browser compatibility control over the HTML elements, but not when working with third party controls. In the case of RadEdiotr, you could find this article to be useful: Overriding Global CSS Styles Inherited by RadEditor.

Best wishes,
Bojo
the Telerik team