I have a div and want to place some buttons eg; 3 buttons to the right side of the div. Can anyone help how to achieve this?
I am using Primeng with Angular2
<div class="ui-g-12" style="border:solid 1px red;">
<button pButton type="button" class="ui-button-info" label="BUTTON1"></button>
<button pButton type="button" class="ui-button-danger" label="BUTTON2"></button>
</div>
Thanks
Here is my current output. I need the button to be placed on the right side
Try this :
<div class="ui-g-12" style="border:solid 1px red; text-align:right">
<button pButton type="button" class="ui-button-info" label="BUTTON1"></button>
<button pButton type="button" class="ui-button-danger" label="BUTTON2"></button>
</div>
There is nothing link to Angular2
You just need to add css property text-align: right
For more get in touch here
https://www.w3schools.com/cssref/pr_text_text-align.asp
Add text-align: right; to the parent of your buttons:
<div class="ui-g-12" style="text-align: right; border:solid 1px red;">
<button pButton type="button" class="ui-button-info" label="BUTTON1"></button>
<button pButton type="button" class="ui-button-danger" label="BUTTON2"></button>
</div>
Related
For some reason when I added the third button, the buttons started showing in a column manner.
html:
<div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator">
<div *ngIf="isChannelEditable">
<button mat-raised-button color="accent" type="button" (click)="openDialog()">Add field </button>
<div *ngIf="isChannelReadyForBids">
<button mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for
bidding
</button>
</div>
<button mat-raised-button color="accent" type="submit">Save Channel</button>
</div>
<div *ngIf="form.value.state=='in progress'&&userId === channel.creator">
<button mat-raised-button color="accent" type="button" (click)="setState('new')">Edit channel </button>
</div>
</div>
css:
.creator-button-container{
background-color: red;
display: inline-block;
flex-direction: row;
}
I though the 'display: inline-block' would work but its not working
I looked at this solution but i didnt understand it: Angular - display buttons in rows of two
its weird because as soon as i added the third button, the buttons started being displayed as a column
Add buttons in div tag because div is block level element.
Something like this:
<div>
<div><button class="btn">B1</button></div>
<div><button class="btn">B2</button></div>
<div><button class="btn">B3</button></div>
</div>
I am a noob in web design. I have just begun experimenting with Bootstrap. I want to add two buttons
like this,
but, I am getting this on mobile devices
with this code:
<button style = "position:absolute; left:38%; top:50%; z-index=0" type="button" class="btn btn-primary btn-lg">Large button</button>
<button style = "position:absolute; left:53%; top:50%; z-index:0" type="button" class="btn btn-primary btn-lg">Large button</button>
I know I shouldn't add position attributes as they make responsiveness ineffective, but not using them places the buttons like this.
So how should I go about it? How can I specify position without affecting responsiveness?
Thank You!
Thanks to the comment by #zgood, I have it fixed with this:
<div style="width:100vw; height: 100vh; display:flex; align-items: center; justify-content:center">
<button style="margin:20px" type="button" class="btn btn-primary btn-lg">Large button</button>
<button style="margin:20px" type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
I am trying to put links in bootstrap alert box but when I do the box is too big in height? When I change the css height the text and the link is well below it? What am I doing wrong? Thankyou
The code is
<div id = "mystuff" margin-top: 15px" class="alert alert-info">
<span id="mystuff1"><button id = "button1" type = "button" class = "btn btn-link">click here</button></span>
</div>
You did not leave much detail of what you are trying to achieve, but based on what you are doing as you add elements inside the outer container it grows too tall?
This is happening because the top container has the .alert class. And this class has padding: 15px;
If you remove that padding you should see what I think you want.
Try:
<div id="mystuff" style="margin-top: 15px; padding: 0;" class="alert alert-info">
<span id="mystuff1">
<button id="button1" type="button" class="btn btn-link">click here</button>
</span>
</div>
Cannot test it right now, but I think you have to change the mystuff1 from span to div or p element.
This part of your code contains an error:
<div id = "mystuff" margin-top: 15px" class="alert alert-info">
That should be
<div id = "mystuff" style="margin-top: 15px" class="alert alert-info">
Try this code snippet.
<div id="mystuff" style="margin-top: 15px; padding: 0;" class="alert alert-info">
<span id="mystuff1">
<button id="button1" type="button" class="btn btn-link">click here</button>
</span>
</div>
You also find the detail of alert in below link:
bootstrap alert details
I am trying to get some HTML code side by side and not having any luck. Pretty new to this stuff.
Here is the code (please disregard the border stuff, that is just there to help me). I force a specific width (250px) so I can guarantee buttons stay on one line because the html to the right of button can be hidden depending on the options.
<div style="flex:0 0 auto;border:1px dashed green;">
<ul class="instructions" style="border:3px dashed blue;">
<li>
<strong>Instructions:</strong>
<span data-bind="html: instructionLabelView"></span>
</li>
</ul>
<div style="width:250px;border:1px solid red;text-align:right;vertical-align:top;float:right;">
<button type="button" class="webcms-button-default" title="Submit a request to start a new report in the database." data-bind="click: onNewReportButtonActivated, visible: hasSearched() && !hasResults() && $root.startNewReportEnabled()">Start New Report</button>
<button type="reset" class="webcms-button-default" title="Reset all search criteria.">Reset</button>
<button type="submit" class="webcms-button-default" title="Submit a search for results that match your defined criteria above." data-bind="enable: !$root.isSearching()">Search</button>
</div>
</div>
Just add display:flex to your container and flex-grow: 1 to your ul:
<div style="flex:0 0 auto;border:1px dashed green;display:flex;">
<ul class="instructions" style="border:3px dashed blue;flex-grow:1;">
<li>
<strong>Instructions:</strong>
<span data-bind="html: instructionLabelView"></span>
</li>
</ul>
<div style="width:250px;border:1px solid red;text-align:right;vertical-align:top;">
<button type="button" class="webcms-button-default" title="Submit a request to start a new report in the database." data-bind="click: onNewReportButtonActivated, visible: hasSearched() && !hasResults() && $root.startNewReportEnabled()">Start New Report</button>
<button type="reset" class="webcms-button-default" title="Reset all search criteria.">Reset</button>
<button type="submit" class="webcms-button-default" title="Submit a search for results that match your defined criteria above." data-bind="enable: !$root.isSearching()">Search</button>
</div>
</div>
You can also remove the float:right from your button div as it now makes no difference if it is there or not
Please try this code.
<!doctype HTML>
<html>
<head>
<script>
</script>
</head>
<body>
<div style="width: 100%; float: left; flex:0 0 auto;border:1px dashed green;">
<ul class="instructions" style="width: 40%; float: left;border:3px dashed blue; margin: 0">
<li>
<strong>Instructions:</strong>
<span data-bind="html: instructionLabelView"></span>
</li>
</ul>
<div style="border:1px solid red;text-align:right;vertical-align:top;float:right;">
<button type="button" title="Submit a request to start a new report in the database." data-bind="click: onNewReportButtonActivated, visible: hasSearched() && !hasResults() && $root.startNewReportEnabled()">Start New Report</button>
<button type="reset" title="Reset all search criteria.">Reset</button>
<button type="submit" title="Submit a search for results that match your defined criteria above." data-bind="enable: !$root.isSearching()">Search</button>
</div>
</div>
</body>
</html>
I hope this will help.
In styling use display:flex; to get contents on one line.
You can also change the direction of the flex.
Refer to this website for the best examples.
So I'm making a website (suprise, suprise) and I have a button on the top of the page, and when I click it, it does nothing. I am wondering how to fix it.
The button
<button class="Learn-Link" href="#VideoSlide">Learn How
<div class="Learn-Triangle"></div>
</button>
And the part I want to travel to
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
button doesn't have an href attribute you need to add an a tag inside your button
#VideoSlide{
position: relative;
top:1000px;
height: 100px;
background: pink
}
<button class="Learn-Link" >Learn How
<div class="Learn-Triangle"></div>
</button>
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
You can trigger button by using javascript
Eg:-
<button type="button" onclick="alert('Hello world!')">Click Me!</button>