Bug column width in UIKit admin template using if conditions

[Juergen]

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.

 

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

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?

 

[Robin S]

2 hours ago, Juergen said:

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

There's a long discussion about column width issues in AdminThemeUikit in the issues repo: https://github.com/processwire/processwire-issues/issues/480

[Juergen]

Thanks @Robin S

I havent seen this.

[ryan]

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. 

[Juergen]

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.

On the first view everything looks ok:

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:

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

[Robin S]

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.

[Juergen]

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.

[digitex]

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.

[adrian]

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

[digitex]

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

[Robin S]

2 hours ago, digitex said:

I didn't see any post addressing the big incompatibility I mentioned above.

https://github.com/processwire/processwire-issues/issues/480#issuecomment-382383357
https://processwire.com/blog/posts/pw-3.0.99/

Percentage-based widths should be the default IMO.

[digitex]

@Robin S Thanks for that. I didn't even know those options were there. I agree percentage based should be default.

[adrian]

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 ?