For an Angular project using Material, I would like to add an input with a leading icon. When I do so (using mat-icon and matPrefix), the placeholder, in an outline appearance, gets extra (unwanted) margin on the start side (see images below).
When implementing the same input with a matSuffix for a trailing icon, the extra margin is no longer there.
Any idea how to get rid of it?
Below an example of the used code:
<mat-form-field fxFlex appearance="outline">
<mat-label>Quota</mat-label>
<mat-icon matPrefix>pin</mat-icon>
<input matInput formControlName="quota" required fxFlex type="number">
</mat-form-field>
You can try wrapping your code with a div.row and a div.col-2 as shown below.
<div class="row">
<div class="col-2">
enter your code here
</div>
</div>
Related
EXTREMELY GREEN CODER
I have some q-cards with 2 q-card-sections. One for text and the other for an image. I want the text section to remain a fixed size but the text length is not fixed and will overflow/wrap and increase the section height. I have tried to truncate the text and display the full text.value with a tooltip but could not find success with that.
I might mention that I'm using the grid system for this site, which is still a concept I am struggling with. I have tried setting the section as a defined row(3) but it didn't seem to have much effect.
Here is what I have done so far:
<div class="row">
<q-card v-for="stuffs" class="col-3">
<q-card-section class="text-center">
<div class="col">
<a>
<b class="fontsize-16 text-capitalize text-weight-bolder">Text I want to shrink</b>
</a>
</div>
</q-card-section>
</div>
How to show the Text box layout in MVC as text box without having drop down in the side?
In the attached screen shot, we have the drop down lay out. It has to be plain text box.
<div class="form-group">
<div class="col-sm-5 control-label">
<label class="hthin">ExceriseTimes</label>
</div>
<div class="col-sm-1">
<textarea id="ExceriseTimes" asp-for="ExceriseTimes" style="height:25px;" class="form-control" type="text"></textarea>
</div>
</div>
The <textarea> form element doesn't have type attribute, it belongs to <input>. If you want a plain single-line text box, just use <input> tag with type="text" attribute:
<input id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
type="text" />
However if you want fixed size <textarea> element without scroll bar (looks like spinner in sample image), use both CSS styling overflow:hidden & resize:none:
<textarea id="ExerciseTimes" asp-for="ExerciseTimes" style="height:25px;" class="form-control"
style="overflow:hidden;resize:none"></textarea>
Note: You can apply additional CSS class containing both styles above (e.g. noscrollbar) and append it like class="form-control noscrollbar".
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.
I am getting up to speed with Bootstrap's grid system but the following example confuses me. In the following there are two (2) column classes - col-xs-5 and col-lg-1 - for each div with class form-group
<div class="container-fluid">
<form role="form">
<div class="row">
<div class="form-group col-xs-5 col-lg-1">
<label>
Name
</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5 col-lg-1 ">
<label>
Email
</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
</form>
</div>
Can someone explain why this is done?
Each column class describes how many columns the element will take up at that designated breakpoint. For example:
<div class="form-group col-xs-5 col-lg-1 ">...</div>
This element will take up 5 columns if the page is being rendered at the xs breakpoint (screen width of <768px) but will only take up one column at the lg breakpoint ( >1200px )
This lets you set the presentation of the same element at different screen widths.
For each row you have one column.
It's set to five columns wide for extra small to medium screen sizes with by "col-xs-5" and one column for large screen sizes with "col-lg-1". By default with bootstrap you can set four different layouts (extra small, small, medium and large) to suit different screen sizes.
If you make your browser window size smaller you will see how it effects it.
See http://getbootstrap.com/css/#grid for information on how the grid system works.
It's well worth reading though the documentation as it's very good. See http://getbootstrap.com/css/