CSS to increase font size of entry components?

[Mark_Turrell]

Hi I have as use case which would be nice with some CSS text wizardry…

• customer is using an app to put in their details (a code, a name) BUT they are older and have trouble looking at smaller fonts

So I would like to get some CSS for the text entry component (and similar) to make them appear bigger.

Any ideas? Thanks!

[kyleheney]

I think the user’s device should have its own accessibility features that would enhance the size of these sorts of elements without affecting all other users.

[Mark_Turrell]

That would make all elements larger, rather than specific ones. I have an extra desire … to have a 3 digit code put into the app in a nice big font… a related desire

[Roldy]

Is this the only text entry you have on the screen?
In this case you can use this:

<pre><span><style>
[data-test="app-tf-text-input"] {
color: red !important;
font-size: x-large !important;
}
</style></span></pre>

I added a touch of color too… change property as you need.

[Mark_Turrell]

I am getting close — now I would like to make the box for text entry larger (as characters with a tail do not appear fully). Any extra ideas? and thanks already!

<pre><span><style>
[data-test="app-tf-text-input"] {
color: black !important;
font-size: 1.6em !important;
font-weight: 900;
text-align: center
}

/* Choice 1 (1st component) */
div[id*='screenScrollView'] > div > :nth-child(4) {
display:fixed;
margin-left: 0px;
width:160px;
text-align: center;
}


/* Choice 2 */
div[id*='screenScrollView'] > div > :nth-child(5) {
display:fixed;
margin-left: 0px;
width:120px;
text-align: center;
margin-top:-80px;
margin-left:160px;
}

</style></span></pre>

[Roldy]

I think you mean “higher”…?
In this case, try this:

<pre><span><style>
[data-test="app-tf-text-input"] {
font-size: xxx-large !important;
line-height: 48px !important;
}

[data-test="app-text-field"] .input-wrap {
height: 80px;
}

</style></span></pre>

[Mark_Turrell]

@Roldy

<pre><span><style>
[data-test="app-tf-text-input"] {
font-size: xxx-large !important;
line-height: 48px !important;
}

[data-test="app-text-field"] .input-wrap {
height: 80px;
}

</style></span></pre>

Excellent - thanks, @Roldy ! Now my last thing… I am struggling to make the text a thick bold (I try but the text does not change). I can live with what I have though - thank you

[Roldy]

Add !important to font-weight

font-weight: bold !important;