[CLOSED] Change background color of readonly field

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

What theme are you using?

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:

Code:

---

/* 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:

Code:

---

<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:

Code:

---

/* 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.

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.

Code:

---

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

---

https://forums.ext.net/image/png;bas...AASUVORK5CYII= https://forums.ext.net/image/png;bas...AASUVORK5CYII=

Thanks!
Mikael

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.

Code:

---

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

---

Code:

---

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

---

You can close this thread, thanks.

Regards
Mikael

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.