What is the best method for centering text input within an Angular Material toolbar?

Can anyone help me with aligning input elements with buttons on an Angular Material toolbar?

Check out the code pen: http://codepen.io/curtwagner1984/pen/amgdXj

Here is the HTML code:

<md-toolbar class="md-hue-1" layout-align="start center" style="min-height:15px; height: 50px" ng-show="$ctrl.showSearch">
    <div class="md-toolbar-tools">
        <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
            back
        </md-button>
        <md-input-container flex="">
            <input ng-model="searchInput" placeholder="Search here">
        </md-input-container>
        <md-input-container>
            <md-select ng-model="$ctrl.test">
                <md-option value="Option 1 Not Align">Option 1</md-option>
                <md-option value="Option 2 Not Align">Option 2</md-option>
            </md-select>
        </md-input-container>

        <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
            Search
        </md-button>
        <md-button ng-click="showListBottomSheet($event)">
            settings
        </md-button>
    </div>

</md-toolbar>

The CSS used is the default Angular Material CSS file. Would appreciate any guidance on achieving alignment in this scenario.

I've also checked out this resource: . However, I couldn't find a suitable solution as the input container in my toolbar remains misaligned.

htmlcssangularjsangular-material

Answer №1

If you're looking for a solution, check out this example on CodePen.

Key points to remember:

  • Remove class="md-toolbar-tools"
  • Place md-select inside an md-container
  • Wrap the two md-input-container elements within a div

This approach follows Angular Material guidelines and eliminates the need for extra CSS.

Update 1: To set the height of the md-toolbar to 50px, adjust its style accordingly, but keep in mind that the input label may not be fully visible.

Update 2: If you prefer the 50px height without the label being cut off, add the md-no-float attribute to the md-input-container.

Example Markup:

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">

  <md-toolbar class="md-hue-1" ng-show="true">
    <div layout="row" layout-align="start center">
      <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
        back
      </md-button>
      <div layout="row" flex>
        <md-input-container flex>
          <input ng-model="searchInput" placeholder="Search here">
        </md-input-container>
        <md-input-container flex>
          <md-select ng-model="$ctrl.test">
            <md-option value="Option 1 Not Align">Option 1</md-option>
            <md-option value="Option 2 Not Align">Option 2</md-option>
          </md-select>
        </md-input-container>
      </div>
      <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
        Search
      </md-button>
      <md-button ng-click="showListBottomSheet($event)">
        settings
      </md-button>
    </div>

  </md-toolbar>
</div>

Answer №2

Include this CSS class in your stylesheets for aligning specific elements.

