SchedulerPopupSettingsBase.Height Property

Specifies the height of the pop-up Scheduler element (extended/compact appointment form or tooltip).

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(null)]
[Parameter]
public virtual string Height { get; set; }

Property Value

Type	Default	Description
String	null

The element height in CSS units.

Remarks

Use the Width and Height properties to specify the pop-up element size in CSS units. Note: an appointment form (compact or extended) automatically displays a scroll bar when the content height is greater than the element height.

You can use the following properties to resctrict the element size:

Absolute Height

You can specify the pop-up element size in absolute units, such as pixels and inches. If you set this property to a floating-point value, the element uses the AwayFromZero operation to convert this value to an integer in pixels.

Extended Appointment Form
Compact Appointment Form
Appointment Tooltip

razor

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerFormSettings Height="600px" Width="1000px" />
    </PopupSettings>
</DxScheduler>

razor

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerCompactFormSettings Height="350px" Width="400px" />
    </PopupSettings>
</DxScheduler>

razor

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerTooltipSettings Height="150px" Width="270px" />
    </PopupSettings>
</DxScheduler>

Relative Height

You can define the pop-up element size in relative units: viewport width (vw) and height (vh), element font size, etc. The following markup specifies the element size in em:

Extended Appointment Form
Compact Appointment Form
Appointment Tooltip

razor

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerFormSettings Height="40em" Width="50em" />
    </PopupSettings>
</DxScheduler>

razor

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerCompactFormSettings Height="30em" Width="40em" />
    </PopupSettings>
</DxScheduler>

razor

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerTooltipSettings Height="12em" Width="17em" />
    </PopupSettings>
</DxScheduler>