Styling Select Field in Backend

10 posts by 4 authors in: Forums > CMS Builder
Last Post: January 25, 2017   (RSS)

By In-House-Logic - January 19, 2017 - edited: January 19, 2017

Any advice on increasing the height of a Select field in the backend editor? The current default seems to be hardcoded with a 'size="5"'. In a browser DevTools I can apply an override style like "min-height: 10em;" and that works. But without a field-specific class to hang this on, it's not able to bind to the element. Am going to explore some advanced selectors to see if I can find an option, but would appreciate any feedback.

UPDATE:

In case is helps anyone, I found a solution that works in my specific case. The select field is given a name="required_game[]" attribute, so I was able to add:

select[name~="required_game[]"] {min-height: 40em !important; font-size: 90%;}

to the cmsAdmin/custom.css file.

J.

By ross - January 20, 2017

Hi there

Thanks for posting.

You are on the right track with how you set that up. 

The field names like that are fairly new so anyone else wanting to try this will need to make sure you are on as late a version as possible.

Let me know any questions.

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

By mizrahi - January 23, 2017

Any chance we can get a class added to required fields? been asking for this for quite awhile. or at least a asterisk added after the label by default?

By In-House-Logic - January 24, 2017

+1 for that, and more automated class names in general. Been on my wish list for ages.

I was pleasantly surprised to find a name auto-appended in this case.

By ross - January 24, 2017

Hi guys.

If we were to setup a class for these, how do you want it broken down?

Would all drop downs have the same style regardless of what section they are in? 

Or would section specific names be better so you can style individual sections?

Also, this isn't an indication of when/how/if we'll be adding this as a feature.

I just want to get some more details before I speak with Dave

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

By In-House-Logic - January 24, 2017

Hi Ross,

A few years ago I sent Dave a suggested set of ideas on how auto-appended classes are handled in some other systems.

Just spitballing here, but:

  • Each element could receive one or more classes automatically.
  • Classes normally go from the generic to the specific (similar to the way Bootstrap works in your v3 releases).
  • So a text-field element might have a class set of "element element-input element-textfield element-<fieldname>".
  • A required checkbox element might receive "element element-input element-checkbox element-<fieldname> element-<fieldname>-<index/orValue> required".
  • A label for a WYSIWYG editor might receive "element element-label element-label-wysiwyg element-label-<fieldname>". Similar process for help text, pre/post-fixes and description text.
  • This needs refining, but something like this would allow users to style all fields with a given font face or size bump, any required fields with a border colour, add margins or padding to spacers, make checkboxes or radio buttons display in two columns, or make a critical product name field stand out so a user notices it. Might also allow for some extra plug-in mojo to happen.
  • Could also extend this to List Views with a similar class set of "listview-cell listview-header listview-header-<fieldname>" or "listview-cell listview-<fieldname>".

This is very rough, but it might give someone some ideas.

Jayme

By Dave - January 24, 2017

Hi Guys, 

We can add this.  What's version 1 of this feature?  An "element-required" class? (or maybe "field-required")?

Dave Edis - Senior Developer
interactivetools.com

By mizrahi - January 25, 2017

Here is a suggested class naming system:

  • a class name for the general field type (text, textbox, textarea, wysiwyg, etc)
  • a class name for any field marked as required
  • possibly a class for those marked as admin-only
  • a unique identifier class (tablename + field name)

class="generaltype required-field admin-field tablename-fieldname"

By In-House-Logic - January 25, 2017

Particularly support the tablename-fieldname approach!  I think this was how this suggestion was originally handled some time ago and should definitely be considered if this goes ahead.

J.