Working example with normal textarea
If you have this code code:
<textarea dir="auto"></textarea>
And you start writing, e.g., Arabic, you'll find that the text is automatically right-aligned, as it should be.
Non-working example with Angular Material's textarea
<mat-form-field appearance="outline">
<mat-label>Post</mat-label>
<textarea dir="auto" matInput></textarea>
</mat-form-field>
If you start writing, e.g., Arabic, unfortunately, the text remains left-aligned :(
The question
So, the question: How to use dir="auto" with Angular Material's textarea? Or how to get the text right-aligned in Angular Material's textarea when the user starts writing Arabic automatically?
Previously, I couldn't even get dir="rtl" to work with Angular Material's textarea. But thanks to the the example in this GitHub issue, seems like it's possible by setting dir="rtl" on the parent form.
So, perhaps a temporary workaround is possible by having the form's dir attribute take its value from a member variable, and take this variable's value from the user or calculate it based on the first character in the textarea or something.
But yeah, not a perfect solution and I hope someone has a better one. But it partially answers my question so I'm going to leave it here in case it's a solution for someone else as well.
Related
I was a bit puzzled by my
<input ng-bind="x.a * x.b" tabindex="-1" readonly/>
expression not working. I can't use ng-model there (as the product is no L-value), so I blindly switched to ng-bind. I guess, it doesn't work because of the funny HTML inconsistency (using value=xxx instead of placing the value in the element text). So I switched to
<input value="{{x.a * x.b}}" tabindex="-1" readonly/>
which solved the problem, but shouldn't input ng-bind work anyway? AFAIK jQuery val() does. Am I doing something wrong?
Side questions:
Is it a bad practice to use inputs which are always readonly?
If so, what's the recommended way? span or label or what?
ngBind set's the element's text content:
element.text(value == undefined ? '' : value); // from the source code of Angular
So, it does not work for setting the value of an input (nor shouldn't it).
I believe it is better to use <span> in place of readonly inputs.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How do I make an HTML text box show a hint when empty?
A very simple question. I would like to place a tooltip within a Textbox similar to the StackOverflow log in. I want the word discount on the textbox value and when the user enters a new value, the word "discount" disappears from the Textbox.
Can I do this by myself using events like OnBlur, OnChange, etc (I don't know which)? Or there is something around that is already done?
Thanks
As said by rudeovski, you can use placeholder in modern browsers.
But for the older one, you'll need a javascript/jQuery fallback.
Here is a good example:
http://uniquemethod.com/html5-placeholder-text-with-modernizr-and-jquery-fallback
This will generate placeholder fallback for you automaticly. You simply have to write:
<input type="text" id="discount" placeholder="discount" />
Modernizr combined with jQuery will do the rest for you.
Hope this help :)
You can use placeholder text for this.
<input type="text" id="discount" placeholder="discount" />
To make it work on all browsers, you need to use jquery/javascript for it. As far as i know, it doesn't work in IE.
I'm doing something rather elementary - doing a <textarea cols="60" rows="35"> textarea scrollable text box.... the problem im getting is html keeps popping up regardless of whether its written in wordpress html or text mode - in text mode on wordpress, when the selected say <br> is selected, it selects all the text, so i cant delete that or it will delete all the text....
It's a bit unclear to me what your problem is exactly. If you posted the problematic html we could use an editor to play around with it and try and help find a solution.
I suspect you aren't "closing" the textarea tag:
<textarea name="thingy" cols=10 rows=5></textarea>
^^^^^^^^^^^
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.
I'm using django-uni-form to style my form using the filter my_form|as_uni_form:
<form class="uniForm" id="my_form" method="post" action="./">
<fieldset class="inlineLabels">
{{ my_form|as_uni_form }}
<div class="form_block">
<input type="submit" value="Submit"/>
</div>
</fieldset>
</form>
It looks really good. But I need to customize it.
For example, one of the field "percentage" of the form is of the type IntegerField. It is being rendered as an <input type="text">. The problem is that the text box is really wide, I'd like to make it only 2 character wide. Also I want to add a percentage sign "%" right after the text box so that users know they if they put in the number "10" in the text box, it means 10%.
Is there anyway to do that with django-uni-form?
Thanks for your help.
You'll need to loop over the elements of your form and render the uniForm markup yourself. Either that, you can customize the look of each input based on an id or class.
What I'd do is look at the mark up it generates, and then loop over the elements generating that same markup and customize them. See the Django docs for more information.
I have the same question as yours. I think the length of the text input is easy to change via css. I'm more concerned about the custom html element behind the input, in your case percentage mark. I don't find an easy solution to it. Looks like either we have to mimick the way a field is rendered in django-uni-form template or write a filter of our own. I'm still waiting for a more elegant solution.