I am using a form with 5 text boxes. For each text box i fixed the maxlength="100" and binding the value with ng-model.
Now i need to show the content inside the text boxes with "..." if the content exceeds 20 characters.
Now if the user :hover the input then hide the ellipsis. To make to feel that can be edited.
And if the user the click inside the text box, of course can edit the content.
Now i need to show the content inside the text box with "..." on hover if the content exceeds 20 characters.And if the user the click inside the text box they can edit the content.
Just Use CSS
input[type="text"] {
text-overflow: ellipsis;
}
input[type="text"]:hover {
text-overflow: initial;
}
HTML
<input id="value" type="text" size="20">
note: size="20" here defines the limit to show before ellipsis.
http://jsfiddle.net/rnrlabs/2pm19ugm/
Related
I am trying to display html by using angularjs sanitize module and ng-bind-html attribute on the element. It works fine if I have the attribute
on a div element.
<div ng-bind-html="htmlText" contenteditable="false"></div>
But I need the same text in a text area control. When I read about displaying html in text area, my understanding was that
text area does not support this. Is there a way I can convert the html to text before hand in controller and then use only ng-bind on text area? I have multiple long paragraphs and bullet points in html to display as formatted text.
Thanks for any suggestions.
//Does not display formatted html.
<textarea class="form-control" ng-bind-html="htmlText" contenteditable="false" rows="7"></textarea>
textarea only supports plain text. Since you are not allowing the text to be edited, I'd use the div that you started with. I suspect that you're trying to control the size and enable scroll bars when necessary on the div, and hoping to get that out of textarea. You'll be much better off just styling the div accordingly.
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
I have added a newsletter subscription box to my website, however it is not displaying properly. I would like to have the subscribe button displayed next to the box where you enter the email. I have added the following css:
#mc_embed_signup_scroll, #mc-submit {
display:inline-block;
}
However its not working.
http://www.skinmade.com.au/ (see footer)
Thanks in advance :)
Claire
The inputs themselves are styled display:block by the mail chimp css, which prevents them being rendered in the same line. Also the mc_embed_signup_scroll div that contains them doesn't have a set width, so if its auto-width isn't wide enough for the inputs to appear side by side, the button will wrap to the next line.
To get them on the same line, override the display setting of the input elements, and set a minimum width on the containing div to make sure they fit on one line:
#mc_embed_signup input.email,
#mc_embed_signup input.button {
display: inline !important;
}
#mc_embed_signup_scroll{
min-width: 350px;
}
http://jsfiddle.net/pfwfsq2z/1/
When creating a xtype=radiogroup, the rendered element is using input type=button instead of input type=radio, I took the example from the doc, put it into a fiddle and the same happens. Tried this in Firefox and Chrome.
Why is not generating radio inputs, and how can I fix this ?
This is a correct behavior. ExtJs is using input type=button to render radiogroup. These inputs are styled with css to look like real radio buttons.
As #matt has mentioned the reason for using input type=button is that a radio box's color, border and background cannot be styled using CSS.
In your fiddle inputs look like plain buttons because jsfiddle didn't load ext-all.css properly. If you add ext-all.css manualy (like I did in this fiddle) you will see that all inputs appear as if they were radio buttons.
<input type="file" />
Can I replace the file input field (above) with a simple button:
<button type="submit">Upload</button>
File input doesn't fit nicely into the design, and styling it is a pain so if its possible to use a button instead for file uploading, thats also cross-browser compatible, that'd be awesome!
Thanks!
1- You can't call the open dialog using a button, you can just show the dialog using the input file field, or using a flash component.
2- You can work around this by putting input file on a button "using CSS" and set this input file transparent so it will look like the user is clicking on the button but infact he is clicking on the transparent input file.
Sample: http://www.quirksmode.org/dom/inputfile.html
You can style with CSS and DOM the input type file
See this page