AngularJS set element fixed position based on another element

Question

This app takes an image, which is essential a background, or workspace. I need to add input text fields onto this workspace given specific coordinates (top, left, width, height). These coordinates would be relative to the image (top/left = 0/0). How would I position my fields/elements relative to the image?

        <img id="background" ng-src="{{page.backgroundImage}}" />
        <input type="text" ng-repeat="field in page.fields" ng-model="field.value" 
               ng-style="{position:'absolute',
                              left:field.left,
                               top:field.top,
                             width:field.width,
                            height:field.height}"/>

The code above works great for absolute positioning but it is not relative to the image.

You can use ng-class to dynamically add/remove classes and there's also ng-style if you want to directly bind to style values — Brocco
– Brocco, Commented Apr 8, 2014 at 15:48
This works great, I still have the problem of how to set my position relative to the other element though. — Ryan Langton
– Ryan Langton, Commented Apr 8, 2014 at 16:12
Can't you just wrap both the img and input's list into a div with position relative? Then the absolute position of the inputs would be based upon the div? — Brocco
– Brocco, Commented Apr 8, 2014 at 16:25
I added the code for the entire page so you can see the context. Wrapping it in a relative position div isn't doing anything. The image is in the right place, the input box it showing up outside of the image. — Ryan Langton
– Ryan Langton, Commented Apr 8, 2014 at 17:01
The image should fill the div, and the inputs would be relative to the div therefore relative to the image. If you're going to solve it just with CSS, I'd suggest working on it with static content (no angular) then plug in the ng-style values from your model. Also an example via fiddle or plnkr would be helpful. — Brocco
– Brocco, Commented Apr 8, 2014 at 18:03

cdhowie · Accepted Answer · 2015-11-05 17:31:19Z

4

<div style="position:relative">
    <img id="background" ng-src="{{page.backgroundImage}}" class="course-image" />
    <input type="text" ng-repeat="field in page.fields" ng-model="field.value"
           style="position:absolute"
           ng-style="{left:field.left,
                       top:field.top,
                     width:field.width,
                    height:field.height}" />       
</div>

edited Nov 5, 2015 at 17:31

cdhowie

172k25 gold badges303 silver badges324 bronze badges

answered Apr 8, 2014 at 18:30

Ryan Langton

6,18016 gold badges56 silver badges105 bronze badges

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

2 Comments

gkalpak Over a year ago

Just a little heads-up: It is better not to include contant values in ngStyle directive (e.g. position: 'absolute'). This causes an extra evaluation per digest loop (and there are several of those going on all the time). Since it will always evaluate to the same value, just hard-code it in the style attribute.

Thiago C. S Ventura Over a year ago

Just a point in your answer. The attribute style need to be a common html style like: style="position: absolute"

Collectives™ on Stack Overflow

AngularJS set element fixed position based on another element

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related