How to make Vertical Center Align in Input Widget (inside TableRecords)
Application Type
Traditional Web

Hi, I want to make input inside table records so I can edit it directly. But my problem when I changed the expression widget to input widget, the vertical align so bad and I dont know how to make the vertical align center like in Excel. This is the screenshoot that messed up because the vertical align (I changed the expression to input only for 4 first column)

Solution

Here to help, no worries. 

You can auto resize with a forge component like this one. I had to 'force install' it when I first used it, but it has worked well in my experience.

Easy to use. You just drop the widget inside the cell and then place the Input widget right into its placeholder. 

- AJ

Hi Jason,

I tried to reproduce the issue but by default I get the Input widget text aligned in the middle. 

1. Do you have any custom css applicable to input widgets in general that makes your scenario different?

2. Have you tried setting the Cell's Vertical alignment property?

Would speed up troubleshooting if you could recreate it in an oml and share.

Regards,

AJ

Hi, thankyou for the answer
Sorry I cant share the OML, but from the input widget

I think it's from the text line 10 I guess?I already tried to change the vertical alignment cell but still the result is same.

Can you share the oml above that you have no issue to make it center align? Thankyou so much

Hi @Jason30,

I had 'Text Lines' set to 1 and setting Text Lines to 10 gives me the same behavior as you. 

Centering the text in the multi line input widget is definitely a challenge. For this reason I have always preferred to align text to baseline (or top) and luckily users were good with that. 

If that is an option for you then here's how -

css for the screen where the table exists:

.TableRecords_OddLine, 
.TableRecords .TableRecords_EvenLine {
 vertical-align: baseline; /* or top if that works better for you */  
}

result:

Not the solution you were looking for, but I wanted to mention it just in case it works out for you or others in a similar situation.

Best regards,

AJ

Hi, thankyou for the answer

I tried to change the css like you mentioned but the result is like this :
the text line doesnt responsively auto size so the text inside input doesnt show fully. Can you help to solve this? Sorry if I'm asking too much

Thankyou

Solution

Here to help, no worries. 

You can auto resize with a forge component like this one. I had to 'force install' it when I first used it, but it has worked well in my experience.

Easy to use. You just drop the widget inside the cell and then place the Input widget right into its placeholder. 

- AJ

thankyou so much for the help. It works perfectly

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