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

karl.ettinger@energieag.at created 7 months ago

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 Answer(s)

0

liangshiwei created 7 months ago
Support Team Fullstack Developer

Hi,

I could not access the website
0

karl.ettinger@energieag.at created 7 months ago

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

liangshiwei created 7 months ago

Support Team 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>

0

karl.ettinger@energieag.at created 7 months ago

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>

liangshiwei created 7 months ago

Support Team 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>
}

<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>

0

karl.ettinger@energieag.at created 7 months ago

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.
0

liangshiwei created 7 months ago
Support Team Fullstack Developer

Hi,

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

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

karl.ettinger@energieag.at created 7 months ago

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

liangshiwei created 7 months ago

Support Team 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>

0

karl.ettinger@energieag.at created 7 months ago

Great, thank you! The solution works really well!

Have an answer to this question? Log in and write your answer.