How can I align elements to the right in an md-toolbar?

I am having trouble positioning the FAB speed dial within a toolbar to float on the right side. I have tried using float: right, but it did not work as expected. I also attempted using flex with offset="55", but this solution doesn't hold up when resizing the window. Essentially, I want the button to always be on the far right within the blue toolbar container, regardless of window size.

Check out the image and code below:

https://i.sstatic.net/himVT.png

<md-toolbar layout-fill layout-padding layout="row" style="background-color: #3F51B5;color:white;text-align:text-center;">
    <div layout="row">
        <i class="fa fa-users fa-2x" flex></i>
        <h1 class="md-title" style="color:white">Org Chart</h1>                                 
    </div>  
    <div class="lock-size" flex offset="55">
        <md-fab-speed-dial md-direction="left" ng-class="md-fling">
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-accent">
                    <md-tooltip>
                      Actions
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
                </md-button>
            </md-fab-trigger>
            <md-fab-actions>
                <md-button aria-label="view" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      View Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon>
                </md-button>
                <md-button aria-label="add" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      Add Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon>
                </md-button>
                <md-button aria-label="Settings" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      Security Access
                    </md-tooltip>                               
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon>
                </md-button>                                
                <md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')">
                    <md-tooltip>
                      Edit Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon>
                </md-button>                                
            </md-fab-actions>
        </md-fab-speed-dial>
    </div>  
</md-toolbar>
cssangularjsangular-material

Answer №1

Another approach is to utilize a specific class:

.fill-space {
  // Utilize flexbox to fill the remaining space.
  // Each toolbar row follows a flexbox row layout.
  flex: 1 1 auto;
}
<md-toolbar color="primary">
  <span>Application Title</span>

  <!-- Fill the remaining space of the current row -->
  <span class="fill-space"></span>

  <span>Right Aligned Text</span>
</md-toolbar>

This method is also derived from a specification.

Answer №2

For Angular Material version 1.x, the easiest way to align right content within an md-toolbar is as follows:

<md-toolbar>
    <div class="md-toolbar-tools">
        <h3>Your text</h3>
        <span flex></span>
        <ANY>your right content</ANY>
    </div>
</md-toolbar>

The flex property in the span element will help cover the space between the contents, following the official documentation guidelines.

In your specific case, you can simply use:

<md-toolbar>
    <div class="md-toolbar-tools">
        <div layout="row">
            <i class="fa fa-users fa-2x" flex></i>
            <h1 class="md-title" style="color:white">Org Chart</h1>
        </div>
        <span flex></span>
        <md-fab-speed-dial md-direction="left" ng-class="md-fling">
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-accent">
                    <md-tooltip>
                        Actions
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
                </md-button>
            </md-fab-trigger>
           <!-- More code continues... -->
        </md-fab-speed-dial>
    </div>
</md-toolbar>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embed a service within an Angular 1.5 component

