Google App Maker - How to keep constant space between the label and input of a dropdown/textbox widget? - google-app-maker

Question

I have a field in a form with label/display name:
"I can confirm that this supply is not subject to restrictions under the Test Group, or be of a specialist nature, and as such require other checks that this method does not support."
I am using a dropdown widget with options Yes and No to display it.
I could wrap the label by trying below css.
.app-AddRequest-Field15-Label {
white-space: normal;
}
But now the space between the input and label is very less. Even if I put a margin top to the input when in mobile view the label wraps even more and the space still remains very less/ both override.
Images with borders
Label border: black
Input border: Orange
I want to keep a constant space in all views. Please suggest.

Answer 1

I mocked up a solution that works for up to four lines of data in a label. These are the steps you need to follow:
1.) In the global css, make sure you have the following lines:
.app-Dropdown-Label {
white-space: normal;
}
.twoLinesLabel{
top: -15px !important;
}
.threeLinesLabel{
top: -30px !important;
}
.fourLinesLabel{
top: -45px !important;
}
2.) On any of the client scripts place the following:
function adjustLabel(widget){
var label = widget.getElement().children[0];
var ch = label.clientHeight;
var lines = Math.floor(ch / 15);
switch(lines){
case 2:
label.classList.add("twoLinesLabel");
break;
case 3:
label.classList.add("threeLinesLabel");
break;
case 4:
label.classList.add("fourLinesLabel");
break;
}
}
3.) On the onAttach event handler of any dropdwon you need this adjustment, place the following:
adjustLabel(widget);
The only problem with that approach is that in the UI you won't be able to see the necessary space your field requires so that it don't overflows with the previous field. So you'll have to preview the app and make adjustements accordingly.
Another way is to make sure that your CSS looks like this instead:
.app-Dropdown-Label {
white-space: normal;
}
.twoLinesLabel label{
top: -15px !important;
}
.threeLinesLabel label{
top: -30px !important;
}
.fourLinesLabel label{
top: -45px !important;
}
Then on the Display category of the property editor, simply add the correspoding style to the dropdown. That way you will be able to see the changes in the editor immediately.
Whatever way you choose, the result is the following: