Question

position a regular button near a text input (like the calendar trigger button)

0

Hi I want to place a regular button next to a text or dropdown input field on a form to make it look like a trigger button. How to do this properly?

asked 2021-07-05

Ilia Basin

2 answers

Shreyash Mehta · Answer 1 · 2021-07-05

You can use layout grid/table with two columns, in 1^st you can place your input widget or dropdown and in 2^nd you can put your button. You’ll have to do some CSS styling to make it look nice.

ilya basin · Answer 2 · 2023-12-11

Here's what we do: wrap the input and the button with a container, set the container class custom-input-with-trigger-container add the following to the custom styles:

  div.custom-input-with-trigger-container {
  	position: relative;
    
  	&> div {
  		&> div > input {
  			margin-right: 50px; /* margin-right also makes the border around input behave nice */
  		}
  	}
    
  	&> button {
  		position: absolute;
  		right: 0;
  		top: 0;
  	}
  }