BuyLog In
Ticket T1287147
Visible to All Users

Please change the way you size things like buttons.

created 13 days ago

The DxButton has a "SizeMode" which gives you 3 options. Small, Medium and Large. Which really means nothing. What happens if I want the button to be Extra Large ? What are the sizes really? I'm assuming they will change between Themes as well.

I have 3 buttons that are in a grid and are all set to SizeMode.Large, yet they are not all the same size.

Clipboard-File-1.png
Clipboard-File-2.png
Clipboard-File-3.png

This becomes even more apparent when the size of the page shrinks.

Clipboard-File-4.png

You'll also notice that there is no padding between buttons when stacked as opposed to side-by-side.

Would be nice if I could just specify the Width and Height of the button and be done with it.

Sign in to comment on this post

Answers approved by DevExpress Support

created 11 days ago

Hi Brien,

Size modes influence button styles such as font size, line-height, and paddings. You can see what styles are applied when you adjust the SizeMode property in the browser. For example, we set the following CSS variables for large buttons:

CSS
.dxbl-btn-standalone.dxbl-btn-primary.dxbl-lg {
    --dxbl-btn-font-size: 1rem;
    --dxbl-btn-line-height: 24px;
    --dxbl-btn-padding-x: 1rem;
    --dxbl-btn-image-spacing: 0.5rem;
}

Size modes enable you to design compact or spacious layouts, ensuring a consistent appearance. However, keep in mind that the resulting button width depends not only on the size mode but also on content width (e.g. text, image width) and custom styles.

We have three size modes: small, medium, and large. If they do not meet your needs, you can use DxButton.CssClass to adjust button width and height. In the corresponding CSS class, set the width, height, and paddings.

I hope this helps.

    Sign in to comment on this post

    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.