Multiline Input Right Padding Only

Hello,

I have a question regarding padding in a multiline input element. We have a multiline input element used as text entry where a user can input a message and optionally attach a file before pressing a button to send. To make it clear that the user will send a file if attached, we need to show a file in the text field – specifically on the right side of the text field. To avoid overlap of the placeholder and user entered text we wish to provide some padding preferably only on the right side of the input element.

Using the horizontal padding setting, it seems that bubble allows for padding of the input/placeholder text on both the left and right sides simultaneously as demonstrated by the images below.

I’ve been able to prevent overlap using padding but it affects both sides. I cannot figure out how to introduce padding on the right side only.

Multiline Input w/o Padding:


Multiline Input w/ Horizontal Padding 76 (affects both right and left):


Question: How can I configure the multiline input so that the padding is only in the right part of the box?

Note 1) The observed behavior is in contrast to the horizontal padding documentation which currently says ‘Horizontal distance in pixels between the left border and the element content.’

Note 2) In the images, the attachment is shown on the left side. We’d like to place it on the right, given the padding behavior we see, if we place it on the right there’d be a lot of empty space on the left side which is unacceptable.

Note 3) The blue highlight indicating input focus is intentional and required.

Thanks in advance for any help anyone can provide.

This topic was automatically closed after 70 days. New replies are no longer allowed.