Cannot align input and button with Angular

Question

I am having some trouble aligning an input and button on the same line. I am new to using Angular-Material, but I cannot seem to find any documentation or forums explaining how to solve my issue.

I was able to make it work by having the md-button sit outside of the form and flex, but this stops the natural functionality of hitting enter and submitting.

This is how it looks:

This is how I want it to look:

How could I correctly do this with Angular-Material?

HTML

<div layout="row" layout-align="center center">
  <div class="bannerCenter" flex-sm="90" flex-gt-sm="60">
    <div layout="row" layout-align="center end" style="height: 100px;">
      <h1><span class="icon-bunny-logo text-purple logo-large"></span><span class="icon-text-logo text-black logo-text-large"></span></h1>
    </div>
    <md-content class="text-black md-content-transparent" flex layout-padding>
      <p class="banner-text banner-text-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sagittis sapien. Quisque et tincidunt orci. In hac habitasse platea dictumst. Nam luctus leo sit amet aliquet tincidunt. Donec nec elementum nunc. Nam ut pretium elit. Mauris mollis et neque eu rutrum.</p>
      <p class="banner-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sagittis sapien. Quisque et tincidunt orci. In hac habitasse platea dictumst. Nam luctus leo sit amet aliquet tincidunt. Donec nec elementum nunc. Nam ut pretium elit. Mauris mollis et neque eu rutrum.
      </p>
      <p class="banner-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sagittis sapien. Quisque et tincidunt orci. In hac habitasse platea dictumst. Nam luctus leo sit amet aliquet tincidunt. Donec nec elementum nunc. Nam ut pretium elit. Mauris mollis et neque eu rutrum.
      </p>
    </md-content>

    <div class="banner-text-top" layout="row" layout-align="center center" layout-wrap>
      <div flex="65">
          <form name="subscriptionForm">
            <md-input-container class="md-block">
              <label class="text-black">Email Address</label>
              <input class="bigClass text-black" ng-model="something.email" type="email" ng-required="true">
            </md-input-container>
            <md-button type="submit" class="md-raised" ng-click="something.save(newSomething); newSomething='';">Submit</md-button>
          </form>
        </div>
    </div>
  </div>
</div>

I have the solution, let me come Back Home And if no answer are give I will post mine. — Gianmarco
– Gianmarco, Commented Dec 5, 2015 at 8:43

Maurizio Vacca · Accepted Answer · 2015-12-05 09:11:50Z

4

The problem lies in the fact that you're using the md-block class in your md-input-container.

Here's a working pen: http://codepen.io/anon/pen/GoRxGP

Best!

answered Dec 5, 2015 at 9:11

Maurizio Vacca

1531 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Austin Perez Over a year ago

No that did not solve the issue. I still have the same effect as before.

Alaksandar Jesus Gene · Accepted Answer · 2016-10-10 02:34:58Z

0

This worked for me

md-input-container .md-error-spacer{
display:none;
}

answered Oct 10, 2016 at 2:34

Alaksandar Jesus Gene

6,89113 gold badges61 silver badges92 bronze badges

Comments

Austin Perez · Accepted Answer · 2015-12-05 19:45:27Z

-2

I ended up solving the issue myself. I basically started over and referred to the Material-Angular documentation demonstrating inputs. This is how I ended up fixing this:

HTML

<form name="subscriptionForm">
  <div layout layout-align="center center">
    <div layout layout-align="center center" layout-sm="column" flex="65">
      <md-input-container flex>
        <label class="text-black">Email Address</label>
        <input class="text-black" ng-model="newSomething.email" type="email">
      </md-input-container>
      <md-button layout="column" class="md-raised" ng-click="something.save(newRSomething); newSomething='';">Submit</md-button>
    </div>
  </div>
</form>

answered Dec 5, 2015 at 19:45

Austin Perez

5977 silver badges27 bronze badges

2 Comments

Gianmarco Over a year ago

that is exactly what @Maurizio Vacca said to you!

Austin Perez Over a year ago

@Gianmarco no not exactly! Lol The outcome looks the same, but Maurizio Vacca's answer did not seem to work in the code i have already.

Collectives™ on Stack Overflow

Cannot align input and button with Angular

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related