Styling - colour of text box white when editable - currently has smaller border

0
Good Afternoon,   I would like the text box in the below picture to be filled white completely when editable and greyed out when read only.   The billing ref is editable and looks a bit silly.     The class on both boxes is below     Can anyone please advise how to have the box completely filled white when editable?   Thanks in advance   Jess
asked
3 answers
5

Hello Jessica,

 

Please try with below CSS

 

/*   white background when editable */

.bordered-selector

{    border: 2px solid black;   

border-radius: 4px;   

padding: 5px;   

background-color: white;

 }

/*  for read-only */

.bordered-selector:read-only

{   

background-color: #f0f0f0;  

color: #888;  

}

answered
0

Hi Jessica,

 

There should be a default class from Mendix for editable and non editable Textfields, Boxes, Areas etc.

 

You can set the editable condition here : 

 

image.png

 

If the condition is true, then the Textfield is white - Otherwise greyed out.

 

 

If you still prefer a custom solution then you can try the css classe from above.

Just go to Properties -> Dynamic classes of the field. There you can create the Expression and add the class ( if editable = true then 'bordered-selector:read-only' else 'bordered-selector')

 

Hope this Helps,

 

answered
0

Hi Jessica,

 

You can target below classes to get the desired results which you want.

 

to keep editable textboxes solid white

input.form-control:not([disabled]):not([readonly])

{ 

background-color: #ffffff !important;

}

 

 to maintain grey for disabled fields 

 

input.form-control[disabled],input.form-control[readonly]

{

  background-color: #f0f0f0 !important;  cursor: not-allowed;

}

 

Hope this helps!

Thanks

answered