BuyLog In
Ticket T1284825
Visible to All Users

How to set width of dxprogressbar and locate label

created 4 days ago

Hi,

I have two questions for usage of a dxprogressbar
#1
How do I ensure a dxprogressbar fills the width 100%? In the screenshot you can see how the textbox's width follow the window, but the dxprogressbar does not
#2
Is there a way for me to place the label below and to the left?

Razor
<DxFormLayout CaptionPosition="@CaptionPosition.Horizontal" CssClass="user-information">

   <DxFormLayoutItem Caption="Role" ColSpanMd="12">
     <Template>
       <DxTextBox @bind-Text="@Role" ReadOnly="true"></DxTextBox>
     </Template>
   </DxFormLayoutItem>

   <DxFormLayoutItem Caption="User id" ColSpanMd="12" BeginRow="true">
     <Template>
       <DxTextBox @bind-Text="@UserId" ReadOnly="true"></DxTextBox>
     </Template>
   </DxFormLayoutItem>

   <DxFormLayoutItem Caption="API Requests" ColSpanMd="12" BeginRow="true">
     <Template>
       <DxProgressBar ShowLabel="true" Label="@APIRequestsLabel" Thickness="17px" Value="@APIRequestsPercentage" LabelPosition="ProgressBarLabelPosition.Bottom">
       </DxProgressBar>
     </Template>
   </DxFormLayoutItem>

   <DxFormLayoutItem Caption="API AccessKey" ColSpanMd="12" BeginRow="true">
     <Template>
       <DxTextBox @bind-Text="@ApiAccessKey" ReadOnly="true"></DxTextBox>
     </Template>
   </DxFormLayoutItem>

   <DxFormLayoutItem Caption="Developer tools active?" ColSpanMd="12" BeginRow="true">
     <Template>
       <DxCheckBox @bind-Checked="@UserState.DeveloperToolsActive"></DxCheckBox>
     </Template>
   </DxFormLayoutItem>

   <DxFormLayoutItem ColSpanMd="12" Visible="@ShowException">
     <Template>
       <ExceptionView Exception="@ExceptionInfo" />
     </Template>
   </DxFormLayoutItem>

 </DxFormLayout>
Sign in to comment on this post

Answers approved by DevExpress Support

created 3 days ago

Hello Torben,

To achieve your goal, you can specify the following CSS rule:

CSS
dxbl-progress-bar {
    width: unset !important;
}

This way, the default DxProgressBar width will be unset and the specified form layout item's ColSpanMd value will take precedence.

Regarding the position of the label, you can also use CSS to change its placement. For instance, you can implement the following CSS rule as well:

CSS
.dxbl-progress-bar-label {
    align-self: start;
}

For more information on how to style inner elements of our components, refer to the following help topics:

Regards,
John

    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.