Current filter:
                                You should refresh the page.
                                  • Description:
                                    The main concepts described in this article:

                                    - Any solution from the Web can be applied to the DevExpress components
                                    - You can and should test styles directly in browsers and then use the result in a project
                                    - Unintended inheritance can break your layout. Override styles by providing the correct specificity
                                    - Use marker classes to apply styles to correct elements

                                    Answer:
                                    All DevExpress components consist of standard HTML elements (div, td, tr, table, ul, li and so on).
                                    It is possible to apply any solution from the Web to them. For example, let's implement a popular alignment requirement and place a button into the center of its container.

                                    First, inspect the control and its container as described at How to inspect CSS rules. The button's main element is div,  so my search query is how to align div in center.
                                    The top result at the moment of writing this article is stackoverflow's How to align a to the middle (horizontally/width) of the page
                                     where many solutions are provided.
                                    You can try each of them right in the browser:

                                    The margin solution:

                                    The alignment in both these solutions is slightly off the center. The most attentive readers probably already know what's wrong.
                                    Let's quickly debug this by checking the button:

                                    So the button is positioned incorrectly because its container doesn't occupy the page's width. The width: 660px  style is incorrectly inherited and we need to override it by using width: 100%.
                                    In some cases, it is better to temporarily assign different background styles to different containers to see how each of them is rendered on the page.

                                    The solution is ready and we can transfer it to our code.
                                    Usually, it is better to avoid using inline styles. Place your css styles into a CSS class and assign it to the controls:

                                    After refreshing the page, you see that the width: 100%  style is crossed out. This means that it is not applied because its selector's specificity is lower than the inherited one.

                                    Test the new specificity in the browser and apply it to your solution:

                                    Note that the styles are applied based on their selector.
                                    This means that you can potentially break the whole layout by implementing a small solution. A quick example: you have two menus on the page and wish to enlarge all items of the second menu:

                                    By inspecting the elements you can see that each item is the li element with the dxm-item  class:

                                    Our solution will be as follows:

                                    [CSS]
                                    li.dxm-item { padding-left: 10px; padding-right: 10px; }

                                    However, you will see that this change affects both menus because the selector applies to the whole page and both of the menu's items fall under its condition. Assign a marker CSS class to the second menu to resolve this issue:

                                    [ASPx]
                                    <dx:ASPxMenu id="secondMenu" runat="server"> <ItemStyle CssClass="enlarged" /> ...
                                    [CSS]
                                    li.dxm-item.enlarged { padding-left: 10px; padding-right: 10px; }

                                    Our ASP.NET controls allow you to add a CSS class to their inner elements or to the root container. See the {elementName}Style property or the Style's inner properties and the CssClass property respectively.

                                    What's next?
                                    - Chrome's element inspector has many useful features. You can add/remove styles on the fly, filter them, see where they come from and more. See chrome-devtools.
                                    - Learn selectors to use them with precision.
                                    - Check a CSS page's references to read about different styles, media queries and other useful stuff.
                                    - Test your page on different devices using Chrome's Toggle Device Mode button.
                                    - Browsers support styles differently. Check what is supported using https://caniuse.com/.

                                • diane halsey 09.20.2019

                                  I know you can inspect and override your css to change dxform items formatting,  my problem is how to apply custom css certain dxform editor items dynamically (in javascript), thanks  

                                • diane halsey 09.20.2019

                                  i need to dynamically apply custom css to ONLY some dataitems in editor.

                                • Anthony (DevExpress Support) 09.23.2019

                                  Hello Diane,

                                  I've created a separate ticket on your behalf (T817066: dxForm - How to apply custom css certain dxform editor items dynamically). It has been placed in our processing queue and will be answered soon.

                                0 Solutions

                                Creation Date Importance Sort by