Jump to content

Bug column width in UIKit admin template using if conditions


Juergen
 Share

Recommended Posts

Hello I want to know if others have discovered the same issue with the UIKit admin theme.

If you want fe 3 cols in a line and if you have a "show if condition" the grid will not be added correctly. Take a look at the following images.

 

1) Everything is ok. Each column width was set to 33%. The last field in the column has a dependency to the field in the second column.

Screenshot(1).thumb.png.e54cbc095137884b7c01602be0feea25.png

 

After changing the select value of the second field the following happens:

Screenshot(2).thumb.png.411a8e60bed6ab6260922f50d830d922.png

As you can see the third field which should be 33% float to the next line and has the UIKit class "uk-width-2-3@m" instead of "uk-width-1-3@m" or "uk-width-expand".

Can someone confirm this behaviour?

 

  • Like 2
Link to comment
Share on other sites

While I couldn't duplicate the issue exactly as mentioned above, I did start to see issues when using rows of columns that don't quite add up to 100% and a showIf condition was involved. There also seemed to be a bit of a random element to it when the uk-width-expand class got involved (potentially a bug in Uikit). I found I could avoid it by making sure that the columns added up to 100%, so I adjusted the threshold in AdminThemeUikit to round up to 100% when the columns add up to 95% or more. I'm hoping this might fix the issue that you observed, where your columns added up to 99%. If you get a chance to try it on the dev branch, please let me know. Thanks. 

Link to comment
Share on other sites

Thanks @ryan

I have downloaded the uikit admin template from the dev branche, but unfortunately the problem is still there. Now it is not in the last column but in the second one.

Afterward I will try to show you what happens.

These are the column widths in my template settings for the 4 fields. Remember the last 2 fields changes depending on the option selected in the second field. So the field named "repeatuntilmonthtype" is a select option field. Depending on its settings the field "repeatuntilmonthnumber" or "repeatuntilmonthdate" will be displayed. Both field have a length of 34% to fit 100% at all.

Screenshot(7).thumb.png.12e92c76c51a3ee7a31342f8bc977238.png

On the first view everything looks ok:

Screenshot(8).thumb.png.92d8d3da9ae05ff59dcde54e75c8bad0.png

Here are the corresponding CSS-classes for each column (from first to last) which were added to the li-tag:

First row:
Inputfield InputfieldInteger Inputfield_repeatmonthsnumber InputfieldStateRequired InputfieldStateRequiredIf InputfieldColumnWidth InputfieldColumnWidthFirst uk-first-column uk-width-1-3@m InputfieldRowFirst

Second row:
Inputfield InputfieldSelect Inputfield_repeatuntilmonthtype InputfieldStateRequired InputfieldColumnWidth    InputfieldStateChanged uk-width-1-3@m InputfieldRowFirst

Third row:
Inputfield InputfieldInteger Inputfield_repeatuntilmonthnumber InputfieldStateShowIf InputfieldStateRequiredIf InputfieldColumnWidth uk-width-1-3@m InputfieldColumnWidthLast InputfieldStateRequired InputfieldRowFirst

 

After changing the option in the select field (field in column 2) it looks like this:

Screenshot(9).thumb.png.d92df6e9183a632cf745b98a185876c6.png

So this looks like the same problem like in my post before:

Here are the CSS-classes:

First row:
Inputfield InputfieldInteger Inputfield_repeatmonthsnumber InputfieldStateRequired InputfieldStateRequiredIf InputfieldColumnWidth InputfieldColumnWidthFirst uk-first-column uk-width-1-3@m InputfieldRowFirst

Second row:
Inputfield InputfieldSelect Inputfield_repeatuntilmonthtype InputfieldStateRequired InputfieldColumnWidth    uk-width-2-3@m InputfieldStateChanged InputfieldRowFirst

Third row:
Inputfield InputfieldDatetime Inputfield_repeatuntilmonthdate InputfieldStateShowIf InputfieldStateRequiredIf InputfieldColumnWidth InputfieldColumnWidthFirst uk-first-column InputfieldNoFocus InputfieldColumnWidthLast uk-width-expand InputfieldStateRequired uk-grid-margin

 

Please notice the CSS-class of the second field has changed to "uk-width-2-3@m" which should be "uk-width-1-3@m". The CSS class of the last column is now correct with "uk-width-expand", but "uk-width-1-3@m" should be better. So the main problem is now in the CSS class of the second column. Previously the problem was located in the third (last) column.

Only to mention: All these fields will only be displayed if a checkbox is set to true (another dependency). I dont know if this is important to know or not.

Best regards Jürgen

  • Like 1
Link to comment
Share on other sites

13 hours ago, Juergen said:

These are the column widths in my template settings for the 4 fields. Remember the last 2 fields changes depending on the option selected in the second field. So the field named "repeatuntilmonthtype" is a select option field. Depending on its settings the field "repeatuntilmonthnumber" or "repeatuntilmonthdate" will be displayed. Both field have a length of 34% to fit 100% at all.

The widths you have defined wouldn't work on any of the core admin themes. When you want a set of fields to all display on a single row, their widths must sum to 100% disregarding show-if conditions. The widths you have defined sum to 134% so they will not display on the same row.

When you have show-if conditions where only one of the show-if fields will display at once, divide the remaining width in the row between the show-if fields. So in your row you have two fields that always show, totaling 66% width. That leaves 34% of width to divide between two show-if fields. So give each of those fields a width of 17%. When either of the fields shows its width will be actually be expanded beyond 17% to fill up the row.

  • Like 3
Link to comment
Share on other sites

Hello @Robin S

Thanks for this information. I have set the width of the last 2 cols to 17% and now it works. It doesn`t seem very logical to me, because I have thought that the width of the non visible col will be automatically set to 0%, but dividing it by two solves the problem. Thousand thanks, you have made my day!! Would be great if this info will be added to the docs.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

I'm still experiencing problems with UIKit and column widths. One of the biggest selling features of PW is that it "makes no assumptions on how you choose to work" which is very powerful but now thanks to UIkit it is dictating how templates are laid out.

The biggest issue is that there is a column width slider that allows adjustments in increments of 1% which is clearly not supported by UIkit. Maybe it's time to ditch the slider and replace it with a series of radio buttons allowing between 1 to 6 columns so admins don't start making custom adjustments like they used to be able to do.

Link to comment
Share on other sites

@digitex - I agree that there are still some big issues with this. Setting widths to use percentage-based widths in the Uikit theme settings seems to help with many of the issues, but definitely not all.

Have you seen this mammoth issue thread: https://github.com/processwire/processwire-issues/issues/480 (linked above by Robin).

The default admin theme definitely works better than Uikit on this front.

  • Like 1
Link to comment
Share on other sites

@adrian Yes I read through that thread, maybe not every post, it's a whopper. I didn't see any post addressing the big incompatibility I mentioned above. I like the look of UiKit better than the default, it's more modern and slick but I used to enjoy being able to set custom widths in unconventional setups e.g.: Model Name (50%) Secondary Name (checkbox 15%) Second Model Name (visible only if checkbox is checked 35%). All widths equal 100% but it doesn't work with UiKit (I tried) which is a bummer but mostly frustrating because I have the ability to set those weird, unconventional widths due to the column width config being a slider that uses 1% increments.

If it's not possible to make UiKit work with any custom width combo then the slider should probably not be there encouraging it.

A minor gripe.

Link to comment
Share on other sites

On 6/10/2020 at 11:30 AM, adrian said:

Setting widths to use percentage-based widths in the Uikit theme settings seems to help with many of the issues, but definitely not all.

I did mention that above ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...