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.
Related
I've use bootstrap in my project, like this below
<div class="input-group">
<input type="text" class="form-control input-lg" autofocus>
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="button">search</button>
</span>
</div>
and in Bootstrap, I saw :
.input-group-btn:last-child > .btn {
margin-left: -1px;
}
So I write some CSS to avoid the useless margin-left:-1px; but I still have a problem:
When I click the area outside the <div class="input-group search-bar">, the button still have a effort like margin-left:-1px;
I'm confused, should I write some JavaScript to avoid this?
From the bootstrap source code on Github, these -1px styles are used when having button groups where the buttons align next to each other from doubling the border. If you place 2 buttons with a 1px border next to each other, you create visually a 2px border. The -1px shifts the button over so that the border is not doubled.
Comment from actual github source:
// Prevent double borders when buttons are next to each other
The -1px margin is there to prevent double borders when buttons are next to each other. It's meant to be this way.
If you really need to get rid of this, you may also have to adjust some of the negative margins and/or z-index for .input-group-btn > .btn:hover, :focus, :active, :first-child, and :last-child.
Guys I am using a button with icon on 2 side of the text and it works when the text is smaller, but at times I have longer text and had to break them into 2 lines. how to do it ?
<button type="submit" class="button-orange width-280" > <img src="img/icon-getDetails.png"> Get More Details <img class="button-icon" src="img/icon-external-link.png"> </button>
<button type="submit" class="button-orange width-280" > <img src="img/icon-basket.png"> Add to compare basket <span class="badge white">3</span> <img class="button-icon-chevron" src="img/icon-chevron-right.png"> </button>
I am attaching the image with this. I need the longer text also to be appearing like the 1st button.
I don't have your CSS, but I'm guessing that the class width-280 adds a width: 280px to the button.
Instead of using a fixed width, use a minimum width. Change width: 280px to min-width: 280px.
You could set the icon as a background image on the button, and pad the button's sides to the width of the icons. Please note this method is not IE8 friendly. :(
For example
HTML:
<button>
Get more details
</button>
CSS:
button {
background:
url('img/icon-getDetails.png') top left no-repeat,
url('img/icon-external-link.png') top right no-repeat;
padding: 0 30px;
}
Here's a fiddle that might help you imagine it.
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 submit button. I am wanting to align it to the center. Here is my code:
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">
However, it does not work. What is the best/easiest way to do this?
You should use something like this:
<div style="text-align:center">
<input type="submit" />
</div>
Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.
<input type="submit" style="width: 300px; margin: 0 auto;" />
Here is what worked for me:
<input type="submit" style="margin-left: 50%">
If you only add margin, without the left part, it will center the submit button into the middle of your entire page, making it difficult to find and rendering your form incomplete for people who don't have the patience to find a submit button lol. margin-left centers it within the same line, so it's not further down your page than you intended.
You can also use pixels instead of percentage if you just want to indent the submit button a bit and not all the way halfway across the page.
For me it worked using flexbox, which is in my opinion the cleanest solution.
Add a css class around the parent div / element with :
.parent {
display: flex;
}
and for the button use:
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
If this is not working, try :
#wrapper {
display:flex;
justify-content: center;
}
margin: 50%;
You can adjust the percentage as needed. It seems to work for me in responsive emails.
Add width:100px, margin:50%.
Now the left side of the button is set to the center.
Finally add half of the width of the button in our case 50px.
The middle of the button is in the center.
<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>
I am working round a custom CMS called phpVMS. In this, there is a bubble box that displays when clicked on an icon on the map. However, the text align seems to be centered instead of going to left? I've linked a picture:
The code that I am using for the bubble span is:
<span style="font-size: 9px; text-align: left; width: 100%;">
<strong>Pilot In Command: </strong> <%=flight.pilotname%><br />
... so on.
</span>
I've tried to look where text could be centered, but cannot find anything sadly in the css or the html. I have also noticed that width and font size work, but text-align is ignored. I hope you can help me.
Thanks and regards
You can't use text-align within a span as it is not a block-type element. Try replacing your <span> with a <div> of the same parameters.