AngularJS set element fixed position based on another element - css

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.

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

Related

Align <svg><rect> on an <input>

I have a bunch of <input> sliders, with DOM that looks something like this -
<div>
<label style="width:100px">Slider A: </label>
<input type="range" style="width:600px; height:20px;"/>
<svg width="600px" height="20px">
<rect x="0" y="0" width="300" height="20"></rect>
</svg>
</div>
I want the svg rectangle to highlight portion of the input, let's say starting at left, ending exactly at middle in this example, but other ranges are also possible.
How do I do position the svg so that it exactly overlaps the input?
I got the answer to this after some research. Posting in case anyone comes across this.
Basically define height/width for the container div, and set style="position:absolute" for the divs that need to overlap.

How do I change the position of an html input using CSS

I'm new to this, so I apologice if the questions are stupid.
I have some code I inherited that I need to customize. I have an input defined in my html file:
<div style="display: none;">
<input id="homeIcon" type="hidden" value="true" />
I also have this in my html:
<div id="header">
<div style="float: left;">
<div id="headerTitle">
My Website
</div>
</div>
</div>
In the CSS I want to decide where to place this home icon. I want it to appear in the header to the right of the headerTitle.
Can I use the CSS to move an html element so that it appears in another div?
I managed to change the location within the current div - but not move it to an entirely new place.
Thanks,
Rocky
It's bad idea to relocate elements using CSS (absolute positioning and other stuff that will break your layout).
CSS is just for visual representation of elements, so use HTML to change elements position
<div id="header">
<input id="homeIcon" type="hidden" value="true"/>
<div id="headerTitle">
My Website
</div>
</div>
hello Rocky using css you can not move the element to another div but you can "over lap on the div area" so look like you put them to another div.using position

How to set text over image?

How can i add text over image ? I always get text bellow image? Is there any style so that title and descripton goes over image and not below?
<div class="row">
#foreach (var banner in Model.SportBanners)
{
<a href="#banner.LinkTo">
<img id="resize" src="#banner.BannerPath" alt="" />
<div class="#banner.ClassTag">
</div>
</a>
<div class="image" style="">
<h1>
#MvcHtmlString.Create(Html.Encode(banner.Title).Replace("-", "<br />"))
</h1>
<br>
<p> #MvcHtmlString.Create(Html.Encode(banner.Description).Replace("-", "<br />"))</p>
<br>
<br>
</div>
}
</div>
You can use positioning.
Set the position: relative of the containing element.
Set the position: absolute of any internal element that you want to take control over beyond the default behaviour. Then top, right, bottom and left will allow you to position this element wherever you want in the containing div.
This will help you position things based on your HTML where img tags are used (allowing CMS driven alts etc.), rather than setting them as background images, which will require verbose classes or inline style tags.
Please see http://jsfiddle.net/5nryk3L6/2/ for a simplified version (removes the CMS backend stuff) of your code that achieves this. I've added a margin-left on the container to demonstrate how position absolute values are relative to the next element up the DOM tree with position relative set, as this can be quite confusing

center text vertically and remove margin under text

I have 3 divs, an image div, a text div and another image div
http://jsfiddle.net/m02pw4wk/4/
<div id="1" style="display:inline-block; width:100px">
<span style="margin:0;">Center<span>
</div>
I want to center the span text in its parent div
I tried vertical-align on the text but no success, also I see that there is a small margin, ou padding below the text, where is it coming from ?
Any pointing on the solution would be helpful
Cheers
You need to change the vertical-align property for the img element - not the text. It's worth noting that the default value for this property is baseline, thus the image element is aligned to the baseline of the text. Values such as top/bottom/middle will change this behavior.
Updated Example
img { vertical-align: middle; }
It's also worth noting that ids are suppose to be unique.
<div id="userbox" style="float:right; background-color:grey;display:table;">
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />
</div>
<div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
<span style="margin:0;">Center<span>
</div>
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />
</div>
</div>

CSS Images not centering with radio inputs

I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?
<div style="height:30px;">
<input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
I hope this is what you are looking for
JSFIDDLE
I included another <div> which contains the input elements and tried to vertical-align
this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.
However I have inline styles still. Change it once it works out for you.

Resources