align image to left in angularjs html

Question

You can see rows in picture.

This is code of that view:

<div layout="row" layout-align="space-around center" >
<product-image-thumbnail layout="row" layout-align="left center"
    src="vm.callFunction(field)"
    setter="vm.callFunction(value)" />

<md-button  ng-click="vm.onMouseOver(field.getSrc))" layout="row" layout-align="right center">
    <md-icon>zoom_in</md-icon>
</md-button>
</div>

I want to align image or uploadanimage to left, zoom button to right.

But it doesnot work.

i also tried

layout-align="start start
 layout-align="end end"

but it did not do the job.

Also i tried buttons to convert to column but it is same.

it makes two rows if i dont put first layout. i need them inside a row.

this is where src image comes

<div ng-show="!vm.src" layout="row">
    <md-button class="md-button md-ink-ripple" ng-click="vm.Dialog($event)">
        <md-icon>file_upload</md-icon>
        <span translate>upload_image</span>
    </md-button>
</div>
<div ng-show="vm.src" class="thumbnail" layout="column" layout-align="center center" flex layout-padding ng-click="vm.Dialog($event)">
    <img src="{{vm.src}}" style="max-height: 60px;max-width: 60px"
         error-src="content/images/no_image_icon.gif"
    />
</div>

You have (second row) ...layout-align="left center". May be worth trying only ...layout-align="left". — FDavidov
– FDavidov, Commented Nov 13, 2016 at 14:55

Razia sultana · Accepted Answer · 2016-11-13 15:25:26Z

1

<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="left"> This is some text.</p>

answered Nov 13, 2016 at 15:25

Razia sultana

2,2513 gold badges18 silver badges21 bronze badges

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

Comments

Larry Turtis · Accepted Answer · 2016-11-13 15:34:50Z

1

If you want to use angular material, try using the space-between param. Example Plunker.

<div><!-- shouldn't need layout here-->
    <img layout="row" layout-align="space-between center"  />
    <button layout="row" layout-align="space-between center">Zoom</button>
</div>

answered Nov 13, 2016 at 15:34

Larry Turtis

1,91614 silver badges26 bronze badges

1 Comment

mark Over a year ago

it makes two rows if i dont put first layout. i need them inside a row.

Sajeetharan · Accepted Answer · 2016-11-13 15:48:23Z

1

You can try this way,

<section layout="row" layout-align="end center" layout-wrap>
    <div layout="row" layout-align="start center" flex>
      <img src="https://echtemaaltijd.blob.core.windows.net/image/image_671ed3d3-0c1e-43d5-9e9a-86247556fd00" class="md-card-image" alt="Washed Out">
      <span flex></span>
    </div>
    <md-button class="md-warn">Type</md-button>
  </section>

DEMO

answered Nov 13, 2016 at 15:48

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Joy Biswas · Accepted Answer · 2016-11-14 19:16:07Z

1

Try this with flex!

<div layout="row" layout-alignment="stretch">
    <product-image-thumbnail flex
        src="vm.callFunction(field)"
        setter="vm.callFunction(value)" />

    <md-button  ng-click="vm.onMouseOver(field.getSrc))" flex="5">
        <md-icon>zoom_in</md-icon>
    </md-button>
</div>

The flex Will take up as much space as it can till 95% of the available width and flex=5 will ensure it is 5$

answered Nov 14, 2016 at 19:16

Joy Biswas

6,5531 gold badge27 silver badges50 bronze badges

Collectives™ on Stack Overflow

align image to left in angularjs html

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related