Create two textBoxes/Dropdowns side by side Google App Script [Gmail Add-on]

Question

Can anyone please suggest how to add two Widgets/InputTextBoxes side by side in a Google Apps Script [Gmail Add-on] ?

Sample Code:

  var section = CardService.newCardSection();
  section.addWidget(
    CardService.newTextInput()
    .setTitle("Title1")
    .setFieldName("field1")
  );
  section.addWidget(
    CardService.newTextInput()    
    .setTitle("Title2")
    .setFieldName("title2")
  );

The above Google Apps script code creates two InputText fields one below the other in Gmail Add-on.

Is there any way to create two TextInputFields/Dropdowns/Widgets in a same row? [next to each other]

Something like these:

Thanks,

Answer 1

Side-by-side (a.k.a. "in-line fields" in other products) can't currently be done, and will likely remain this way solely because of the width of the add-on sidebar. Google's style guide already recommends that you use a multi-line text input box if you are anticipating "more than a few words." I consider it unlikely for Google to extend their CardService implementation to add an "in-line" flag given their recommendation.

The reason for this restriction no doubt lies in the purpose of CardService:

The UI structures you build with this service are automatically available in both desktop and mobile devices, so you don't need to develop separate UIs for both.

and also stems from one of their "best practices":

If a given card has too many widgets, it can fill too much of the screen and become less useful. While large card sections render as collapsable UI elements, this hides information from the user. Aim to streamline your add-on and provide exactly what the user needs and no more.

With multiple text inputs on a single line, the display could become extremely crowded when viewing the add-on from a mobile device, even if it is still comfortable when viewed via desktop browser. Limitations on side-by-side layout are not unique to TextInputs. Other "side-by-side" widgets such as a Key-Value will not allow setting both a Button and a Switch.

Consider reviewing the available widgets on the Widget overview - images on the page detail the appearance of a wide variety of widgets and you may find something more suitable.

Alternately, consider creating a Feature Request for this functionality, or reviewing the existing Feature Requests in Google's Issue Tracker

Semi-related existing questions:

• Any way to show two widget side by side in gmail add on?
• How to create this UI in Gmail Add-on using Google Apps Script