CODEWITHSUNDEEP
cssangularjsangularjs-directive
Ryan Langton
Ryan Langton

Reputation: 6160

AngularJS set element fixed position based on another element

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.

Upvotes: 8

Views: 20565

Answers (1)

Ryan Langton
Ryan Langton

Reputation: 6160

<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>

Upvotes: 4

Related Questions