Home / Questions / 1509
Accepted
Rubén
Asked: 2020-12-22 21:56:15 +0800 CST 2020-12-22 21:56:15 +0800 CST

How to Modify the Display of a Google Form Using User Styles

  • 772

Ask

Is there a way to modify the element layout of the new google forms using "userstyles" ( user styles)?

Context

The new Google forms show the title, the suggestion text and the answer field on separate lines, which causes the form to take up a lot of space.

Example: An example of a form is presented including an example of each of the elements of a Google form.

Previous investigation

The use of "user styles" is a technique for customizing the way information is presented on web pages developed by someone else.

It is possible to apply estilos de usuariousing the developer tools of browsers such as Chrome. This is facilitated by extensions for browsers such as Chrome and Firefox. This technique makes use of "style cascade sheets" ( cascading style sheets/ CSS).

An internet search was performed but no page was found that specifically explained the use of CSSto modify the display of Google forms.

Try

Parsed the Google Form source code above. It was observed that the elements are marked with DIVnested labels and class attributes.

An attempt was made to convert to a table using the table, table-row table-cell. It worked for question type elements not for títuloy type elements secciónsince these span the width of the form but CSSthere is no property to merge cells.

Q&A and articles were found suggesting the use of properties like as a solution table-caption, table-headerbut these were discarded because it is difficult to place the titles and section headers in the correct position. Also found a Q&A suggesting the use of the tag spanbut this implies the use of a script.

Due to the above, it was concluded, in addition to several Q&A, that it is not entirely convenient to use the properties of tables in particular because CSSit does not include a direct way to combine cells of a table.

References

css

1 Answers

  1. Best Answer

    Short answer

    Instead of using the convert-to-table approach, it is better to take some of the elements out of the normal flow of the content using the floatand properties clear. The exception is section titles, page headers, and grid type questions.

    Code

    Compact version (equal widths)

    They are assigned 50% width. Tested on Chrome OS version 48.0.2564.48 beta and using the Stylish extension .

    .freebirdFormviewerViewItemsItemItem,
.freebirdFormviewerViewItemsGridContainer,
.freebirdFormviewerViewNavigationNavControls {
    clear:both;
}
.freebirdFormviewerViewItemsItemItemheader,
.freebirdFormviewerViewItemsItemItemheader 
+ div:not(.freebirdFormviewerViewItemsGridContainer) {
    float:left;
    width:50%;
}

    Unequal width version

    .freebirdFormviewerViewItemsItemItem,
.freebirdFormviewerViewItemsGridContainer,
.freebirdFormviewerViewNavigationNavControls {
    clear:both;
}
.freebirdFormviewerViewItemsItemItemheader
    float:left;
    width:30%;
.freebirdFormviewerViewItemsItemItemheader 
+ div:not(.freebirdFormviewerViewItemsGridContainer) {
    float:left;
    width:70%;
}

    Regular expressions (regex)

    to delimit the pages to which you apply the above user style

    Form home page

    \bhttps://docs.google.com/forms/\S+viewform\b

    Pagesiguiente

    \bhttps://docs.google.com/forms/\S+formResponse\b

    Grades

    • The original width is limited to 600px.
    • Questions with a paragraph type response require a width greater than 50% of the width indicated above. An advantage of using floatit is that instead of overflowing the defined width, it will be placed on the next line.

    References

    Mozilla Developer Network (MDN) in Spanish

    Browser extensions

    • 1