PDA

View Full Version : [CLOSED] TextField Style/Cls



cwolcott
Nov 27, 2012, 7:33 PM
Another simple one that is causing me an issue.

Can I set the background-color for a textfield, both when it is empty and when I start to type.



<ext:TextField runat="server" EmptyText="New Status Item ..." Flex="1" />


I tried the following to set the EmptyText style. The font-size is correct, but not the background-color:


.my-EmptyText {
background-color: #D8FFD8;
font-size: 10px;
}
...
<ext:TextField runat="server" EmptyText="New Status Item ..." Flex="1" EmptyCls="my-EmptyText" />


How can I also set the font-size and background-color when I start typing.

RCN
Nov 27, 2012, 8:02 PM
Let me know whether the following code helps you:



<style type="text/css">
.x-form-field, .x-form-text
{
font-size: 15px !important;
background-color:Lime !important;
}
.my-EmptyText
{
font-size: 10px !important;
background-color: Red !important;
}
</style>

cwolcott
Nov 28, 2012, 1:06 AM
RCN,

Thanks for the reply. You got me 95% of the way there. I had to add background-image: none so that the entire text box was filled with the background color.


<style type="text/css">
.x-form-field, .x-form-text
{
font-size: 10px;
background-color: #D8FFD8;
background-image: none;
}
.my-EmptyText
{
font-size: 10px;
background-color: #FFFFD8;
background-image: none;
}
</style>

Just thought of something else ...
How can I make sure that TF1 uses the styles and TF2 is not effected. Currently TF1 is not following the EmptyText style.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html >
<html>
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.my-TextField .x-form-field
{
font-size: 10px;
background-color: #F0FFF0;
background-image: none;
}
.my-EmptyText
{
font-size: 10px;
background-color: #FFFFD8;
background-image: none;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<ext:TextField ID="TF1" runat="server" EmptyText="New Item ..." EmptyCls="my-EmptyText" Cls="my-TextField" />
<ext:TextField ID="TF2" runat="server" EmptyText="New Item ..." />
</form>
</body>
</html>

Daniil
Nov 28, 2012, 6:02 AM
Hi Chris,

Probably, you should set up "!important" for the rule in the empty class.

background-color: #FFFFD8 !important;

RCN
Nov 28, 2012, 10:36 AM
Thanks for the reply. You got me 95%
You're welcome

RCN
Nov 28, 2012, 10:36 AM
Just thought of something else ...
How can I make sure that TF1 uses the styles and TF2 is not effected. Currently TF1 is not following the EmptyText style.


Does the approach provided by Daniil helps you?

cwolcott
Nov 28, 2012, 10:49 AM
I am not a expert in CSS, but can you inspect the textfield element in Chrome. The defined attribute EmptyCls="my-EmptyText" works just fine. When I inspect the textfield element I see:



...
<input id="..." type="text" size="1" name ="..." placeholder="New Item Status ..."
class="x-form-field x-form-text my-EmptyText" ...."
...


But when I begin to type in the textfield it seems the defined attribute Cls="my-TextField" does not work. When I inspect the textfield element I see:



...
<input id="..." type="text" size="1" name ="..." placeholder="New Item Status ..."
class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-toolbar-form-focus" ...."
...


I noticed that I could define a FocusCls="my-FocusText" that will apply the .x-my-FocusText style when the textfield has focus and when focus is lost the style changes back to the default. What I want is once the textfield is no longer empty it should have a specific style. I thought the attribute Cls would work. If I define the style:



.x-form-field, .x-form-text
{
font-size: 10px;
background-color: #D8FFD8;
background-image: none;
}


It works, but it is applied to everything.

RCN
Nov 28, 2012, 10:58 AM
<!DOCTYPE html >
<html>
<head id="Head2" runat="server">
<title></title>
<style type="text/css">
.customTextFieldClass .x-form-field
{
font-size: 10px !important;
background-color: Gray !important;
color: White !important;
background-image: none !important;
}
.customTextFieldClass .my-EmptyText
{
font-size: 10px !important;
background-color: Red !important;
background-image: none !important;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager2" runat="server" />
<form id="form1" runat="server">
<ext:TextField ID="TF1" runat="server" Cls="customTextFieldClass" EmptyText="New Item ..."
EmptyCls="my-EmptyText" />
<ext:TextField ID="TF2" runat="server" EmptyText="New Item ..." />
</form>
</body>
</html>

cwolcott
Nov 28, 2012, 11:17 AM
Perfect. I need to remember the order of the style selectors.

Thanks ... Please close the thread.

RCN
Nov 28, 2012, 11:21 AM
You're welcome :)