I am trying to align the controls in a line. I've tried different paddings/margins. How can I do this?
<div style="margin-top: 10px">
<button (click)="goToPage(1)" [disabled]="pageNumber==1">
<md-icon>first_page</md-icon>
</button>
<button (click)="previous()" [disabled]="pageNumber==1">
<md-icon>chevron_left</md-icon>
</button>
<input #input type="text" style="width: 30px;height:30px;margin-top:2px" (keyup.enter)="goToPage(input.value)" [(value)]="pageNumber" >
<button (click)="next()" [disabled]="pageNumber==totalPages">
<md-icon>chevron_right</md-icon>
</button>
<button (click)="goToPage(totalPages)" [disabled]="pageNumber==totalPages">
<md-icon>last_page</md-icon>
</button>
<br />
<span>Showing page {{pageNumber}} of {{totalPages}} pages.
</span></div>
You have two problems.
The first one is that your buttons are missing the angular material styling and the second one is that you should learn CSS before jumping to any JavaScript frameworks like Angular. Anyway I made a working demo on Plunker for you.
I just added a few CSS selectors and I used flexbox just like this:
.wrapper{
display: flex;
margin: 1rem;
}
.wrapper button, input {
margin: 0 0.5rem;
}
Related
In Angular, I have added clear button inside input box but after adding it I am not able to see entire text in input box as it is being overlapped. Please find detailed information below.
HTML Code
<ng-template pTemplate="input">
<input pInputText type="text" class="col-input-grid-100" >
<span class="mar-left">
<button (click)="clearmail1(ri)" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
<i class="pi pi-times"></i>
</button>
</span>
</ng-template>
CSS content
.col-input-grid-100{
width: 135%;
margin-left: -10px;
}
.mar-left{
margin-left:-29px;
}
Current Output: Text in input box is test3#test.com.
As you can see in above image "com" is not visible clearly. I tried multiple ways but things didnt work. Kindly help me to resolve this issue.
Note:
1. I want to show cross button inside input box only
2. I am not using bootstrap library.
I tried with below code and it worked for me.
<span class="p-input-icon-right">
<i class="pi pi-times" (click)="clearmail1(ri)" style="margin-right: -16px;"></i>
<input id="email1" class="col-input-grid-100" type="text" pInputText >
</span>
Output
I'm trying to center align a button in Wordpress using html. I know it's basic, but I'm a total noob.
Below is the code I'm trying to edit. Thanks for your help!
<div class="frm_submit">
[if back_button]
<button type="submit" name="frm_prev_page"
formnovalidate="formnovalidate" class="frm_prev_page [back_hook]>
[back_label]
</button>
[/if back_button]
<button class="frm_button_submit" type="submit" [button_action]>
[button_label]
</button>
[if save_draft]
<a href="#" tabindex="0" class="frm_save_draft" [draft_hook]>
[draft_label]
</a>
[/if save_draft]
</div>
You should be able to center your button by adding the following CSS
.frm_submit {
text-align: center;
}
<button> elements have display: inline-block; on them by default, therefore it's possible to center them by adding the text-align: center; to the container.
Let me know if you need help on how to add the CSS to your website :)
I want to adjust labels text gap automatically between labels.
"Labels" are under the "Buttons".
Here is the code:
<style>
.btn{
margin-right: 5px;
display: inline-block;
text-align: center;
position:relative;
}
.btn label {
display: block;
position:relative;
}
</style>
<!-- Html Part - All show horizontically -->
<button class="btn">Medicine 1</button>
<button class="btn">Medicine 2</button>
<button class="btn">Medicine 3</button>
<button class="btn">Medicine 4</button>
<br>
<!-- here I want to adjust position button relative -->
<!-- I want position/gap of labels adjust automatically under the buttons -->
<!-- Labels under the buttons looks good and aligned-->
<label class="btn">2 mg</label>
<label class="btn">500 mg</label>
<label class="btn">650 mg</label>
<label class="btn">250 mg</label>
https://jsfiddle.net/
Any idea or suggestions would be welcome.
Add a margin-bottom: 15px to the .btn label css that you have in your code. Keep the rest of the code too because label is in fact an inline-element so you have to override it to display: block so that it acts like a block element and only then would the margin work on it.
I am using Bootstrap 3. Here is my HTML page:
As you can see the star is downside to the title. I want to align with title
Here is my html code:
<p class="pull-right visible-xs">
<h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500
<button type="button" class="btn bookmark" id="1799" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</center>
</h3>
</p>
and css:
button.bookmark {
border:none;
background: none;
padding: 0;
}
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
My answer to your previous question only works when the icon is adjacent to a .btn.
The idea being that the two align perfectly as if they were two .btns.
In this case you don't need the .btn class, you can just set the vertical align on the button.
<button type="button" class="bookmark" id="1799">
button.bookmark {
border:none;
background: none;
padding: 0;
vertical-align: middle;
}
Demo
I believe the line-height in your css that's causing it. It is inheriting the attribute and it might be smaller causing it to have too much space above it. If you have a link I can check it in firebug. If not try messing with that. You can also find some cool info about it Here
Hopefully that helps, Let me know if that does it
I am using Bootstrap 3 in my project.
Here is my html page:
As you can notice, the star is not aligned in line with the view details button below.
Here is my html code
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small></p>
<p>
<a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a>
<button type="button" class="bookmark" id="1799" ><span class="
glyphicon glyphicon-star-empty "></span></button>
</p>
</div><!--/span-->
css file:
button.bookmark {
border:none;
background: none;
padding: 0;
}
The problem is, that the span with the star icon is already an inline-block with different height and line-height. The button which surrounds the span is also an inline-block element, that's why it is a bit complicated.
Another fix would be, to remove the span inside the button and add the classes from the star-icon to the button like this:
<button class="glyphicon glyphicon-star-empty bookmark">
Now you have the same styling for both buttons and they align correctly when you add
vertical-align: middle; to the star button.
http://jsfiddle.net/a29hC/
There's a number of ways this can be achieved. I'd use one of the following:
Option 1 - relative position with top
button.bookmark {
border:none;
background: none;
padding: 0;
position: relative;
top: 2px;
}
Demo
Option 2 - give the button a .btn class so it has same layout styles as the .btn next to it, then remove left and right padding
<button type="button" class="btn bookmark" id="1799" >
button.bookmark {
border:none;
background: none;
padding-left: 0;
padding-right: 0;
}
EDIT: Note that the gylphicon gets given a line-height of 1 by Bootstrap. With this technique we don't want that because we want it to match the .btn. So that can be overridden:
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
Demo
Try putting the two images in a div and using the vertical-align property.
Example:
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small>
</p>
<div> <a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a> <button type="button" class="bookmark" id="1799"><span class="glyphicon glyphicon-star-empty" style="vertical-align: middle;"></span>
</button>
</div>
</div>
why not just put the star inside the button and let Bootstrap align it for you? You can also add the btn class to the <a> tag to style it as a button. Less code :)
<a class="btn btn-default" href="/search/1799/detail/" class="bookmark" id="1799">
View details <span class="glyphicon glyphicon-star-empty"></span>
</a>
Edit: the reason I made this suggestion is a personal preference; I prefer to let Bootstrap do its thing and not add too much additional CSS positioning as it might get in the way when resizing the browser, etc.
Bootstrap may have some special class for this... however it might rely on a set of circumstances. I think you'd be better off thinking of this as a CSS positioning question.
You want to align 2 elements to one another, vertically. elements which are display: inline or inline-block can align with vertical-align. You can read about that HERE.
In your case, you will want the two elements to be display: inline-block so that you can give them shape and position like a block element, and still have access to some of the properties an inline element would have. Once they are both display: inline-block you can align them with vertical-align: middle;. 2 things to keep in mind are that you don't want them floated, and that when we say they are aligned, it is to each other and not to the box they reside in.
HTML
View Details >>
<button class="star">★</button>
CSS
a { /* reset a */
text-decoration: none;
color: inherit;
}
.button {
display: inline-block;
padding: .5em;
border: 1px solid black;
border-radius: 5px;
vertical-align: middle;
}
.star {
background: transparent;
border: 0;
display: inline-block;
vertical-align: middle;
}
Here is a jsFiddle