Can someone explain why search icon is not on the top of input bar in the below code despite the fact that its absolutely positioned?
Thanks
<div style="position: relative;">
<input type="text" style="height: 32px; width: 100%">
<img style="position: absolute; right: 0; height: 32px" src="https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png" alt="">
</div>
position:absolute may cause some appearance/visibility problems. You can use the background-image option to add a search icon to the right of the input.
input {
background: url("https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png") no-repeat;
background-size: auto 32px;
background-position: right center;
height: 32px;
width: 100%;
border: 1px solid #4B89DA
}
<input type="text" placeholder="Enter keywords here..." />
It is working, but you need to also specify a top position:
<div style="position: relative;">
<input type="text" style="height: 32px; width: 100%">
<img style="position: absolute; top: 0; right: 0; height: 32px" src="https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png" alt="">
</div>
Related
I'm trying to put two images (dowload and view) on top of another ones, here's the HTML:
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
<img class="img-responsive" src="123.png">
</div>
Here's the CSS:
.backgrounddownload:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
background-image: url(dowload.png);
}
.backgroundview:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 50px;
left: 35px;
background-image: url(view.png);
}
For some reason the second div, in this case the dowload.png won't load, and in chrome while inspecting all the .backgroundview:after is disabled; I guess I can't have two :after, but how can I avoid that ?
You are not setting the container .backgrounddownload position: relative which in that case you are positioning them in relation to the body. Adding position: relative to the container will give you control to your absolute elements.
Add this in your css:
.backgrounddownload {
position: relative;
}
Fiddle
Update
It seems I have misunderstood your question. In that case, instead of having 2 :after you can also use :before.
.backgroundview:before {
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
background: #fff
}
Updated Fiddle
I have div as below:
<div id="divObservationInput" style="height: 55%; vertical-align: text-bottom;" class="sloInputBox">
<div id="divEnlargeTextarea" style="height: 97%; width: 99%">
<textarea onkeyup="txtobservationbox_onTextChanged();return false;" name="txtobservationbox" id="txtobservationbox" style="height: 100%; width: 100%; overflow: auto; font-size: 12pt;">#ViewBag.ObserverText</textarea>
</div>
</div>
And button div as:
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div>
<div style="padding-top: 1%; text-align: right; position: relative; width: 80%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
Its looking:
I want to shoft that close button to extreem right of div.
i.e. It should be extreem right to textarea.
Please help me.
I tried button setting its right padding to 100%.
But it didnt helped.
Change your '80%' 'width' to '100%' for this 'div'
<div style="padding-top: 1%; text-align: right; position: relative; width: 100%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
I guess you have to do
in HTML
<div class="relative">
<div class="button">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
In CSS
.relative { position: relative; } .button { position: absolute; top: 0; right: 0; }
use this code n try once
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div style="position:relative">
<div style="padding-top: 1%; text-align: right; position: absolute; width: 80%; height:2%;right:0">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
i have scaled it by position:absolute and right:0
You can use position absolute with right 0 for button. For that you need to give position relative for it's parent div.
[Demo](http://jsfiddle.net/Rj3Mh/)
I'm trying to use a primefaces Element Layout.
I've inserted the code that was provided in the above link to my xhtml page (so that code is now nested within other primefaces components...).
Here is the code that I got from the above link:
<p:layout style="min-width:400px;min-height:200px;" id="layout">
<p:layoutUnit position="west" resizable="true" size="100" minSize="40" maxSize="200">
West
</p:layoutUnit>
<p:layoutUnit position="center">
Center
</p:layoutUnit>
</p:layout>
However, the layout is not rendered properly. For example, it has "visibility: hidden;".
I tried to compare the html in the above link, to the html that was created in my page.
Here is the relevant html that is created in the above link:
<div id="layout" class="ui-layout-container" style="min-width: 400px; min-height: 200px; overflow: visible; position: relative;">
<div id="j_idt18" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west ui-layout-pane ui-layout-pane-west" style="position: absolute; margin: 0px; left: 0px; right: auto; top: 0px; bottom: 0px; height: 194px; z-index: 0; width: 94px; display: block; visibility: visible;">
<div class="ui-layout-unit-content ui-widget-content" style="position: relative; height: 191px; visibility: visible;"> West </div>
</div>
<div id="j_idt20" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center ui-layout-pane ui-layout-pane-center" style="position: absolute; margin: 0px; left: 107px; right: 0px; top: 0px; bottom: 0px; height: 194px; width: 792px; z-index: 0; display: block; visibility: visible;">
<div class="ui-layout-unit-content ui-widget-content" style="position: relative; height: 191px; visibility: visible;"> Center </div>
</div>
<div id="j_idt18-resizer" class="ui-layout-resizer ui-layout-resizer-west ui-layout-resizer-open ui-layout-resizer-west-open" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 2; cursor: w-resize; left: 100px; height: 201px; width: 6px; top: 0px;" title="Resize" aria-disabled="false"></div>
</div>
Here is the html that is created in my page:
<div id="form:tabView:tabViewExceptions:layout" style="min-width:400px;min-height:200px;">
<div id="form:tabView:tabViewExceptions:j_idt113" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west">
<div class="ui-layout-unit-content ui-widget-content"> West </div>
</div>
<div id="form:tabView:tabViewExceptions:j_idt115" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center">
<div class="ui-layout-unit-content ui-widget-content"> Center </div>
</div>
</div>
So that explains to me why the Layout does not work on my page.
But why does the same JSF code create different html (if you ignore that different id's, which make sense)?
Why does the style on some of the divs in the link have properties which do not appear in the style created in my page?
How do I fix this?
Here is my code:
<div class="mycontent">
<div class="textarea" id="ingId" style="position:relative;">
<div id="idComm" style="position: absolute; z-index: 100; width: 450px; height: 151px; right: 18px; top: 1px;">
</div>
</div>
</div>
How to make them share the same scrollbar? I tried this
But it didn't work, since in the first div I have tinymce.
Here's the HTML
<div class="panel" id="Panel1">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
<legend> </legend>
<div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
</fieldset>
</div>
<div class="panel" id="Panel2">
<fieldset style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
<legend> </legend>
<div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
</div>
and here's the CSS
body {
background-color: white;
width: 100%;
}
.panel, Label, .fieldset {
font: 8px Arial;
border: 0px;
margin: 0px;
padding: 0px;
}
Panel one has left=136px and width=136px while panel two has left=372px but when I look at them in MS IE 8 they overlap. What gives?
A few points of info
Obviously, I am a relative CSS newbie.
This is part of a project to design a form in a Windows program and then view it in the browser. It has to be WYSIWYG, which is why I am giving precise coordinates, rather than allowing the browser to lay out the page.
But might it be that I would be better off with style="position: fixed; ?
I am not sure if I need positioning on both the divs and their contents, but, if only one, then which?
I made the example as simple as possible, but it must scale up to multiply nested fieldsets
I have no choice but to use MS IE, although I can recommend a (minumum) version.
Thanks in advance for any help
Your HTML is incorrect. The style definitions that are on your fieldset element, should be on your div elements for panel 1 and 2. Also your fieldset tag in panel2 is unclosed.
Try this HTML:
<div class="panel" id="Panel1" style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
<fieldset >
<legend> </legend>
<div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
</fieldset>
</div>
<div class="panel" id="Panel2" style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
<fieldset >
<legend> </legend>
<div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
</fieldset>
</div>
As Strelok pointed out, there are mistakes in your HTML. I also notice that your css refers to elements with a class of fieldset did you want that to be on the fieldset itself?
if so, in the css remove the . before .fieldset
try putting relative on the surrounding div.
.panel{posistion:relative}