Layout: <select>form element values are obscured for smaller elements</select>

Keyser Soze

Running pfSense: v2.3.b.20160324.1452

This affects Google Chrome and IE when using v 49.0.2623 and v11.0.9600 respectively. Firefox v45.0.1 seems to display these elements properly.

See attached screenshot from DNSBL Feeds, Format and State options.

It's like this in several other places too wherever small select form elements with short options like On/Off are present such as the State: selections for the Easylist Feeds on the DNSBL EasyList page.

DNSBL_FEEDS.jpg_thumb

BBcan177

Hi Keyser Soze,

That tab uses pkg_edit.php and the "Select" option is quite bulky in my opinion due to the current CSS settings.

When your viewing that page with a small screen size, you will notice the small width for the Select options. If I change the "Width" settings, then the Source and Header/Label input fields become a lot smaller… If the Devs change the CSS settings, I will revisit this.

Keyser Soze

I am using a win7 PC with browser set at approx 1024 width.

Yes, it looks like all the form elements are sharing the same .form-control class from Bootstrap with a small bit of overriding options set via a .form-control definition in pfSense.css, so changing that class to fix this could potentially bung other form elements elsewhere.

However, changing the padding for the .form-control located in pfSense.css (via dev tools in browser) as follows improves this a lot for me:

Old:
padding: 0 6px;

New:
padding: 0 0 0 4px;

A proper fix might entail select elements being specifically targeted via their own class(es).

NOYB

Possible to add "col-sm-2" class? Would that help? Looks like it's currently the equivalent of "col-sm-1".

Keyser Soze

@NOYB:

Possible to add "col-sm-2" class? Would that help? Looks like it's currently the equivalent of "col-sm-1".

I spent a couple hours looking at this, and sadly, the interface/tools provided to a developer for integrating packages seem to be extremely limited in regards to working with the GUI. It seems no special styling consideration was applied for anything but "small" devices. Perhaps the idea here is to just get stuff converted to work with bootstrap, and then worry about back-filling cosmetic details later.

"col-sm-2" could be used if the delete button was simply relocated to the next row which would free up 2 columns in Bootstrap's 12 col layout, one column each could then be applied to the two <select>elements presently using "col-sm-1" that are not legible. This works great when you change the HTML around in your browser but I don't really see a way to make that happen for real, there is a lot of stuff going on behind the curtain outside of the package that builds the form, and I don't see that the delete button can even be accessed or controlled via the package XML, custom styling is not provided for at all from within in the GUI XML file that I can see, widths are just plain numeric values which are are turned into markup elsewhere.Format Select option that uses "col-sm-1": Format format select 1 <option>Autoauto</option> <option>RSyncrsync</option> autotl: dr; version: There is no room at the inn. There is no room to place all of this on a single row within the present design for resolutions between 766 and 1200px width unless you can reclaim 2 columns from somewhere. You could potentially get this space back from 3 places: Remove the 'DNSBL' label (2 columns), Move the Delete button to its own row (2 columns), or shorten the 'Source' field. The first two options are unsupported unless I am missing something and the last option trades one usability problem for another, at best you could shorten 'Source' by 1 column. @BBcan177, I did not realize you were the package author. You have both my gratitude and sympathy simultaneously.</select>

BBcan177

Thanks,

I brought this up here:
https://forum.pfsense.org/index.php?topic=103648.0

Also posted in Redmine here:
https://redmine.pfsense.org/issues/5676
https://redmine.pfsense.org/issues/5680

The Devs indicated that they would look at changing the "Delete" button to an FA Trashcan Icon post 2.3 release/RC … As that involves more testing with other pages that use the "Delete" JQuery code... But the Trashcan could probably be added (concat) to the last "Select" column so it doesn't use up one of the Bootstrap columns...

This however, doesn't affect the functionality of the package... Just an issue at lower screen size... Once the Devs have made changes to this code, I will get it integrated....

Keyser Soze

@BBcan177:

This however, doesn't affect the functionality of the package… Just an issue at lower screen size... Once the Devs have made changes to this code, I will get it integrated....

Indeed, no functionality issues, readability/UX usability issues only at Medium (md) resolutions.

Forgive me for the rehash of this, and thanks for the links and info. I make plugins and do some light UI/UX work for some other projects as I have time, and the peculiar way this is being "templated" via XML is not something I have really encountered before. I was expecting there would be a lot more fine-grained control available of the layout given Bootstrap is the target framework.

Thanks again!