فتح مغلق

In the smartphone view, the line spacing within the fields block is larger than the line spacing between the fields blocks. #6991


User avatar
0
karl.ettinger@energieag.at خلقت
  • ABP Framework version: v8.0.0, v8.0.3
  • UI Type: Blazor Server
  • Database System: egal
  • Steps to reproduce the issue:

Hi, in the smartphone view, the line spacing within the fields block is larger than the line spacing between the fields blocks.

Example application: https://powershare.energieag.at/s/C5YiN5ozG9ZrPdT see picture: "Muster Abstand zwischen Fields.png"

Please request access password by e-mail


10 إجابة (إجابات)
  • User Avatar
    0
    liangshiwei خلقت
    فريق الدعم Fullstack Developer

    Hi,

    I could not access the website

  • User Avatar
    0
    karl.ettinger@energieag.at خلقت

    Hi,

    Link https://powershare.energieag.at/s/C5YiN5ozG9ZrPdT should work now Otherwise this one: https://cloud.ke-soft.de/s/WeMpXQBnFCGC4TL

    Password for the download of both: #\2z\TwPyJ,rYh1

  • User Avatar
    0
    liangshiwei خلقت
    فريق الدعم Fullstack Developer

    You can try

    <div class="row">
        <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop">
            <Check TValue="bool">Check 1.1</Check>
        </Field>
        <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop">
            <Check TValue="bool">Check 1.2</Check>
        </Field>
        <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop">
            <Check TValue="bool">Check 1.3</Check>
        </Field>
    </div>
    <div class="row">
        <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop">
            <Check TValue="bool">Check 2.1</Check>
        </Field>
        <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop">
            <Check TValue="bool">Check 2.2</Check>
        </Field>
        <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop">
            <Check TValue="bool">Check 2.3</Check>
        </Field>
    </div>
    
  • User Avatar
    0
    karl.ettinger@energieag.at خلقت

    hi,

    unfortunately, I cannot use this approach in the concrete project, as the user can dynamically configure the display of the fields at runtime. The Display property is used for this. If all fields below "Fields" are now hidden, "Fields" must know this, because otherwise the display is no longer correct. In this case, the fields above "Fields" and below "Fields" are no longer displayed correctly.

    <Fields Display="@FieldDisplay.GetDisplayRow(1)"> <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_1"))"> <Check TValue="bool">Check 1.1</Check> </Field> <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_2"))"> <Check TValue="bool">Check 1.2</Check> </Field> <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_3"))"> <Check TValue="bool">Check 1.3</Check> </Field> </Fields> <Fields Display="@FieldDisplay.GetDisplayRow(2)"> <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_2_1"))"> <Check TValue="bool">Check 2.1</Check> </Field> <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_2_2"))"> <Check TValue="bool">Check 2.2</Check> </Field> <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_2_3"))"> <Check TValue="bool">Check 2.3</Check> </Field> </Fields>

  • User Avatar
    0
    liangshiwei خلقت
    فريق الدعم Fullstack Developer

    You can try :

    @if(FieldDisplay.GetDisplayRow(1))
    {
       <div class="row">
           <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_1"))">
           <Check TValue="bool">Check 1.1</Check>
           </Field>
           <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_2"))">
           <Check TValue="bool">Check 1.2</Check>
           </Field>
           <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_3"))">
           <Check TValue="bool">Check 1.3</Check>
           </Field>
       </div>
    }
    

    Or

    <div class="row" style="display:@(FieldDisplay.GetDisplayRow(1) ? "none" : "block")">
       <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_1"))">
       <Check TValue="bool">Check 1.1</Check>
       </Field>
       <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_2"))">
       <Check TValue="bool">Check 1.2</Check>
       </Field>
       <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_3"))">
       <Check TValue="bool">Check 1.3</Check>
       </Field>
    </div>
    
  • User Avatar
    0
    karl.ettinger@energieag.at خلقت

    hi,

    thanks for trying to find solutions, but I am not willing to reprogram all pages of my project because of a Blazorise error, as all "FieldDisplay.GetDisplay..." methods return an "IFluentDisplay". An If alone is not enough! It can be different on a smartphone than on a desktop or tablet and that's what the Display property is for!

    As a licensee of ABP, I ask you to report the error to Blazorise so that they can correct it.

  • User Avatar
    0
    liangshiwei خلقت
    فريق الدعم Fullstack Developer

    Hi,

    You also have a license of Blazorise(included in ABP).

    You can get support from Blazorise: https://blazorise.com/support Thanks

  • User Avatar
    0
    karl.ettinger@energieag.at خلقت

    hi,

    As we pay for the support of ABP.IO Commercial, where Blazorise is included, I expect ABP.IO to clarify the error with Blazorise.

    Kind regards Karl

  • User Avatar
    0
    liangshiwei خلقت
    فريق الدعم Fullstack Developer

    Hi,

    I'm not sure this is a bug with Blazorise, and I can't open a ticket on the Blazorise support website( since I'm not a member of the Blazorise team)

    This is a solution, use Row instead of Fields, You can replace the code globally using vs code.

    <Row Display="@FieldDisplay.GetDisplayRow(1)">
       <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_1"))">
       <Check TValue="bool">Check 1.1</Check>
       </Field>
       <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_2"))">
       <Check TValue="bool">Check 1.2</Check>
       </Field>
       <Field ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnDesktop" Display="@(FieldDisplay.GetDisplay("Check_1_3"))">
       <Check TValue="bool">Check 1.3</Check>
       </Field>
    </Row>
    
  • User Avatar
    0
    karl.ettinger@energieag.at خلقت

    Great, thank you! The solution works really well!

Made with ❤️ on ABP v8.2.0-preview Updated on مارس 25, 2024, 15:11