What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Check out the demo by clicking here: http://codepen.io/audiodude/pen/vLyNvw

The main distinction between the top and bottom sections lies in the fact that the top section utilizes an md-button with an ng-href attribute, which Angular Material compiles into an a tag. On the other hand, the bottom section features a standard md-button that is compiled as a button tag. Interestingly, despite this difference, both buttons receive the same styling from the .md-button class.

The crucial question remains: Why does the menu appear to be pushed onto a new line in the top example?

htmlcssangularjsangular-material

Answer №1

<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">
  <md-content layout="column" layout-align="start center">
    <div layout="row" layout-align="center" layout-fill>
      <md-card flex-sm="95" flex-gt-md="70" layout="column">
        <div layout-sm="column" layout-gt-sm="row" flex>
          <div flex layout>
            <md-button ng-href="https://www.google.com" class="md-primary">
              <md-icon aria-label="launch">launch</md-icon> Link
            </md-button>
            <md-menu>
              <md-button aria-label="Open edit menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                <md-icon md-menu-origin>arrow_drop_down</md-icon>
              </md-button>
              <md-menu-content width="5">
                <md-button>Menu Choice</md-button>
              </md-menu-content>
            </md-menu>
          </div>
          <span flex></span>
        </div>
      </md-card>
    </div>
  </md-content>

  <md-content layout="column" layout-align="start center">
    <div layout="row" layout-align="center" layout-fill>
      <md-card flex-sm="95" flex-gt-md="70" layout="column">
        <div layout-sm="column" layout-gt-sm="row" flex>
          <div flex>
            <md-button class="md-primary">
              <md-icon aria-label="launch">launch</md-icon> Link
            </md-button>
            <md-menu>
              <md-button aria-label="Open edit menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                <md-icon md-menu-origin>arrow_drop_down</md-icon>
              </md-button>
              <md-menu-content width="5">
                <md-button>Menu Choice</md-button>
              </md-menu-content>
            </md-menu>
          </div>
          <span flex></span>
        </div>
      </md-card>
    </div>
  </md-content>
</div>

Make sure to include the "layout" attribute in line 6 for proper display.

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

Selenium was unsuccessful in finding the text on the webpage

Trying to extract Amazon reviews for a specific product, the text for ratings cannot be located using selenium. However, it can be easily extracted using soup. Link to page: Sample code using Soup: link='same link as mentioned above' url=requ ...

pythoncssseleniumwebdriverwait

Develop a unique card design using HTML and CSS

I am attempting to recreate a card design similar to the one shown in the image, but I am struggling to identify the name on the right side. Even though it is supposed to be clear, I always rely on the image as a reference. https://i.sstatic.net/hDh22.png ...

htmlcss

Having trouble with AngularJs and moment.js integration?

Looking to create a simple webpage using Angular Js for date calculations. Utilizing moment.js from http://momentjs.com/ Below is the current code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ...

javascriptangularjsmomentjs

Enhancing communication between controllers and HTML in AngularJS through scope updates

I have created a new functionality within a telerik grid that tracks the ID of a record. When a row is selected in the grid, the associated service updates the data successfully. However, I am facing an issue where the controller responsible for navigation ...

angularjs

What is the best approach to create a JavaScript search filter function spanning two pages?

Page1.html has a form with a drop-down menu containing options Color and Shape. There is also a submit button. Assuming Page2.html displays various shapes like Blue Square, Red Square, Blue Circle, Red Circle, is it feasible to create a JavaScript file th ...

javascriptjqueryhtmlcssfilter

All UL and LI elements are aligned horizontally both before and after

Our website designer is looking to create a vertical UL / LI list that matches the design in the image below. However, when using this style, I ended up with: The result looked like this: <style type="text/css"> ul { list-style: none; } u ...

htmlcss

Guide on making a JavaScript button with both "light and dark" modes

Currently, I am attempting to change the color scheme of the page by adjusting the :root variables using a function called changeBackgrondColor(). This function is then assigned to the fontAwesome moon "button". However, when I click on the moon, the pag ...

