Page 1 of 1

Textinput only as a line instead a box

Posted: Fri Mar 06, 2020 4:05 pm
by Bernie

I am trying to apply the following CSS classes to a mobiletextinput with the goal of just getting a line instead a box for it.

.myinput {
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: groove;
background-color: #ffffff;
}

.no-outline {
outline: none;
}

somehow the preview inthe page editor looks different then the test run.
Both arr not showing what I try to accomplish.

Any help?

Image


Textinput only as a line instead a box

Posted: Fri Mar 06, 2020 5:17 pm
by Serhii Kulibaba

Hello Bernie,

Do you need to apply these styles to all input components or only for the specific one?
Please use the following CSS for that: prediv.ui-input-text{
border: none;
box-shadow: none;
}/pre


Textinput only as a line instead a box

Posted: Fri Mar 06, 2020 8:22 pm
by Bernie

Hi Serhii,
Thank you. This is what I ended up using:

Created a new CSS:

div.ui-input-text{
border: none;
box-shadow: none;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: groove;
background-color: transparent;
}

Works for all the textinputs in that app.


Textinput only as a line instead a box

Posted: Tue Mar 10, 2020 2:10 pm
by Serhii Kulibaba

Thank you for the update! Glad it works now!