I like Material css design but I have a problem with the input. The input form not so common for user who use it for first time. So how to change form of input into just like Bootstrap input (a box). Thanks
You can't just change it. But you may use textbox as type and class "browser-default" for select.
Related
Im trying to build a form in angular, when you blur on a field and the field is in an invalid state it adds a 2px red border around the edges of the field, the problem is that when one input field is touched all of them inherit the touched because the ngform object applies the ng-touched class to the form element which in turn all inputs inherit. what is the correct way of doing what I'm looking for?
Picture of what I think the issue is
Only one of these should be highlighted
HTML
CSS
if you want use ngModel alone use a template reference variable
#myTemplateVar="ngModel"
Else, if you want to make a binding use [(ngModel)], see Angular docs template driven form
And, please, better write the code, not use images, if you write the code, select it and use Ctrl+K it's is formated as code
I need to have two radio buttons.
The first is called "Use an existing" and the second is called "Create new scene".
There should be hidden input under radios and if I check the "Create new scene" radio, there should appear the input. If i check the first radio "Use an existing", the input should hide again.
My question is: Is there any way to achieve that by bootstrap or I have to use JQuery?
Yes, you would have to use JQuery, there is not a built in function of Bootstrap do that.
Bootstrap is built on JQuery, so you essentially are always using JQuery.
How do I create a label that is editable? I am displaying data in a table, and would like to provide in place editing for the displayed data. What CSS styles can I use for it?
Put a text input box there and make its background same as the background of its container and put 0 border on it and use same font style and color as other items in the table
What CSS styles can I use for it ?
It's not really a matter of CSS (unless your questions pertains solely to achieving a particular style).
You can:
Make all table cells contain inputs. This has the (potentially significant) downside that all data will be submitted to the server if the form is POSTed. I wouldn't recommend this approach unless the table is small or you are never fully submitting the whole page.
Change the label to an input on click. When the form is submitted, this value will now be a part of the request.
Change the label to an input in response to an action elsewhere (e.g. focusing the row, clicking an edit button next to the row, etc.)
Set contenteditable="true" on the element. This allows rich formatting but also requires that you keep track of the changes the user has made; they will not be submitted to the server unless they are placed into a form field.
You will likely want/need a snippet of JavaScript to change the label to an input (#2 and #3). You will need JavaScript to get the data to the server with approach #4.
I'm trying to create a form but I don't want to use labels, I just want to use the placeholder to let the user know what is asked from him.
But when I give it type="date" the placeholder in Chrome is ignored and replaced with: day-month-year, but I want it to display: Date of birth.
I there a way to do this? Otherwise I have to change the entire form and insert labels.
I know it's been asked before, but everyone wants to prevent the datepicker to display, I do like the datepicker but just not placeholder. All answers I found were based on the placeholder.
The placeholder attribute is not valid on input type="date". So the easiest way to get placeholder to work is to set the type to something that supports it.
Also note:
The placeholder attribute should not be used as an alternative to a
label.
If you are determined to use your approach you should add labels to your form then make sure they're available to assistive technology.
HTML5 Anyway to include a submit button directly into a input type="text"?
For instance when the user types in something, a button "submit" appears inside the textarea?
Another way to look at it, can u define 2 types in one input?
No, you can't define two input types in the same input element.
To achieve what you want you'd need to define a separate input element for your button, and use CSS and JavaScript to position it and make it appear/disappear etc.
You could do something like this (using jQuery for convenience.) The code could be cleaned up, but that's the general idea.