PDA

View Full Version : [CLOSED] Change background color of readonly field



Jurke
Nov 25, 2020, 4:34 PM
Hi
I would like to change the background color of text-fields and combo-fields when they are set to readonly. So that the user can distinguish them from the editable ones. I have tried to disable the fields, but I find them hard to read when in disabeld mode.
How can this be accomplished?

Regards
Mikael

geoffrey.mcgill
Nov 25, 2020, 4:41 PM
What theme are you using?

fabricio.murta
Nov 25, 2020, 6:31 PM
Hello Mikael!

Instead of going to the "readonly" path that you are unsure how to style them (as they are naturally not restyled), why don't you just override the -disabled CSS class appended to the components as they are disabled, so you make these disabled components more readable to your taste?

To see what exact CSS classes you need to override, you need to open developer tools and delve into the DOM elements to see which CSS classes they get, and choose the best CSS selector to use. This goes a bit ahead of Ext.NET itself (that's purely CSS). Ext.NET does it share by leaving you enough CSS classes to choose from for every component within components, so you'll always find how to style something to your needs. I'll show you a couple examples with the combo box, bringing in an Ext.NET feature that allows you to actually choose what gets styled how you want.

So, to restyle any combo boxes (actually, form fields) to your needs, one of, or both, CSS selectors may be necessary -- more depending on the specific component. This seemed enough to remove the "dim" and re-color the text of a combo box:



/* default/global disabled disabled form item effects */
.x-form-item-default.x-item-disabled {
opacity: 1;
}

.x-item-disabled * {
color: red;
}


You can check it with a combo box like this:



<ext:ComboBox runat="server" ID="ComboBox1" FieldLabel="ValueDis" Region="South" Disabled="true">
<Items>
<ext:ListItem Text="Item 1" Value="item1" />
<ext:ListItem Text="Item 2" Value="item2" />
<ext:ListItem Text="Item 3" Value="item3" />
<ext:ListItem Text="Item 4" Value="item4" />
<ext:ListItem Text="Item 5" Value="item5" />
</Items>
</ext:ComboBox>


Then, in case you want just some specific combo boxes to be subject to this special "disabled styling", you can just give it a BaseCls setting and proper CSS selectors, like this, in case we use BaseCls="my-custom-dis-fx" in a combo box:



/* disabled item effect specific to items with custom BaseCls (or Cls) */
.my-custom-dis-fx.x-form-item-default.x-item-disabled {
opacity: 0.5;
}
.my-custom-dis-fx .x-item-disabled * {
color: blue;
}


You can use this CSS with the first one to see how the general components will be styled via the "global" selector, whereas the component with BaseCls would be subject to this second one.

As you may have noticed, there are two layers of CSS selection for disabled effects, one basically sets the field's "opacity" to dim it out, and the other actually styles the individual parts of the components like text and background colors.

In case you are interested in the input field alone, just navigate the DOM down to the input component and check its and its surrounding CSS classes assigned. You would then be able to assign effects however you need. Again, CSS knowledge is imperative to this level of customization.

In case you are still interested in the ReadOnly setting, it also implies CSS class changes to the components, so depending on what you want to style, you still can use selectors specific to these readonly fields. You can also set components the ReadOnly so they are not styled, and give one of the available CSS settings (BaseCls, CellCls, Cls, DisabledCls and so on) with proper CSS selector/rule (it's up to you to decide which works best in your case) for the visual effect you want to attain.

Hope these general guidelines helps you in the long run, for other components and aspects of Ext.NET, when you want pontual changes in layout.

Jurke
Nov 26, 2020, 9:15 AM
Hi!
That helped a lot, thank you. I'm using the Nepute theme, if that is any help.
I'm trying to style the fields like this (see pictures) when they are disabled using this style.
But I can't get it to apply only when the field is disabled.


.x-form-text-default {
background-color: #f5f5f5;
}


https://forums.ext.net/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAAAhCAYAAAB X7VcDAAADrUlEQVR4Ae2dwW7iMBCG 6J liqPwaFSeYfdS7n1vOJSceHWPdIz51nZjhN7ICYJMSzmQ4qoM5 6J/eP5OjaV iK8UAAFUKASBV4qmQfTQAEUQAEBaCwCFECBahQAaNV8lEwEBVA AoN1gDWy3W/n8/ORCA9bAgmvA5pV ATStSIH2fr X4/HIhQZPuQYKpJQLafNKvwCaVqRAG6AB82f hVYgpVxIgFZK2QtxARpAA2gXkmSGGaDNEG0JF4AG0ADaEpmUxg BoqR43awE0gAbQlk83gLa8pqMiAjSABtBGpcqkTiOBtpO1MWLO XOuvSc9znXfvRsz7brpjRR4ADaABtOUTehLQ5sDr3JABmghAA2 gA7RwdrrsH0K7Tb7Y3QANoAG12 gw6LgO0n400Zi1ru5U0RkIl5yqxsE2NtphJheZ8jTQfB0nu2yE 7WyObHz/ w0fTb3ubjRzCtL7WYqLn2zHYeOGVjEP7xe3gcIN3gAbQANr5RF utVpK7znv5u5OAps/QOmhEUAoPc/DpYHGQTdNDpgOXApa0YAqna0kMZeti2Ac6Wx/ft1sQWls3DnHQ7MYdBnuHd4AG0ADacOINAW3Yw1smAS1UXidBN ZjEAyzpH4HFwahppDF99eVj i8fgp/tF/ cgMg9cy0Ofgp2SWXXwi7EORn7nW4ANIAG0PLJp6GW7 2thYA29K2oB5ADmmmkaU6/7XRVmdue2hgtsFpA6grRBCDmgGbn2UIt P8PcMsB7fvXa7 1Nm y/ftbXsPW3Rh5 wMMnhkGNcx9DJxsnwC1sf0LAe1MhRaNqN8uphWZ6xIqLwshde6 WVGhRPL1VTSq0uJ I HO4AEplvGEzB7QaFixz4JdObg2USrVCQGvBoc6uwllWD7RQPcW A8TDsqq8wc1WFJWBSthhoyTmcjWX7RuMK4W/9DtBI FzC124rlW/FgGYH7LeW4Q9ye2glQAvbyagaO4FQO3sPsRAvOn/LAO10HMrvTnADaACtdmjl5ndnoJV6/PPGBWgALZfwtdtKZf7ICq3U4583LkADaLVDKze/UpkP0EopeyEuQANouYSv3XYhPWabAdps6a5zBGgArXZo5eZ3Xf YMewO0YW2KWgAaQMslfO22UskF0EopeyEuQANotUMrN78L6THb DNBmS3edoxWeCw1YA8uvAZ2Z/NcnrQhtFECBh1UAoD3sR8fAUQAFtAIATStCGwVQ4GEVAGgP 9ExcBRAAa0AQNOK0EYBFHhYBf4BAsED6J1KBZ0AAAAASUVORK5 CYII= https://forums.ext.net/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANAAAAAdCAYAAAD b0uIeAAACwElEQVR4Ae2awa6CMBBF/dH yiP8hybyD7qRnesXNsaNO13q2vW8lJZy4QEVKQTCJSEZLK16Z4 4zHdwIDypABb5WYPP1TE6cTIEsy R8PvOcgQbaF3gQIFRjpvbtdpP3 81zBhpoX BBgFCNmdoEaD4/HgRoppB0fSwCRIC64oNjHgUIEAHyhAiHuxQgQASoKz445lGAAC 0SoKeksRKlyjO5gKcviSiVyBVeojmOAsEA t2JUjvJZtDNWmpXUfsCj5YunIVnj3hcJVFKHEQECHUc1SZAi8t ANVhseDxPsagKVKPGDRe3CgQDiJln8LO0ARmoFs 1DHTdQ6m3h/LO3pfAeHx62sVMpnNZrfYWvDQKdAL0OEqkIjkedHlmfBAd7nI/RJXrvGRiCTcVQCLySiWG/U8Z9DasESC0pdg72f1RPqbEzc vY0lfxONTBfwAKVHbzARHDokSDZGGxoBk9z0EaEKAwLt56WZhc tkCoMmzD5Z2MCZo6zVzMAkQyOs1/QBFcnzYfUKRkYprhAZtlnNfwfRhCdfsUwMSZhZtm4zjMoyeitC grccIULO4Ha8SoKU1EXTQx6kUOxXnW4QBbGYgp9AoBgFaGkBiu nDVjluttQ0AVTJO4x4InhcxA/WGjAAtDiDt46IZUHbXWss0ESm7cLGkp/9dOPdEqQKQeQ 3r odWuuYQIAWCdCA4GwrAQcsueapnQD1aQawifBV4wD/NaF9gUfLPxHwFr9dfcBaK/X803mHR4GgAP0c5d4HOt5bgW4UgKTYMxXPjZoaEJ4g4XC7AiEA yrblQ1b8RaXdrzwcCaB253NkuAIhACIo/UBp04sADY/nyVcgQGGCvw2KPq8ToMnDf/gbEiACNDyKVryCBojnfDTAUAzShcMFaVOBNSlAgNbkbX7X4AoQ oOCScsE1KUCA1uRtftfgCvwBxMZrFXXEO6UAAAAASUVORK5CYI I=

Thanks!
Mikael

Jurke
Nov 27, 2020, 9:42 AM
Hi
Ignore my last post. I found a solution that uses the readonly flag, it fits my needs better.
Here is a simple example of how I did for making the background gray for readonly fields.



.read-only-style .x-form-text-default {
background-color: #f5f5f5;
}




<ext:TextField
runat="server"
ReadOnlyCls="read-only-style"
ReadOnly="true">
</ext:TextField>



You can close this thread, thanks.

Regards
Mikael

fabricio.murta
Nov 27, 2020, 2:05 PM
Hello Mikael!

Sorry for the delay to reply your follow-up, and glad you could work out all the theory shared in our last post! :)

Thanks also for sharing the outcome and which exactly best fit your specific case, and letting us know you found a solution to your liking, we really appreciate it!

Your choice looks robust and I honestly have nothing to add, I believe you should be good with that for the long run.