While working on a form in Angular 2, I encountered an issue when adding the required attribute to my <input>. The problem resulted in unwanted margins as shown in this image: https://i.sstatic.net/W6JSF.png
I am seeking a solution to only apply the second red margin to the input tag and eliminate the initial margin associated with the md-input-container.
Is there a method to deactivate one of these margins?
Here is the HTML code snippet:
<h2 class="mmm">Create building</h2>
<form #buildingForm="ngForm" (ngSubmit)="onSubmit(buildingForm.value)">
<div class="form-group">
<md-input-container>
<input type="text" #nameRef mdInput required placeholder="Building name" name="name" ngModel>
</md-input-container>
</div>
<button type="submit" md-raised-button color="accent" class="pull-right">{{title}}</button>
</form>
Here is the CSS code snippet:
md-input-container input {
width: 400px;
font-size: 1.5em;
}
It is worth noting that the provided CSS solely adjusts the size of the container.