Javascript in Slate

Owned by Elizabeth Storrs
Sept 27, 2024
2 min read

Making space for overflowing headers on Reader Review form

image-20240927-182518.png
problem!

CSS cannot do this, but javascript that inserts CSS can. Posted to Slack 9/2024; Steve Kowal from UIC suggested this:

image-20240927-182634.png

Script Disclaimers: Use at your own risk. Try it in Test first. A future update to forms could break it at any time.

$("div[class~='form_responses_labels'] label").attr('style','height: 60px !important; width: 10px !important; min-width: auto !important; padding: 0px !important; writing-mode: vertical-lr !important; text-orientation: mixed !important;');

$("div.form_response_label").attr('style','width: 20px !important; min-width: auto !important;');

$("div.form_likert div.form_response").attr('style', 'width: 20px !important; min-width: auto !important;');

which goes in the Custom Scripts box:

Helen did not end up using the height and text orientation mode, just fiddled the spacing: https://tusmgp.admissions.tufts.edu/manage/form/build?id=9399f56c-6ccf-4c0a-89dd-ca57bebb72c9

$("div[class~='form_responses_labels'] label").attr('style','width: 10px !important; min-width: auto !important; padding: 0px !important;');

$("div.form_response_label").attr('style','width: 20px !important; min-width: auto !important;');

$("div.form_likert div.form_response").attr('style', 'width: 20px !important; min-width: auto !important;');

which did this: