search

MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.8k stars 1.25k forks source link

MudDatepiker , bug dialog box has the same width of the field #9314

Open dt-92 opened 2 months ago

dt-92 commented 2 months ago

Bug type

Component

Component name

MudDatePicker

What happened?

with the style width to 160 px the witdth of the associated dialog is the same size

Expected behavior

image

Reproduction link

https://try.mudblazor.com/snippet/wOweaVOHhhetHtZi

Reproduction steps

@using System.Globalization

<MudDatePicker Label=" Date" Editable="true" Date="_date" style="width: 160px" />

@code { private DateTime? _date = null; }

Relevant log output

No response

Version (bug)

7

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

On which operating systems are you experiencing the issue?

Windows

Pull Request

Code of Conduct

github-actions[bot] commented 2 months ago

Thanks for wanting to do a PR, @dt-92 !

We try to merge all non-breaking bugfixes and will deliberate the value of new features for the community. Please note there is no guarantee your pull request will be merged, so if you want to be sure before investing the work, feel free to contact the team first.

dt-92 commented 2 months ago

Any Informations ?

wojciechsmigielskijr commented 1 month ago

Work around for this to use Class instead of the inline styling.

This works fine. 

<style>
.MudPickerWidth {
width: 100px;
}
</style>

<MudDatePicker Label=" Date" Editable="true" Class="MudPickerWidth "
 Date="_date" 
  />
dt-92 commented 1 month ago

Yes But ,I USe a inialiser on c# like public class AppBaseDatePicker : MudDatePicker {

[Parameter]
public bool Enabled
{
    get => !Disabled;
    set => Disabled = !value;
}

protected override void OnParametersSet()
{
    base.OnParametersSet();
    Style = "width: 160px";

    TitleDateFormat = "dddd dd MMMM";
    Elevation = 15;
    AutoClose = true;
    Rounded = true;
    Clearable = true;
    ////    Color = Color.Info;
    ShowWeekNumbers = true;

    PreviousIcon = Icons.Material.Outlined.KeyboardDoubleArrowLeft;
    NextIcon = Icons.Material.Outlined.KeyboardDoubleArrowRight;
    AdditionalDateClassesFunc = RedSunday;

}