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?
Related
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>
[This is what I want to do: ](
https://developers.google.com/maps/documentation/javascript/?csw=1#Custom_Controls)
What is the floating window called? (which says base maps, with drop down list.)
It's not over lay, nor infowindow, what is it?
It's a div, which they've styled to float over the map pane. If you inspect the element you can see:
<div class="open visible" id="panel">
<div class="mtam-title">
<div id="panel-title">Base Maps</div>
</div>
<div id="panel-body">
<div class="banner basemaps-banner">
<div class="g-plusbtn">
<div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 24px; height: 15px;">
<iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&annotation=none&size=small&origin=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&url=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com%2Fdemos%2Fbasemaps&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.tbkZX74SaQs.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOYzemCn6PkYhgzRa3g2KtXX0dBpg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1433919884595&parent=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&pfname=&rpctoken=31017501" name="I0_1433919884595" id="I0_1433919884595" vspace="0" tabindex="0" style="position: static; top: 0px; width: 24px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 15px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" width="100%" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="section section-text">
<p>
For the last decade, we've obsessed over building great maps—maps that are comprehensive, accurate, and easy to use.
</p>
</div>
<div class="section">
<div class="tabs"><a class="active" href="#">Base Maps</a>Styled Maps</div>
</div>
<div class="">
<div>
<h2>Go Further</h2>
<ul style="display: block;">
<li><a class="active" href="/demos/basemaps/new-york">New York</a></li>
<li>Hong Kong</li>
<li>Search</li>
</ul>
<ul style="display: none;">
<li>Sydney</li>
<li>Tokyo</li>
<li>San Francisco</li>
</ul>
</div>
</div>
</div>
</div>
and also:
#panel.visible {
right: 20px;
}
#panel.open {
top: 20px;
}
.section-demos #panel {
display: block;
}
#panel {
position: absolute;
z-index: 1000;
top: 0px;
right: -500px;
width: 270px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 5px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.61);
display: none;
}
I am having a little bit of problem with two divs using z-index. I have created a div called topbar with z-index: 1, and another one called "socialbuttons" with z-index: 2 which has image links to Facebook and Twitter. However, the topbar overlaps the soc buttons and I can neither see nor click the social buttons. I have scoured the internet and tried everything I could but I am still stuck with the same issue. Any help would be greatly appreciated. Here is my HTML code
<div id ="topbar"
style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;">
</div>
<div id= "socialbuttons"
style= "position:relative; z-index: 1000; top: 15px; left: 770px; height:53px; width: 249px; margin-bottom: 0px;">
<a href="https://twitter.com" target="_blank">
<img alt="" src="images/twitter.png"
style="position:absolute; top: 0px; left:40%; height:49px; width: 59px; z-index:1000"/></a><a href="https://www.facebook.com" target="_blank"><img alt="" src="images/fbook.png"
style="position:relative; width:50px; height:49px; top: 0px; z-index:1000"/></a></div>
JSFIDDLE
I think this is what you are looking for
<div id ="topbar" style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;">
<a href="https://twitter.com" target="_blank">
<img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_twitter_box_white.png" style="float:right; height:49px; width: 59px;"/>
</a>
<a href="https://www.facebook.com" target="_blank">
<img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_facebook_box_white.png" style="width:50px; height:49px;float:right;"/>
</a>
</div>
Fiddle
Just remove position relative from socialbuttons
Here is the working link
<div id="socialbuttons" style="z-index: 1000; top: 15px; left: 770px; height:53px; width: 249px; margin-bottom: 0px;">
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}