I have a pretty basic form of an e-mail input and submit button. I'm trying to do the following:
Have the e-mail input background be white
Have the Submit button be the same height as the input
When I try to change the background of the input in CSS, it only changes a small rectangle within the Angular Material input field. Also, the button doesn't change heights when I change the height property to 100%.
I'm sure I am missing something simple. Can anyone help?
<form>
<mat-form-field appearance="outline">
<mat-label>E-Mail</mat-label>
<input matInput placeholder="E-Mail" required>
</mat-form-field>
<button mat-raised-button color="primary" type="submit">Get Updates!</button>
</form>
That should get the input & the button to get equal hight:
form {
display:flex;
flex-direction:row;
}
And the reason the input element wont style. Is because you are tying to style an element in mat-form-field which is a different component. If you want to style inner component elements like in your case, you should do like so:
:host ::ng-deep mat-form-field {
input {
background-color:#fff;
}
}
Related
I am making a simple auto complete input field with a close button at the end that would clear the field
<mat-form-field>
<input matInput type="text">
<button matSuffix mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete>...</mat-autocomplete>
</mat-form-field>
However, I noticed that the button does not scale properly with the mat-icon, and the icon appears a little off to the right of the horizontal center of the button. Tried text-align and float, but none works. I then removed matSuffix, the button is not positioned on the same line anymore of couse, but it scales with the icon and centers it correctly
Sounds like https://github.com/angular/material2/issues/10313. The fix is to apply font-size, width, and height (and possibly line-height) to the button to counter what mat-suffix does to it.
I used the following style to align my icons better:
mat-icon {
margin-right: 0px !important;
vertical-align: middle;
}
This got rid of the space on the right (horizontal align) and moved the icon down a bit to align better with my calendar control or other input icons. Just make sure this doesn't break any other styling where mat-icons are used, in which case you will have to specifically style only the mat-icons for the inputs where needed and not apply this across the board.
I am using jquery form validation and I need to apply color code for all the textboxes in the form without specifying each textbox id in the Css. Instead How to apply css for all the text box in the form using the form id. Please let me know is there any solutions.Thanks in advance.
#formID input[type="text"]{
Put your css here
}
in css, you can do this:
form input {
// Your formatting comes here..
}
or if you want this to apply for a specific form having an id="myForm":
#myForm input {
// formatting comes here for example: color:red;
}
The background knowledge for this is CSS Selectors.
If by textboxes you mean <input type="text"> and <textarea> elements, you can simply style them using the following:
#formid input[type=text],
#formid textarea {
/* CSS rules */
}
Note that <input> elements with types other than text exist. Read more about those here.
Try this...
#frm1>input[type="text"]{
border:1px solid red;
width:100px;
margin:1%;
}
<form id="frm1">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
You can use the .children() function of the jQuery api to set the css properties of the form elements.
eg : jsFiddle
$('#FormID').children().css("property", "value");
I am trying to change the way a submit button looks - i am unable to us id or class or anything like that.
i have a div - inside this div 2 inputs 1 is a text the other is submit let say the div's class is holder.
<div class="holder">
<input type="text" name="somename" value="somevalue">
<input type="submit" name="submit" value="save changes">
</div>
my current css is:
.holder input, textarea {
width:250px;
}
However for this change both input types. and i am trying to change them individually.
You can specify the specific attributes required for css properties:
.holder input[type=submit] {
width:250px;
}
Reference: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Basically, it means that the width property only applies to <input> tags inside the #holder container IF the type attribute has a value of "submit".
You can also use this on the name attribute:
.holder input[name=submit] {
width:250px;
}
The selector for the submit input would be:
.holder input[type="submit"]
Note that your div has a class of "holder", not an id of "holder", so use . not #.
i'm currently working with Twitter Bootstrap and have a problem concerning the size of elements. I'd like to create an input field with an appended button. That's why I'm using a div with "input-append", which sorrounds the input and the button tag.
Now my problem: I want everything to be a bit bigger. So i gave the button tag the property "btn-large". Unfortunately there doesn't seem to be a similar property for the input field.
How can I fit the input field to the appended button?
<div class="input-append">
<input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn btn-large" type="button"><i class="icon-search"></i></button>
</div>
Heres an impression of my problem:
Regards,
Christoph
Define box-sizing to your input field. Write like this:
input, button{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
You can use following style and if you want bigger then increase padding.
input, button{
padding: 7px;
}
I have a simple HTML form, thus:
<form>
<p>
<input type="text" name="text" />
</p>
<p class="buttonPara">
<input type="submit" name="submit" />
</p>
</form>
and a simple stylesheet, thus:
p.buttonPara
{
position: relative;
}
p.buttonPara input
{
position: absolute;
left: 50px;
}
The submit button fails to respond to the return key unless I remove the class from the
<p class="buttonPara">
Any ideas anyone?
I'm not sure what you want to accomplish and why you take this approach. Do you want to align the button in the middle of the textfield above?
You could do this without positioning the button element. But that would mean wrapping everything in a container element and setting the width of that element along with the text-align property. Or you could set the width and align properties of the form of course.
I worked it out.
My form is contained in a div that has its class set programatically by the body onload event. Until the class is set, the div has an underlying style of display:none. In IE, the result is that hitting the return key does not submit the form.