javascripthtmlcss

Struggling to display a chart using angular-chart

I am facing an issue with rendering my chart. I have followed the instructions provided on the GitHub page of angular-chart.js. I have created a plunker to showcase my problem: http://plnkr.co/edit/x7XJhxxvYMzWr3u7lBcJ?p=preview Although I can access and ...

javascriptangularjsangular-chart

switch between showing and hiding dynamic table rows

As I dynamically add rows to a table, each row can either be a parent row or a child row. My goal is to toggle the visibility of child rows when the parent row is clicked. if (response != null && response != "") { ...

javascripthtmlajaxjquery

Adjust webpage display with JavaScript

Utilizing the mobile-first approach of Zurb Foundation, I successfully created a responsive design. However, my client now requires a direct link labeled "View desktop version" in the footer for when the website is accessed on mobile devices or tablets. T ...

javascriptcssmedia-querieszurb-foundation

A guide on retrieving real-time data from PHP using Ajax

Being new to Ajax, I am struggling to grasp how to retrieve changing variable values from php. Below is the code snippet that I have been working on: <?php $pfstatetext = get_mypfstate(); $cpuusage= cpu_usage(); ?> <div id="show"> <c ...

javascriptphphtmlajax

Are Bootstrap Input groups inconsistent?

Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...

javascripthtmlcsstwitter-bootstrap

Select an element within a repeater using Protractor following an $http request

As I embark on protractor testing for my sails.js / AngularJS application, I encounter an issue with the ng-repeat element in the HTML code: <div ng-repeat="book in books"> book.name </div> During my test, a button click triggers a $http PO ...

ajaxangularjsseleniumsails.jsprotractor

Arranging images and text side by side with varying breakpoints using Bootstrap classes

In my layout, I have an image and text side by side, with the image appearing first and the text to its left. My goal is to display the text above the image when the screen size is reduced to a small breakpoint, and then switch back to the original layou ...

htmlbootstrap-4

The dropdown menu in the navigation bar is getting hidden behind the content

My simple navbar is currently functioning, but it's overlapping with other content. Both the navbar and main content elements use relative and absolute positions to function. I have tried adjusting position:absolute without success. The menu keeps ...

htmljquerycssflexboxcss-grid

Tips for positioning the avatar to the right along with other links?

I've encountered various methods to align text or an image to the right, but I'm having trouble aligning a basic avatar with some text. It used to work before I switched to material-ui-next, and now I can't seem to get them aligned properly. ...

htmlcssreactjsmaterial-uiavatar

What is the best way to activate ui-sref in an AngularJS unit test?

Currently I am conducting a test on an AngularJS view. The code sample contains some non-standard helpers, but they should not affect the specific functionality being tested. Below is the view (written in Jade): #authentication-options button#sign-up(u ...

javascriptangularjsunit-testingangular-ui-router

Is there a bug in IE9 with CSS precedence?

Two CSS rules are in place: .avo-lime-table th, .avo-lime-table td { background-color: grey; } Next rule: .avo-lime { background-color: green; } All is functioning correctly in FireFox, Chrome, Opera and Safari. However, as usual, Microsoft&apos ...

cssinternet-explorerfirefoxoperator-precedence

Bootstrap 3.2.0 Grid Column Creation Problem Identified

On my webpage using Bootstrap 3.2.0, I have a layout that includes dynamic column generation and content within those columns. However, I am facing an issue with this setup. Can anyone advise me on how to resolve it? Your help is greatly appreciated. ...

csstwitter-bootstraptwitter-bootstrap-3

Is there a way to eliminate the gap beneath each row of my Tic-Tac-Toe grid in Next.js with CSS styling?

What could be causing the space under every row in my CSS? I am currently developing a tic-tac-toe application using Next.js to enhance my skills. However, I have encountered an issue with the CSS where there appears to be a small space underneath each bo ...

cssnext.js