I am using gmaps4jsf jar and trying to display marker on map. Marker is displaying fine but not automatic zoom functionality. every time i need to vary zoom value so is there any option in gmaps4jsf so that we can get auto zoom functionality?
<m:map latitude="10.132567" longitude="10.132567" height="400px" width="400px" zoom="6">
<ui:repeat var="p" value="#{pointBean.points2}" varStatus="status" offset="0" step="1" size="#{pointBean.points2.size()}">
<m:marker latitude="#{p.latitude}" longitude="#{p.longitude}" >
<m:htmlInformationWindow htmlText="#{p.latitude}-#{p.longitude}" />
</m:marker>
</ui:repeat>
</m:map>
Thanks in advance!!!
You need to put autoReshape="true" in map tag like,
<m:map autoReshape="true">.....</map>
autoReshape just do adjust marker on map and you will get marker display only.
Related
I want to add a logo to a keystone project or if logo is not possible, just a simple text. I was able to add the logo only during the login process. I suppose the best place to add the logo is the navigation bar but its not a must.
I tried to changed the home logo <span class="octicon octicon-home"></span> with my logo but was not able to found where.
I tried to add img(src='/images/logo.png', width='160') to templates/layouts/default.pub but I got an error img is a self closing element: <img/> but contains nested content. It's also wrote There is no .container wrapping class around body blocks to allow more flexibility in design
I tried to add an iFrame using javascript and tried to put some html code on it. This also didn't worked.
I also tried to set a label or singular to one page but this is not what I need
Do you have any idea?
Firstly you can find the default logo in:
\node_modules\keystone\admin\public\images\logo.png
After replace the PNG image, the login screen will reflect the updated logo.
Next for Admin UI, you can check:
\node_modules\keystone\admin\client\App\components\Navigation\Primary\index.js
Line 77:
return (
<PrimaryNavItem
className={className}
label="octicon-home"
title={'Dashboard - ' + brand}
to={Keystone.adminPath}
>
<span className="octicon octicon-home" />
</PrimaryNavItem>
Replace the span with:
return (
<PrimaryNavItem
className={className}
label="octicon-home"
title={'Dashboard - ' + brand}
to={Keystone.adminPath}
>
<img src="/keystone/images/logo.png" width="20" height="20"/>
</PrimaryNavItem>
Finally in public page, edit (if you are using PUG):
\templates\layouts\default.pug
Line 54:
a.navbar-brand(href='/')
img(src='/keystone/images/logo.png' width='20' height='20')
I'm trying to display an image on mouseover of another image. I'm using dijit/Tooltip for that. Problem is, the image is not displaying on the first mouseover, it always appears on the second time onwards. The images are dynamically displayed and have given a dynamic id.
<c:forEach items="${model.images}" var="image" varStatus="status">
<img src="${image.url}" height="50" onmouseover="showImage('${image.id}')" id="image${image.id}" />
<c:forEach>
<script>
function showImage(name) {
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["image"+name],
label: "<img src='/images/"+name+"'/>"
});
});
};
</script>
With dijit/Tooltip there is no need for an onmouseover function. With your code the first mouseover only sets up the Tooltip. The second time the Tooltip is attached and so it is displayed (and showImage() runs again, which isn't optimal).
You need to create the Tooltip when the image is added to the dom. You can refer to the dijit/Tooltip guide for an example on how to set up a Tooltip declaratively. Alternatively you can convert your code to add the images and their tooltips programmatically.
I have created a simple Layout control using the Dojo Content Pane Border Container and Border Pane.
<xe:djContentPane id="djContentPane1" style="width:auto; height:500px;">
<xe:djBorderContainer id="djBorderContainer1">
<xe:djBorderPane id="djBorderPane1" region="top">Header
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane2" region="center">Main
Body
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane3" region="bottom">Footer
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane4" region="left"
style="width:auto">main Navigator
</xe:djBorderPane>
</xe:djBorderContainer>
</xe:djContentPane>
It does pretty much what I want (obviously no styling on it at this point) except for two things:
1. I can't figure out how to make the djContentPane fill the full space available on the screen. The width:auto works but there does not appear to be a corresponding height specification.
2. I added a repeat control view into the region="center" and it displays fine except when the content exceeds the height available there is no scrollbar. I think as I read some of the help this should be the default for the "center" djBorderPane. Do I have to define the scrollbar?
ad 1.: use height:100% instead of "auto"; works fine for me, at least using Firefox (haven't tried other browsers)
ad 2.: I put a panel around the repeat as recommended in my above comment. Then I added overflow:auto; as a style property to the panel. Instead of using an extra panel you also could add that to the repeat itself, but I usually prefer styling an outer div because sometimes you want to set the removeRepeat property and then lose its own styling possibilities. Here's my portion of the border panel's code:
<xe:djBorderPane id="djBorderPane2" region="center">Main Body
<xp:panel id="outerDiv" style="width:100%;height:100%;overflow:auto;">
<xp:repeat id="repeat1" rows="30" var="rowData">
<xp:this.value>
<![CDATA[#{javascript:["row1", "row2", "row3", "row4"]}]]>
</xp:this.value>
<xp:panel id="innerDiv">
<xp:text escape="true" id="computedField1" value="#{javascript:rowData}">
</xp:text>
</xp:panel>
</xp:repeat>
</xp:panel>
</xe:djBorderPane>
again, works fine for me
I have bug in struts2-grid-Jquery.Every time grid contains only one record ,grid disappear the record as in hyperlink but if there are more than one record it work fine. My code :
<sjg:grid id="gridtable"
dataType="json"
href="%{remoteurl}"
gridModel="allCustomerRequests"
pager="true"
page="1"
rowNum="10"
pagerButtons="true"
pagerInput="true"
gridview="true"
rowTotal="true"
rownumbers="true"
rowList="10,20,30,40,40,50,60,70,80,90,100"
viewrecords="true"
autowidth="true"
loadonce="true"
viewrecords="true"
>
<sjg:gridColumn name="stRefID" formatter="formatViewLink"
title="%{getText('COMMON_REFERENCE_NUMBER')}" />
<sjg:gridColumn name="requestType.stName"
title="%{getText('RequestTracking_Request_Type')}" />
<sjg:gridColumn name="requestStatus.stStatus"
title="%{getText('RequestTracking_Request_Status')}" />
<sjg:gridColumn name="requestStatus.tsDate"
title="%{getText('DATE')}"
formatoptions="{newformat : 'd/m/Y',
srcformat : 'Y-m-d'}" formatter="date" />
</sjg:grid>
Please help me to solve my bug
enter link description here
I m pretty sure you are expriencing this issue with IE...?
It has nothing to do with the grid plugin but the way IE includes the size of scroll bar when calculating height/width.
A workaround for you is to fix the height of your grid using the height attribute of <sjg:grid />.
does anyone know how to create a loading mask over a XUL panel with JQuery or normal Javascript?
i am developing a firefox extension and i need the loading mask over some of the panels to avoid the user from making any further input while information is being submitted.
First of, i don't really know if mozilla supports loading masks over XUL panels because all the JQuery scripts i tried so far make the panel disappear instead of masking it.
thanks for reading
XUL uses box layout which makes typical techniques from HTML like absolutely positioned divs malfunction. You should use a XUL <stack> tag (see https://developer.mozilla.org/en/XUL/stack) and put both your content and your half-transparent layer as its children. When you make the half-transparent layer visible it will appear on top of the content. For example:
<stack flex="1">
<hbox id="content" align="center" pack="center">
<button label="Click here" oncommand="document.getElementById('busy').hidden = false;"/>
</hbox>
<hbox id="busy" hidden="true"/>
</stack>
And some CSS code:
#busy {
background-color: black;
opacity: 0.5;
}