I'm struggling with initializing a test.service.js file from an angular1.5 component and I'm not entirely sure how to accomplish it. Below is the structure I have used for my angular components: var testComponent = { templateUrl: "app/compo ...

javascriptangularjsservicecomponents

Iterate through an array using ng-repeat and calculate the total value

Recently, I came across this interesting data: , generated by a CakePHP application. The data consists of songs with attached votes. I integrated this data into an AngularJS application and displayed it in HTML like so: <div ng-repeat="song in songs | ...

angularjseach

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

htmlcsstwitter-bootstrap

Crafting a Cubic Masterpiece with Pure CSS Gradient Magic

Experimenting with various techniques involving linear gradients, I have achieved layers of multiple stripes but have encountered a block when it comes to the top face. My goal is to use gradients, whether linear or radial, to create a series of repeatin ...

htmlcssgraphics3d

Transfer the iteration's value to the function's parameter

Recently delving into angular js and hoping to achieve this. Here is a snippet of my code: <tr data-ng-repeat="element in awesomeThings"> <td ng-click="getServiceDetails()"> <a href="#"> {{element}} </a ...

javascriptangularjs

Identify the invalid field within an Angular form

After the form is rendered, I need to identify which fields are not valid after 5 seconds. Currently, I have a button that is set as ng-disabled="!step1Form.$valid". However, I would like to add a CSS class, possibly in red, to highlight the invalid fields ...

javascriptjqueryangularjsangularjs-scope

AngularJS - utilizing the directive $parsing to evaluate an expression and bind it to the scope object

I have set up my isolated directive to receive a string using the @ scope configuration. My goal is to convert this string into an object on the scope, so that I can manipulate its properties and values. Here's how it looks in HTML: <div directiv ...

javascriptangularjsangularjs-directiveangularjs-scope

Eliminate the empty gap preceding the slideshow

I have a slideshow and aside content in HTML. My goal is to eliminate the space below the slideshow so that the aside content can be positioned right next to the end of the slideshow. Unfortunately, I am unsure how to remove this space without disrupting ...

jqueryhtmlcsswebslideshow

Setting the height of a box-inner div to full height in Bootstrap 4: A guide

Assistance Needed: I have encountered an issue with my design while using bootstrap-4. The box-inner div works perfectly on desktop, adjusting its height according to the content entered. However, on a real iPad, the columns are not of equal height as sho ...

htmlcssbootstrap-4

Click on the logo to return to the home page

Logo Link Causing Menu Alignment Issue After setting the logo as a link, the menu unexpectedly shifts to the right. Upon inspecting the menu element, it appears that there is an additional hidden menu link on the left side leading to index.html. Can anyon ...

htmlcsshyperlink

Get rid of the dashed outline surrounding the selected button

One of my divs has a button inside that, when clicked, creates an outline around it. Here is what it looks like: https://i.sstatic.net/pEr53.png **Code: ** .slide-arrow { color: #fff; background-color: #9E9997; border: none; padding: 16px 10px ...

htmlcss

Secure your browsing experience with AngularJS authentication prompt

Currently, I am working on building an application using AngularJS for the front-end and JavaEE for the back-end. In my AngularJS application, I am trying to access a REST resource provided by the back-end which is protected with JAAS authentication, allow ...

javajavascriptangularjsauthentication

Having trouble making an AJAX request work in AngularJS?

Just dipped my toes into the world of Angular (only a few hours in). Managed to tweak the demo to get close to what I need, but hitting a roadblock with my AJAX request. After trying a variety of fixes, one puts me in an endless loop (discovered that&apos ...

javascriptajaxangularjs

Overlapping Bootstrap cards conundrum

Does anyone know how to align Bootstrap cards and make them responsive? I have them centered, but they are overlapping and sticking to the left side. This is for email development with a maximum width of 680px. Any assistance would be greatly appreciated! ...

htmlcsscard

Issue with AngularJS where the value in a dropdown list does not bind to ng-model if there are no changes made

Please check out my plunkr for reference: https://plnkr.co/edit/QRQQmxf3ZDyh6o0CqtrD?p=preview I have a form with a dropdown list that is dynamically populated as shown below: <form name="frmAccount" role="form" ng-submit="submit()"> <div ...

angularjsangular-ngmodelangularjs-select

Animating a dropdown menu with jQuery

I have a typical submenu structure set up like this: <ul> <li> <a href="#">Parent link</a> <ul> <li><a href="#">Submenu link</a></li> </ul> </li> </ul> In my de ...

javascriptjquerycssanimationdrop-down-menu

Adding content before an element in an Angular directive

Shown below is the HTML code: <div class="row"> <div ng-if="isLoadingApprovalUrl" class="col-xs-12"> <div class="text-center"><span class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></span></div> </div ...

javascriptjqueryangularjs

Bootstrap Modal fails to display unless fade class is included

I'm feeling lost with this situation. I am working with bootstrap 4 and trying to create a modal without any animation effects. According to the official website, it says to remove the "fade" class for a non-animated modal. So I followed the instructi ...

htmlcssbootstrap-4

Issue with styling of ActionLinks and regular anchor links in MVC due to their small size

I recently encountered an issue that I couldn't resolve using an ActionLink, so I had to resort to using a regular hyperlink. Both links are styled similarly on the page due to passing the same css conditions, but I observed two key differences betwe ...

htmlcssajaxasp.net-mvc-3

Attempting to repopulate a table upon a change in the selection

Is there a way to refresh the data in my table when the selected option is changed? I'm unsure how these two controllers can communicate with each other, even though they are both part of the same ng-app. <div class="inner" ng-app="fixturesApp"&g ...

angularjs