I want to make an input box and dropdown next to it
Question

Hi everyone, I am new to outsystems. I am building a reactive web and I am trying to make an input box with a dropdown list nearby. However, I do not know how to make the border of input box and dropdown different for the left and right side (i.e. left side of the input box is border-rounded and the other side is not rounded). Could anyone help with this? Thank you.


Solution

Hi Apple Chung,

You need to add the below css to the input and dropdown.

.inputrounded{
border-radius: 50px 0px 0px 50px;
}
.dropdownrounded{
border-radius: 0px 50px 50px 0px;
}

Kindly refer the attached url

Hope this helps!

Regards,

Ellakkiya.S


Hi Chung,

Please add the following CSS to that particular dropdown and Input widget and change accordingly

.InputWidget_1{
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}


for input widget and for Dropdown widget need to add two different CSS styles.


I hope this helps,

Thanks & Regards,
Palle Vijay Bhaskar Reddy

Solution

Hi Apple Chung,

You need to add the below css to the input and dropdown.

.inputrounded{
border-radius: 50px 0px 0px 50px;
}
.dropdownrounded{
border-radius: 0px 50px 50px 0px;
}

Kindly refer the attached url

Hope this helps!

Regards,

Ellakkiya.S


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.