I have the current situation:
Relevant code:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="space-between">
<span class="page-headline">
<img class="logo" src="./logo.png"/>club
</span>
<button md-icon-button class="main_menu_button1" (click)="dinnerClicked()">
<md-icon>local_pizza</md-icon>
</button>
<button md-icon-button class="main_menu_button2" (click)="notificationsClicked()">
<md-icon>notifications</md-icon>
</button>
<button md-icon-button class="main_menu_button3" (click)="eventsClicked()">
<md-icon>event_note</md-icon>
</button>
</div>
</md-toolbar>
I just want the 3 icons to be adjacent closely to each other and align to the right. If I change fx-layout-align to fx-layout-align-xs, I get almost what I want:
But to the left instead of to the right...
I have tried many CSS configurations but none worked for me, is there any easy way to acheive this? Many thanks.
If you are using this plugin: https://github.com/angular/flex-layout#api-overview
i suggest:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="end" >
...
</div>
</md-toolbar>
Just add below code in your css:
<style>
.main_menu_button1,.main_menu_button2,.main_menu_button3
{
float:right;
}
</style>
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 have this html
<body aurelia-app="main">
<section class="section is-small">
<nav-bar class="au-target" au-target-id="5">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
<span class="icon is-medium">
<i class="fas fa-lg fa-home" aria-hidden="true"></i>
</span>
</a>
<a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
<div class="navbar-start">
<div class="navbar-item">
<a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
</div>
</div>
</div>
</nav>
</div>
</nav-bar>
<router-view name="main" class="container au-target" au-target-id="6">
<available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">
<div class="columns">
<ul class="column level">
<li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Warhammer 40k
</button>
</game-button>
</li><li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Age of Sigmar
</button>
</game-button>
</li><!--anchor-->
</ul>
</div>
</available-games>
</router-view>
</section>
</body>
it looks fine, until I expand it all the way, and then there is no space (height wise) between the full width buttons. I presume, I'm misunderstanding something about how I should be using bulma.
good
bad
note: this is the extent of my scss
#import "~bulma";
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
#import "~#fortawesome/fontawesome-free/scss/regular.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
First off, a tip: fix formatting a bit to make it more consistent to readers - more clarity to the HTML hierarchy.
Possible steps:
1) It looks like you might need some padding between each <button> element inside some <style> tags or in your scss file that target the specific class attribute/element you need.
2) I'm confused about your <game-button> element. Is it a custom element you created? If it's not, see the MDN Web Docs for examples of how to create custom HMTL elements if you need it.
3) If <game-button> is not a custom element you created, see Bulma's documentation for buttons because Bulma only requires a <button> element to work (and spacing wouldn't be an issue).
4) Check out this GitHub post regarding spacing between buttons. Although their implementation is different, you may still need to wrap your buttons in a <div class="buttons"></div> element. If there are issues after with inconsistent vertical alignment, I'd suggest using CSS display: flex;, align-items: center, and justify-content: center for centered alignment.
I have the following code:
#foreach(var data in Model.test){
<div style="margin: 3% 0 3% 2%;">
<button type="button"
class="btn btn-warning"
style="display:block; width:40%;overflow-wrap:normal;white-space:normal;padding:.5%;"
data-toggle="collapse" data-target="##data.option">
#data.Name
</button>
<div id="#data.option" class="collapse" style="width:40%;float:right;white-space:normal; overflow:scroll;">
<br />
<div>
<a>
Title: #data.Name<br />
#foreach (var item in data.Documents)
{
<p>Related Document: #item.Name</p>
}
</a>
</div>
</div>
</div>
}
When I tried general example from bootstrap site it works fine.. but when I plug in the values etc I want it fails.. what am I missing? This is in a view of an MVC web app.
I changed the id to be an incremental counter.. so now it works. As pointed out I may have had a duplicate somewhere there.
There were spaces and special chars which was causing this issue. After removing them all it worked.
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here
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>