My app has a checkBoxGroup inside of a Form Layout Row and that is inside of a Form table.
I want to control the font weight and spacing and so on, it seems I can't. If the checkbox group is outside the form table, my css works, but not inside the form table. I believe this is because the table that is generated by the form layout table is not getting changed. I want to change ONLY the spacing inside of this on form row.
Here is the code for the checkbox inside the form layout row:
<xe:formRow id="formRow4"
labelPosition="inherit" label="Area">
<xp:checkBoxGroup id="checkBoxGroup2"
layout="pageDirection" styleClass="threeColumnCheckBoxGroup"
style="font-size:8pt;font-style:normal">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var tmp:String = viewScope.application;
var tmpLst = [];
if (tmp == "OTM")
{
tmpLst.push("User Interface");
tmpLst.push("Rating/Planning");
tmpLst.push("Tendering/Booking");
tmpLst.push("Documentton");
tmpLst.push("Finance");
}
if (tmp = "GTM")
{
tmpLst.push("Parting Screening");
tmpLst.push("AES Filing");
tmpLst.push("AMS Filing");
tmpLst.push("Product Classification");
}
return tmpLst}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup>
</xe:formRow>
And for the checkbox outside:
<xp:checkBoxGroup id="checkBoxGroup4" layout="pageDirection" styleClass="threeColumnCheckBoxGroup" style="font-size:8pt;font-style:normal">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var tmp:String = viewScope.application;
var tmpLst = [];
if (tmp == "OTM")
{
tmpLst.push("User Interface");
tmpLst.push("Rating/Planning");
tmpLst.push("Tendering/Booking");
tmpLst.push("Documentton");
tmpLst.push("Finance");
}
if (tmp = "GTM")
{
tmpLst.push("Parting Screening");
tmpLst.push("AES Filing");
tmpLst.push("AMS Filing");
tmpLst.push("Product Classification");
}
return tmpLst}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup
and the css
.xspCheckBox { width: 500px; /* change to your preferred width */ }
.xspCheckBox td { white-space: nowrap; padding-bottom:3px; }
.threeColumnCheckboxGroup { display: inline; }
.threeColumnCheckboxGroup td { float: left; width: 24%; padding-bottom:3px; }
Related
i have added a new unbound field to display image of Inventory Item in Transaction Details tab, then to set the fixed height of the image I have added some javascript, but after adding javascript the screen is not populating any default values into like RefNbr and Date, Below is the javascript code am using. The same javascript code is working on my custom screen.
<px:PXJavaScript runat="server" ID="CstJavaScript1" Script="var css = '.GridRow > img { width: 100%; height: 40px; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);" />
Earlier I have added Javascript inside the tab item, but now I moved out of the Tab when it was working without issues.
</px:PXTab>
<px:PXJavaScript runat="server" ID="CstJavaScript1" Script="var css = '.GridRow > img { width: 100%; height: 40px; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);" />
Hi I have map on which I can show different layers. By clicking on each feature contained in the layer(s) a popup window appear with information about that feature. Everything works fine, but if I am in FullScreen mode the popup window is hidden (it is called but hidden by the fullscreen mode), although a maximum z-index was given to it.
The map is online at the following link
https://www.marinemammalhabitat.org/imma-eatlas/
Anyone can help me in solving the thing? Thanks
The following is the code for the popup window:
/code to show popups containing layer's features
var info = document.getElementById('info');
var target = document.getElementById('map');
function displayFeatureInfo(pixel) {
info.style.left = '30%';
info.style.top = '20%';
info.style.height = 300 + 'px';
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
var text = '<table><tbody>';
//if (feature.get('AOI')) {text += '<tr><td> <h2> ' + feature.get('AOI') + '</h2></td></tr>';} else {text += '';}
text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"> <h2> ' + feature.get('Title') + '</h2></td></tr>';
text += '<tr><td><strong>Summary: </strong>' + feature.get('Summary') + '</h2></td></tr>';
text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"><strong>Region:</strong> ' + feature.get('Region') + '</td></tr>';
if (feature.get('AOI')) {text += '';} else {
text += '<tr><td> <strong>Criteria:</strong> ' + feature.get('Criteria') + '</td></tr>';
}
if (feature.get('AOI')) {text += '';} else {
text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"> <strong>Species:</strong> ' + feature.get('Species') + '</td></tr>';
}
if (feature.get('Status')) {text += '<tr><td> <strong>Status:</strong> ' + feature.get('Status') + '</td></tr>';} else {text += '';}
if (feature.get('URL')) {text += '<tr><td> MORE INFO </td></tr>';} else {text += '<tr><td> </td></tr>';}
//text += '<tr><td> MORE INFO </td></tr>';
text += '</tbody></table>';
info.style.display = 'none';
info.innerHTML = text;
info.style.display = 'block';
target.style.cursor = "pointer";
} else {
info.style.display = 'none';
target.style.cursor = "";
}
}
map.on('click', function(evt) {
if (evt.dragging) {
info.style.display = 'none';
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
//ends code for popups
CSS for the #info div is as follows:
#info {
position: absolute;
z-index: 2147483647;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
color: #000000;
padding: 10px;
font-size: 14px;
font-weight:500;
top: 20%;
left: 30%;
/*pointer-events: none;*/
overflow-y: scroll;
display:none;}
The FullScreen control added to the map is as follows:
var map = new ol.Map({
target: 'map',
layers: [],
controls: [
//Define the default controls
new ol.control.Zoom(),
new ol.control.Attribution(),
//Define some new controls
new ol.control.ZoomSlider(),
new ol.control.MousePosition({
projection: 'EPSG:4326',
coordinateFormat: function (coordinate) {
return 'Coordinates: ' + 'Lat ' + ol.coordinate.format(coordinate, '{y}', 3) + ' Long ' + ol.coordinate.format(coordinate, '{x}', 3);
},
target: 'coordinates'
}),
new ol.control.ScaleLine(),
new ol.control.OverviewMap(),
new ol.control.FullScreen(),
new app.Legend()
],
view: view
});
The problem does not exist in Chrome, but in Firefox. It's because they internally handle fullscreen differently.
Browsers apply fullscreen to a element. OpenLayer's Fullscreen Control selects the map viewport's per default.
However, Firefox seems to hide elements that are not child elements of that selected element, while Chrome does not. Since the popup is not a child of the #map div, you can't see the popup anymore.
OL lets you choose a target element for the Fullscreen control (see api):
var fullscreenTarget = document.getElementById('info').parentElement;
new ol.control.FullScreen({
source: fullscreenTarget
});
Instead of ascending to the parent, give the parent element an id.
PS: You can read more about the Fullscreen API on developer.mozilla.org.
I'm having problems with my data driven coded-ui test. I'm supposed to replace the info typed in the test with csv data.
I can succesfully replace login and password inputs with the csv data.. but I'm failing to replace a selected LI in the test with it's csv data.
I don't know how to select the LI since it seems to be a custom generated control element but I may be drifting.
The HTML looks like this:
<div id="cphCont_cphContAut_ddlTipoJur" class="ComboAzul" style="display:inline-block;">
<table id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline-block;position:relative;top:5px;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="ctl00$ctl00$cphCont$cphContAut$ddlTipoJur$ddlTipoJur_TextBox" id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_TextBox" tabindex="3" autocomplete="off" style="width: 260px; margin: 0px;" type="text">
</td>
<td class="ajax__combobox_buttoncontainer">
<button style="height: 18px; width: 18px; margin: 0px; padding: 0px; visibility: visible;" id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_Button" type="button"></button>
</td>
</tr>
</tbody>
</table>
<ul id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_OptionList" class="ajax__combobox_itemlist" style="visibility: hidden; z-index: 1000; overflow: hidden; width: 310px; position: absolute; height: 133px; left: 638px; top: 425px; display: none;">
<li style=""> </li>
<li style="">Cons / Ou</li>
<li style="">Coop</li>
<li style="">Empr Ind</li>
<li style="">Req E</li>
<li>Soc A</li>
<li>Soc E</li>
</ul>
<input name="ctl00$ctl00$cphCont$cphContAut$ddlTipoJur$ddlTipoJur_HiddenField" id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_HiddenField" value="0" type="hidden">
</div>
In the UIMap.Designer.cs the UL ( I believe ) look like this:
[GeneratedCode("Coded UITest Builder", "12.0.21005.1")]
public class UICphCont_cphConteCustom : HtmlCustom
{
public UICphCont_cphContCustom(UITestControl searchLimitContainer) :
base(searchLimitContainer)
{
#region Search Criteria
this.SearchProperties["TagName"] = "UL";
this.SearchProperties["Id"] = "cphCont_cphContAut_ddlTipoJur_ddlTipoJur_OptionList";
this.SearchProperties[UITestControl.PropertyNames.Name] = null;
this.FilterProperties["Class"] = "ajax__combobox_itemlist";
this.FilterProperties["ControlDefinition"] = "class=\"ajax__combobox_itemlist\" id=\"cphC";
this.FilterProperties["TagInstance"] = "1";
this.WindowTitles.Add("Test");
#endregion
}
Selected LI element looks like this:
public HtmlCustom UISocaCustom
{
get
{
if ((this.mUISocaCustom == null))
{
this.mUISocaCustom = new HtmlCustom(this);
#region Search Criteria
this.mUISocaCustom.SearchProperties["TagName"] = "LI";
this.mUISocaCustom.SearchProperties["Id"] = null;
this.mUISocaCustom.SearchProperties[UITestControl.PropertyNames.Name] = null;
this.mUISocaCustom.FilterProperties["Class"] = null;
this.mUISocaCustom.FilterProperties["ControlDefinition"] = null;
this.mUISocaCustom.FilterProperties["InnerText"] = "Soc A";
this.mUISocaCustom.FilterProperties["TagInstance"] = "6";
this.mUISocaCustom.WindowTitles.Add("tEST");
#endregion
}
return this.mUISocaCustom;
}
}
The code I'm using to replace the login and password with the csv data is :
public void MetdG()
{
this.UIMap.TesterParams.UITxtLoginEditText = TestContext.DataRow["login"].ToString();
this.UIMap.TesterParams.UITxtSenhaEditPassword = Playback.EncryptText(TestContext.DataRow["senha"].ToString());
this.UIMap.Tester();
// To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
}
Any idea on how to proceed ?
Edit : As instructed by Ryan Cox
It was created a static class to hold the browser window :
[CodedUITest]
public static class GlobalVars
{
public static BrowserWindow myWindow;
}
Test Initializer method was edited to match this change :
[TestInitialize()]
public void BrowserStarter()
{
GlobalVars.myWindow = BrowserWindow.Launch(new Uri("www.google.com"));
}
MainG method was edited so the window could execute the script :
GlobalVars.myWindow.ExecuteScript("var xpath = li[text()='Soca'];var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;);matchingElement.innerHTML = arguments[0];", TestContext.DataRow["type"].ToString());
Now the problem is that the script is throwing an exception. I believe it's because it's searching for the element before it exists ( The test goes thru 2 or 3 pages before this point )
What you're trying to do is change the inner html on a list item, not enter text as you would in your <input> elements, so you'll need to execute a script to do this and modify the DOM. Since it's not a normal action for a user (click on this, enter text there, expand this combo box, etc.), you'll have to use javascript to complete it.
browserWindow.ExecuteScript("var elements = document.getElementsByTagName('li')
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf("Soc A") !== -1) {
elements[i].innerHTML = arguments[0];
break;
}
}", TestContext.DataRow["type"].ToString());
//Comment to fill space
Of course, if you had an id on your list items, this would be even easier:
browserWindow.ExecuteScript("document.getElementById("Soc A list item").innerHTML = arguments[0];", TestContext.DataRow["type"].ToString());
Major props to Ryan Cox for all the help he provided yesterday !
The issue got solved with by adding this line of code :
this.UIMap.TestWindow.TestDocument5.UIContCustom.UISocaCustom.
SearchProperties[HtmlCustom.PropertyNames.InnerText] =
TestContext.DataRow["type"].ToString();
Being TestDocument5 the 5th page in the test ( as intended ), UIContCustom the UL element and UISocaCustom the custom HTML element the test generated.
It is worth noting that trying to change the value of InnerText through GetProperty will fail since it will spit out a read-only message.
i am working for a face detection mechanism in winJs starting from the basic. What is the mechanism to open a Camera in winJs and in which tag to show the video.
This is the code i know till now
var Capture = Windows.Media.Capture;
var mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync();
How to show in a Div the same.
here's the html for the same.
function init() {
livePreview = document.getElementById("live-preview");
startCamera();
}
function startCamera() {
try {
mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync().then(function () {
livePreview.src = URL.createObjectURL(mediaCapture);
livePreview.play();
});
} catch(exception) {
Windows.UI.Popups.MessageDialog(exception.message, "Error").showAsync();
}
}
HTML
<div id="application" style="width:100%; height: 180px; overflow: hidden; background: #222;">
<video id="live-preview" style="display : none; width:100%; height: 180px; overflow: hidden;"></video>
</div>
these were some of the variables Select appropriate ones
var Capture = Windows.Media.Capture;
// Globals
var mediaCapture;
var recording = false;
var livePreview;
var activation = Windows.ApplicationModel.Activation;
I’m not a fan of the collapsed 3 line nav button when bootstrap collapses for smaller viewports. Is there a way to get the navbar collapse to a select drop down menu, as well as place it somewhere else on the page, other than in the top right? Just like this: http://filamentgroup.com/examples/rwd-nav-patterns/
Looking at what happens on the filamentgroup site, you can see that below a certain width, the body gets the class nav-menu and removes if when sized larger. This is their rwd-nav.js complete with comments:
jQuery(function($){
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function(){
var nav = $(this),
items = nav.find('a');
$('body').removeClass('nav-menu');
// when the nav wraps under the logo, or when options are stacked, display the nav as a menu
if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {
// add a class for scoping menu styles
$('body').addClass('nav-menu');
};
})
// toggle the menu items' visiblity
.find('h3')
.bind('click focus', function(){
$(this).parent().toggleClass('expanded')
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function(){
$('.nav-primary').trigger('testfit');
});
});
Then in their rwd-nav.css, this repositions based on width
/* Media queries
------------------------------ */
#media screen and (min-width: 640px) {
.nav-primary,
.nav-primary ul {
float: left;
}
.nav-primary ul {
float: left;
}
.nav-primary li {
float: left;
font-size: 1.5em;
border-bottom: 0;
}
}
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
}
Hope that helps!