Popover Progressive App

[Joel]

My current scenario is... when I do a presentation from my laptop the resolution changes and my popovers are compressed left and right and it is so skinny it would starve to death in a 3 day snow-storm.  It becomes useless because there is no "minimum width" setting.  But more than just my scenario, what happens when I view this in a phone form-factor?  How do you use the Popover in low resolution and tall/skinny applications?

 

<TelerikPopover @ref="@PopoverRef"
                AnchorSelector=".popover-target"
                ShowOn="@PopoverShowOn.Click"
                Position="@PopoverPosition.Bottom"
                Offset="20">
    <PopoverContent>

        <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short">
                        <label class="col-form-label" for="firstName">First Name</label><br />
                        <TelerikTextBox @bind-Value="@FirstNameFilter"
                                        Name="firstName"
                                        Placeholder="@Constant.NoFilter">
                        </TelerikTextBox>
                    </div>
                    <div class="form-group-short">
                        <label class="col-form-label" for="lastName">Last Name</label><br />
                        <TelerikTextBox @bind-Value="@LastNameFilter"
                                        Name="lastName"
                                        Placeholder="@Constant.NoFilter">
                        </TelerikTextBox>
                    </div>

                </CardBody>
            </TelerikCard>

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short gsi-max-width-250">
                        <label class="col-form-label">Date of Birth</label><br />
                        <TelerikDatePicker @bind-Value="@DobFilter"
                                           Min="@DobMinimum"
                                           Max="@DobMaximum"
                                           Format="MM/dd/yyyy"
                                           ShowWeekNumbers="true"
                                           Placeholder="@Constant.NoFilter">
                        </TelerikDatePicker>
                    </div>
                    <div class="form-group-short gsi-max-width-250">
                        <label class="col-form-label">Sex</label><br />
                        <TelerikDropDownList @bind-Value="@GenderFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             Data="@GenderFilterOptions">
                        </TelerikDropDownList>
                    </div>

                </CardBody>
            </TelerikCard>

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short">
                        <label class="col-form-label">Group Filter</label><br />
                        <TelerikDropDownList @bind-Value="@GroupFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             Data="@GroupFilterOptions">
                        </TelerikDropDownList>
                    </div>
                    <div class="form-group-short">
                        <label class="col-form-label">Patient Filter</label><br />
                        <TelerikDropDownList @bind-Value="@PatientFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             Data="@PatientFilterOptions">
                        </TelerikDropDownList>
                    </div>

                </CardBody>
            </TelerikCard>

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short">
                        <label class="col-form-label">Patient Status</label><br />
                        <TelerikDropDownList @bind-Value="@IsActiveFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             ReadOnly="@(!IsActiveFilterEnabled)"
                                             Data="@IsActiveFilterOptions">
                        </TelerikDropDownList>
                    </div>
                    <div class="form-group-short align-bottom">
                        <label class="col-form-label gsi-color-white">Apply Filter</label><br />
                        <TelerikButton OnClick="OnFilterChanged" Class="gsi-background-color gsi-color-white gsi-width-100pct">
                            Apply Filter
                        </TelerikButton>
                    </div>

                </CardBody>
            </TelerikCard>
        </TelerikStackLayout>

    </PopoverContent>
</TelerikPopover>

[Dimo]

Hi Joel,

Depending on your needs, you can:

• Restrict how much the Popover expands or shrinks
• Use different settings, layouts, or components on different screen sizes

Example for the first option:

<TelerikPopover @ref="@PopoverRef1"
                AnchorSelector=".popover-target1"
                ShowOn="@PopoverShowOn.Click"
                Position="@PopoverPosition.Bottom"
                Class="min-sizes"
                Offset="20">
    <PopoverContent>
        I take up 50%/50% of the screen, but not less than 300px/300px
    </PopoverContent>
    <PopoverActions>
        <TelerikButton OnClick="@( () => PopoverRef1?.Hide() )"
                       Icon="@SvgIcon.X">Close</TelerikButton>
    </PopoverActions>
</TelerikPopover>

<TelerikButton Class="popover-target1">Show Popover With Min Sizes</TelerikButton>

<TelerikPopover @ref="@PopoverRef2"
                AnchorSelector=".popover-target2"
                ShowOn="@PopoverShowOn.Click"
                Position="@PopoverPosition.Bottom"
                Class="max-sizes"
                Offset="20">
    <PopoverContent>
        I take up 600px/400px, but not more than 90%/90% of the screen
    </PopoverContent>
    <PopoverActions>
        <TelerikButton OnClick="@( () => PopoverRef2?.Hide() )"
                       Icon="@SvgIcon.X">Close</TelerikButton>
    </PopoverActions>
</TelerikPopover>

<TelerikButton Class="popover-target2">Show Popover with Max Sizes</TelerikButton>

<style>
    .min-sizes {
        min-width: 300px;
        min-height: 300px;
        width: 50vw;
        height: 50vh;
    }

    .max-sizes {
        width: 600px;
        height: 400px;
        max-width: 90vw;
        max-height: 90vh;
    }
</style>

@code {
    #nullable enable
    private TelerikPopover? PopoverRef1 { get; set; }
    private TelerikPopover? PopoverRef2 { get; set; }
}

 

Regards,
Dimo
Progress Telerik

[Joel]

I'll give it a try.  Thanks.