How to Position Elements to The Right in Md-Toolbar

How to position elements to the right in md-toolbar?

THIS SOLUTION IS FOR ANGULAR MATERIAL v1.X, IF YOU NEED AN UNIVERSAL/ANGULAR MATERIAL v2 SOLUTION CHECK @experimenter ANSWER

If you have a md-toolbar the easiest way to align right content is like this:

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

The flex property in span will cover the space between the contents. This is the official way in documentation.

In you example, you just need:

<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>
            <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>

Mat-Toolbar Align Items (left, center and right)

Are you looking for something like this ?

<div fxShow="true" fxHide.lt-md fxFlex fxLayout>
  <!-- The following menu items will be hidden on both SM and XS screen sizes -->
  <div fxFlex>
     <a href="#" mat-button>Align left</a>
     <a href="#" mat-button>Align left</a>
  </div>
  <div fxFlex fxLayoutAlign="center center">
     <a href="#" mat-button>Align center</a>
     <a href="#" mat-button>Align center</a>
  </div>
  <div fxFlex fxLayoutAlign="flex-end center">
     <a href="#" mat-button>Align right</a>
     <a href="#" mat-button>Align right</a>
  </div>
</div>

Can md-toolbar be fixed top when inside md-sidenav-layout?

For anyone else struggling with this, the reason why it's difficult is because both md-sidenav-layout and md-sidenav-content both specify

transform: translate3d(0,0,0)

What this does is reset the coordinate system for child elements. This is a known 'issue' or consideration with using transform3d. The alternative we came up with was to site the md-toolbar outside the md-sidenav-layout like this:

<div style="position: fixed; width: 100%">
  <md-toolbar>...</md-toolbar>
</div>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>

Doing the above gets the required effect of a fixed md-toolbar with a full screen layout.

See this SO for more info on the fixed/translate3d issue: 'transform3d' not working with position: fixed children

How move a button to the right side of the container in Material design

You're missing the class on the text <span> which allows it to fill the space:

See full example here.

.example-fill-remaining-space {  // This fills the remaining space, by using flexbox.   // Every toolbar row uses a flexbox row layout.  flex: 1 1 auto;}
<md-toolbar color="primary">  <span>Application Title</span>
  <!-- This fills the remaining space of the current row -->  <span class="example-fill-remaining-space"></span>
  <span>Right Aligned Text</span></md-toolbar>

How to align three icons to the right of the page headline

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>

md-toolbar cuts off from right when resizing screen width

Put your md-toolbar inside another div with 100% width and flex-shrink & flex-grow set to 0. Also set a min-width for your toolbar.

In your component.css:

.fill-remaining-space {
    flex: 1 1 auto;
}
.header {
    min-width: 1024px;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
}

... and in your component.html:

<div class="header">
    <md-toolbar color="primary" layout-fill>
        <span>Crayons and Clay</span>
        <span class="fill-remaining-space"></span>
        <div fxLayout="row" fxShow="false" fxShow.gt-sm>
            <button md-button routerLink=''>Home</button>
            <button md-button routerLink='/ourschool'>Our School</button>
            <button md-button routerLink='/communityevents'>Community Events</button>
            <button md-button routerLink='/admission'>Admissions</button>
            <button md-button routerLink='/contact'>Contact</button>
        </div>
        <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
            <md-icon>menu</md-icon>
        </button>
    </md-toolbar>
    <md-menu x-position="before" #menu="mdMenu">
            <button md-menu-item routerLink="/signin">Sign in</button>
            <button md-menu-item routerLink="/dashboard">Inquiry</button>
        </md-menu>
</div>

Here is a working plunker: DEMO

unabled to display some element and text at the right place in a card

You should try leveraging the @angular/flex-layout Library for this. Additionally, you should consider moving your styles to your CSS File, since this will make your HTML File a lot cleaner and the styles more reusable. In your stackblitz you missed to include the styles for @angular/material in your SCSS File and you did not import the @angular/flex-layout module, which is why your stylings were messed up.

I tried to fix your example on Stackblitz. To get the desired spacings for your text, simply add paddings or margins to the left of those elements. Also beware of your image: You have to add a fitting height property, or it will become cropped/stretched.

Material Ui React - navbar not aligning box to right

  1. You need to use justifyContent or justifySelf to move content on the main axis and alignContent and alignSelf to move content on cross axis, you were using the wrong CSS property since the main axis in this case is row. For more info. regarding flexbox axes please refer to this link
  2. Let me simplify this for you.
  3. The work around is fairly easy. The parent Container has two children "Logo/Typography" and "Box", you want the "Box" child to move at the end of the container, you just need to give parent (Toolbar) justifyContent: space-between property to make sure both children are at opposite ends.

Play around with the code here

Sample Image

<AppBar position="static" sx={{ backgroundColor: "blue" }}>
      <Container maxWidth="xl">
        <Toolbar
          disableGutters
          sx={{
            display: { xs: "flex" },
            flexDirection: "row",
            backgroundColor: "blue",
            justifyContent: "space-between"
          }}
        >
          {/* LOGO */}
          <Typography
            variant="h2"
            noWrap
            component="div"
            color="black"
            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
          >
            name
          </Typography>

          {/*Drawer - small screen  */}
          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
            {/* Menu triple bar */}
            <IconButton
              size="large"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={handleOpenNavMenu}
              color="inherit"
            >
              <MenuIcon />
            </IconButton>

            {/* ABOUT, PROJECTS, CONTACT - small screen */}
            <Menu
              id="menu-appbar"
              anchorEl={anchorElNav}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "left"
              }}
              keepMounted
              transformOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              open={Boolean(anchorElNav)}
              onClose={handleCloseNavMenu}
              sx={{
                display: { xs: "block", md: "none" }
              }}
            >
              {pages.map((page) => (
                <MenuItem key={page} onClick={handleCloseNavMenu}>
                  <Typography textAlign="center">{page}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>

          {/* LOGO - small screen */}
          <Typography
            variant="h6"
            noWrap
            component="div"
            color="black"
            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
          >
            name
          </Typography>

          {/* Issue */}
          {/* ABOUT, PROJECTS, CONTACT - full screen */}
          <Box
            sx={{
              display: { xs: "none", md: "flex" }
            }}
          >
            {pages.map((page) => (
              <Button
                key={page}
                onClick={handleCloseNavMenu}
                sx={{ my: 2, color: "black", display: "block" }}
              >
                {page}
              </Button>
            ))}
          </Box>
        </Toolbar>
      </Container>
    </AppBar>

Related Topics

How to Position Element in The Correct 3D Position with CSS Perspective

How to Use a Material Theme Colors in My CSS in Angular2

Command-Line Argument as Var in Sass, for Hardcoded Cdn Url's on Compile

Firefox-CSS: Border-Radius Issue for Pseudo-Element "Before"

How Md-Icons Are Rendered on Browser

CSS on Parent Hover Keep Child Not Filter-Grayscaled

CSS Display Not Working

Jsf <F:Facet> Contents Not Rendered

Rem Fallback for Ie7-8

Text Overlapping Items in Dropdown Items

I Need Help Making CSS for a Modern Vertical Navbar

How Is The Screen Size Measured for Media Queries

Color for Styled Placeholder Text Is Muted in Firefox

CSS: Fix The Height of a Section Within a Variable Height Element

Twitter Bootstrap 3 Modal with Scrollable Body

Styling Not Applied to Vue Web Component During Development

Rails - Application.CSS Asset Not Found in Production Mode

Building a 4 Corners-Colors CSS3 Gradient


Leave a reply



Submit