61
Views
12
Comments
Solved
Input Date type icon right
Question
Application Type
Reactive
Service Studio Version
11.54.62 (Build 63330)
Platform Version
11.28.0 (Build 43201)

i am having this ui problem wherein the calendar icon in icon is not on the right? its not pleasant to have its in the middle. is there a way where you dont have to edit in or specfically positioned it? you can just place it in the right side? thanks! 

2025-10-18 11-13-53
Ramesh subramanian
Solution

Hi ,

For me showing correct, which browser using ?

https://ramesh-subramanian.outsystemscloud.com/AS/Screen1?_ts=638531160466514276

Thanks,

Ramesh

UserImage.jpg
budang haba

am using edge sir

2025-10-18 11-13-53
Ramesh subramanian
Solution

Hi ,

Fixed

Please add this css and find attached OML file.


Thanks,

Ramesh


AS.oml
UserImage.jpg
budang haba

thank you for this might try this

2024-05-30 10-12-48
Anushka singh
Solution

hello

To address the issue of positioning the calendar icon to the right in an input date type without manually editing the positioning, you can use CSS to ensure the icon is consistently placed on the right. Ensure your input date element has a specific class name so you can target it with CSS. For example, custom-date-input.

.custom-date-input {

    position: relative;

    width: 100%; 

}

.custom-date-input::-webkit-calendar-picker-indicator {

    position: absolute;

right: 10px; 

color: transparent; 

cursor: pointer; 

}

i hope it's help

UserImage.jpg
budang haba

might try this thank you

2023-08-18 10-40-36
Deepak M

I used an input widget with the input type as date. In this case, it works as per your expectations
May I know which widget you are using in your task?

UserImage.jpg
budang haba

hi this is my input sir,

2024-03-14 07-29-23
Nisha K

Hi @budang haba 

If you are using InputWithIcon widget you can find option under properties to align icon. Try setting it to true to align right.

UserImage.jpg
budang haba

i tried but wont work

2025-10-18 11-13-53
Ramesh subramanian

Hi budang haba ,

Please share me OML File.

Thanks,

Ramesh

UserImage.jpg
budang haba

here sir

AS.oml
2025-10-18 11-13-53
Ramesh subramanian
Solution

Hi ,

For me showing correct, which browser using ?

https://ramesh-subramanian.outsystemscloud.com/AS/Screen1?_ts=638531160466514276

Thanks,

Ramesh

UserImage.jpg
budang haba

am using edge sir

2025-10-18 11-13-53
Ramesh subramanian
Solution

Hi ,

Fixed

Please add this css and find attached OML file.


Thanks,

Ramesh


AS.oml
UserImage.jpg
budang haba

thank you for this might try this

2024-05-30 10-12-48
Anushka singh
Solution

hello

To address the issue of positioning the calendar icon to the right in an input date type without manually editing the positioning, you can use CSS to ensure the icon is consistently placed on the right. Ensure your input date element has a specific class name so you can target it with CSS. For example, custom-date-input.

.custom-date-input {

    position: relative;

    width: 100%; 

}

.custom-date-input::-webkit-calendar-picker-indicator {

    position: absolute;

right: 10px; 

color: transparent; 

cursor: pointer; 

}

i hope it's help

UserImage.jpg
budang haba

might try this thank you

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