I have an element of kind 'Ext.form.field.Text'.
I'd like to change the color of the input string in the text field.
Currently, the field is disabled and the text is being shown in a very light grey color, and I would like to change it to something diffrent.
I have tried:
<code>
field.setFieldStyle('color: red ;');
field.fieldCls = 'color: red ;';
field.cls = 'color: red ;'
</code>
All of the above had no effect on the field, or made influence on the frame around the field.
I would like to change only the text being filled in the field, nothing around...
Also, wanted to change the color of the label of the field by doing this:
<code>`field.setLabelCssCls('color: DarkSlateGrey ;');`</code>
And it had been successfully worked, looking for eqvivalent for the text itself.
To make input string colorful you need to add some css. In css you need to add the color which you want.
After that call this css in field.fieldCls property. This default CSS class for the field input.
Your css should be like :
.colorText{
color: red;
}
and after putting css call this css into field.fieldCls like
fieldCls: 'colorText',
I create a fiddler for you there you can check here. Fiddle
Related
I have an Input component inside Form.item and input is disabled, I want input border to change color when error. How to do that?
You can change the default disabled border-color by adding the following css to your app:
.ant-input-status-error.ant-input-disabled,
.ant-input-status-error.ant-input-disabled:hover {
border-color: #ff4d4f;
}
You can take a look at this sandbox for a live working example of this solution.
I am a creating a screen where a user can input any text without constraints.
I tried using NativeBase TextArea and it should work. But when pressed, the border changes color. My expected behavior is that the TextArea's borders should never display any color.
Here is a screenshot of my screen:
Here is a code snippet in creating the textArea:
<TextArea
borderColor="transparent"
h={'98%'}
textAlignVertical="top"
placeholder="| Add Notes"
/>
I tried changing borderColor to 'transparent' but it seems like it is not what I am looking for. That property only changes the borderColor when it is not active.
Maybe there is a way to remove validation of the textArea so that borderColor will not update? Or is there a more suitable property for this kind of feature?
did u try
borderWidth:0,
not sure if it can work tho
Must show a text that is greater than the component in which it is inserted. Currently, the text does not wrap automatically.
I've tried using the following components: Text, Label and Display Field
Have you tried a text that contains white space? A single word that is too long won't be wrapped ever, but multiple shorter, space-delimited words maybe will, depending on the component you use.
If you want to show a long text, use a container and put the text into the html configuration, and it will auto-wrap.
The components you named also have their usage, but not for simple long text:
text is from the draw package, and good for specialized formatting.
displayfield is good inside a form whenever you want to display (read-only) some value that is part of the record that you load into the form. displayfield won't wrap at all - try textareafield with readonly configuration for that.
label is good as the label of a form field, but only if used via the labelable mixin, which does most of the work. A label should make its content wrap around if you provide a fixed width or maxWidth, but it does not automatically adhere to the parent object layout.
you can simply add styles to extjs components (you can use any of them):
word-wrap: break-word;
There are some ways to apply custom css styles to ext's elements
style: {
"word-wrap": 'break-word'
}
Also you can do this:
Ext.get('txtElement').setStyle('word-wrap', 'break-word');
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present
I would like to create a directive that can change the font color of the text displayed on a span based on some value that is not displayed. I have an array:
$scope.due =[{somedate: "April.8.2010"}, {past:"yes"}];
If the value of "past " is yes, then the value inside the span: <span>{{somedue.date}}</span> will be color red, else if "past" is no, then font color is black. I am new with angularjs so i would appreciate it if you can suggest on how can i do this using angularjs.
You can use ng-class
<span ng-class="{red: past == 'yes', black: past == 'no'}">{{somedue.date}}</span>
where the classes red or black will be applied. You can style those via CSS to make the color red / black.
Example: http://jsfiddle.net/TheSharpieOne/NHS73/
Your data structure was odd in your example, it has been modified in mine to showcase ng-class.
Also: You could use true / false and not need to do a string comparison to 'yes'/'no'.