.align-items {
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

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

Serve static assets

Whenever I go to 'http://localhost:8787/article_detail/41', the css and js files are not loading. However, when I visit 'http://localhost:8787/about', all files load correctly. Why is that? app.js app.use(bodyParser.json()); app.use(b ...

angularjsnode.jsexpress

Having trouble invoking PHP functions from AngularJS

Hey there, I'm a complete beginner in web development. I have an HTML file with AngularJS code that calls a .php file, both located in my local folder. I've tried looking online, but: Installing a server is not possible as this will be used ...

phphtmlangularjs

Tips for implementing a DatePicker in JHipster's UI

Looking to enhance the functionality of a JHipster entity page by integrating the DatePicker. I've already included the necessary dependencies via Bower and added the JS library URL to the index page. However, I'm uncertain about how to incorpora ...

angularjscompass-sassangular-ui-bootstrapjhipster

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

Can anyone guide me on how to show the text above an image contained within a scroll bar, similar to the picture below? Despite trying position property and searching online, I haven't found a solution yet. Your help would be greatly appreciated. ...

htmlcss

"The useTheme hook is not functioning as expected when used within a className

I've defined a custom theme in my App.js file like this: let theme = createTheme({ palette: { bgCells: { textAlign: 'right', color: '#8ccadf', backgroundColor: '#eef7ff' } } }); In another c ...

cssreactjsreact-hooksmaterial-ui

Rdash Angular: How to Implement a Fixed Header Position on Page Scroll

Hi there, I am currently utilizing Rdash Angular Js. I am wondering if it's achievable to keep the header position fixed while scrolling through the page. I attempted a solution using CSS as shown below, unfortunately it didn't have the desired ...

cssangularjsheader

Tips for sending JSON data via an HTTP POST request

Hello there! I am relatively new to programming and Angular. Within my controller, I have the following data: temanService.create({ Userid: $scope.datateman.userid, Address: $scope.datateman.address, Employeeid: $scope.datateman.employeeid, ...

angularjs

Utilizing Paragraph Styles Within a CSS Stylesheet

I'm attempting to create two unique styles for a pair of paragraphs in an xhtml document by utilizing a CSS style sheet. Despite my efforts and extensive search, I have yet to find a clear solution. ...

cssxhtmlstylesheet

What is the best way to insert space between spans in HTML when designing email templates?

I am currently designing email templates, which means I have some limitations. Although I have used align="center", I still require some spacing between the two spans. How can I achieve this? CODE: <td width="659" height="28" bgcolor="#999999" align= ...

htmlcssemailhtml-email

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

The XmlUtil.serialize(root) function is converting empty tags into self-closing tags

Check out this cool code snippet featuring an empty div tag (<div></div>): import groovy.xml.DOMBuilder import groovy.xml.XmlUtil def HTML_STRING = ''' <html> <div></div> <div>Some text</d ...

htmlxmlgroovyxhtml

If the value of the first input is zero, display "PAID" as the value of the second input. If the value of the first input is not zero, display "NOT PAID" as the value of the second input

When the value of the first input in HTML is 0, then display "PAID" as the value of the second input. If the value of the first input is not 0, then show "NOT PAID" as the value of the second input. <label>Balance Amount</label> / ...

htmljquery

Conceal descendant of list item and reveal upon clicking

In my responsive side menu, there is a submenu structured like this: .navbar ul li ul I would like the child menus to be hidden and only shown when the parent menu is clicked. Although I attempted to achieve this with the following code, it was unsucces ...

javascriptjqueryhtmlcss

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

javascriptjqueryhtmlbase64local-storage

Customize the appearance of HTML5 input types when validation is unsuccessful

Hey everyone I have a question: Is there a CSS trick to style the red border (or shadow) of input fields that have not been validated, such as email inputs? If my explanation isn't clear enough, I'm referring to changing the color of this eleme ...

csshtmlstyling

Increase the size of the textarea when it is clicked on and revert back to its original size when it

My question revolves around a text area that I am trying to manipulate through jQuery. The desired functionality is to increase the height of the text area whenever someone clicks on it, and decrease the height when clicking anywhere else on the screen. & ...

javascriptjqueryhtml

Using simpleXML to extract HTML code from an XML document

Presented below is content extracted from an xml file: <Cell> <Comment ss:Author="Mark Baker"> <ss:Data xmlns="http://www.w3.org/TR/REC-html40"><B><Font html:Face="Tahoma" html:Size="8" html:Color="#000000">Mark B ...

phphtmlxmlsimplexml

Utilizing Directives to Embed Attributes

My current challenge involves changing the fill color of attributes in an in-line SVG using Angular and TypeScript. The goal is to have the SVG elements with a "TA" attribute change their fill color based on a user-selected color from a dropdown menu. Howe ...

angularjssvgangularjs-directivetypescript

I'm interested in exploring whether p5.js allows for the creation of a class that can draw sub-classes within itself. One idea I have in mind is to create a 4x4 grid composed of individual

My goal is to create a game similar to Tetris, where the pieces are composed of smaller blocks that share attributes. My current progress includes: export class SquareTetromino { [x: string]: any; constructor(x, y, w, h) { ... } ...

javascriptangularjsp5.js

Toggle Visibility of Elements with Javascript and Html

I've been working on implementing a "Show All / Hide All" feature. Currently, clicking on the text opens the image and text individually. However, I am looking to add a functionality for expanding all divs at once. To see how it currently functions, ...

javascriptjqueryhtmlhideshow