How to add a space into checkBoxGroup label? - xpages

Here is checkBox group
<xp:checkBoxGroup id="checkBoxGroup1" layout="pageDirection">
<xp:selectItem itemLabel="aaaaa"></xp:selectItem>
<xp:selectItem itemLabel="bbbbb"></xp:selectItem>
<xp:selectItem itemLabel="ccccc"></xp:selectItem>
<xp:selectItem itemLabel="ddd fgggggg"></xp:selectItem>
</xp:checkBoxGroup></xp:view>
the space in fourth item label is ignored. Adding space escape ingored as well

Use non-breaking space  .
Add as many non-breaking spaces as you like
<xp:selectItem itemLabel="ddd     fgggggg"></xp:selectItem>

With bootstrap, this below looks like:
<div class="form-row">
<div class="form-group col-md-4">
<xp:checkBox id="labelPCL" text="PCLx" value="px" style="margin-right:7px;"></xp:checkBox>
<xp:checkBox id="labelHAL" text="HALx" value="hx" style="margin-right:7px;margin-left:10px;"></xp:checkBox>
<xp:checkBox id="checkBox6" text="SBNx" value="sx" style="margin-right:7px;margin-left:10px;"></xp:checkBox>
</div>
</div>
Here is what the same looks like without the style:margin-right/left added:

Related

XPages name picker not working with apostrophes

Strange issue, I'm using the extlib name picker, looking up a view of names (we don't use a NAB), which can be searched, a name selected and then added. This all works fine. EXCEPT, if a user has an apostrophe in their name. The search works, the name shows, but when you click Add, it simply doesn't do anything, and this is for ANY name with an apostrophe. Has anyone encountered this or know how to get around it? Any help greatly appreciated as there are no errors, or anything written to the console logs or online articles I can find describing it. Thanks Code below:
<xp:inputText id="lstPELName" value="#{document1.PELName}"
maxlength="0" style="display: none;">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="refreshResponse">
<xp:this.action><![CDATA[#{javascript:try{
document1.save();
// Set People Leader details
var agent:NotesAgent = database.getAgent("SetPELDetails");
agent.runWithDocumentContext(currentDocument.getDocument());
}catch(e){
openLogBean.addError(e,this.getParent());
}}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
<div class="col-xs-3 no-border" id="divPELPicker">
<xe:namePicker id="approversNamePicker" for="lstPELName">
<xe:this.dataProvider>
<xe:dominoViewNamePicker databaseName="ppg\dpi.nsf"
viewName="CurrentProfilesByOwner" labelColumn="SystemName">
</xe:dominoViewNamePicker>
</xe:this.dataProvider>
<xe:this.pickerText><![CDATA[#{javascript:"Select your People Leader:";
}]]></xe:this.pickerText>
</xe:namePicker>
</div>
<div class="col-xs-9 no-border" id="divPELName">
<xp:text escape="true" id="cmpPELName"
value="#{document1.PELName}">
</xp:text>
</div>
I assume somewhere a character conversion is missing, probably to JSON. Can you modify the column in the view, and replace an apostrophe by its Unicode equivalent? That would be \u0027. You might have to escape the \ to make it work, as \\ or even \\\\.

xe:djextListTextBox control displays wrong value for fields with similar aliases/synonyms

I recently discovered a problem with the xe:djextListTextBox control using xe:valuePicker for values that have synonyms/aliases. If the synonyms are similar between pickers that are bound to different fields, when selecting the value for the first field, selecting the matching value for the second field displays the text from the first selection.
For example, picker #1 has 3 values with aliases/synonyms: blue|1, green|2, yellow|3. Picker # 2 has 3 different values but the same synonyms: red|1, orange|2, purple|3.
If I select "blue" for picker # 1 it displays "blue." When I then select "red" for picker #2, instead of displaying "red", it displays "blue".
The good thing is that when the document is saved (the synonyms are saved correctly) and reopened in Read mode, the two fields properly display the correct values. The issue seems to be in Edit mode. Has anyone come across this before and aware of a fix?
Here is test code:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.data>
<xp:dominoDocument var="doc1" />
</xp:this.data>
<p>
k1
<xe:valuePicker for="k1" pickerText="add">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="blue|1;green|2;yellow|3" labelSeparator="|" valueListSeparator=";" />
</xe:this.dataProvider>
</xe:valuePicker>
</p>
<p>
<xe:djextListTextBox id="k1" value="#{doc1.k1}"
displayLabel="true" multipleSeparator=";" multipleTrim="true" />
</p>
<p>
k2
<xe:valuePicker for="k2" pickerText="add">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="red|1;orange|2;purple|3" labelSeparator="|" valueListSeparator=";" />
</xe:this.dataProvider>
</xe:valuePicker>
</p>
<p>
<xe:djextListTextBox id="k2" value="#{doc1.k2}"
displayLabel="true" multipleSeparator=";" multipleTrim="true" />
</p>
</xp:view>
I ended up opening a ticket with HCL and their suggested workaround was to add an onChange event to the djextListTextBox to refresh its value. I'm not thrilled with it because I have a lot of fields and it's a performance hit, but it does work.
<xp:div id="refreshTarget">
...
<p>
<xe:djextListTextBox id="k1" value="#{doc1.k1}" style="font-size:smaller"
displayLabel="true" multipleSeparator=";" multipleTrim="true">
<xp:eventHandler event="onChange" submit="true" refreshMode="partial"
refreshId="refreshTarget" />
</xe:djextListTextBox>
</p>
</xp:div>

Accessibility issue with p:select

Using primefaces 5.1, i'm testing my app with WCAG validator and the following code is breaking a guideline:
<p:outputLabel for="selectHowMuch" value="Do you feel edgy lately ?" />
<p:selectOneMenu id="selectHowMuch" value="Yes">
<f:selectItem itemLabel="Argggg" itemValue="3" />
<f:selectItem itemLabel="Yes" itemValue="2" />
<f:selectItem itemLabel="hmmm" itemValue="1" />
<f:selectItem itemLabel="NO!" itemValue="0" />
</p:selectOneMenu>
the broken guideline is
Success Criteria 1.3.1 Info and Relationships (A) Check 91: select
element missing an associated label.
Repair: Add a label element that surrounds the control's label. Set
the for attribute on the label element to the same value as the id
attribute of the control. And/or add a title attribute to the input
element. And/or create a label element that contains the input
element.
Error Line 1, Column 16711:
<select id="_testapp_WAR_testapp001SNAPSHOT_:j_idt3:selectHowMuch_input"
Note that the p:outputLabel actually did help (if i remove it, i get more errors), but it looks like it's not covering the <select> _input label
I also noticed that the same happens for other select components.
Any ideas to get around this ?
Edit: here's my generated code:
<label id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:j_idt62" class="ui-outputlabel ui-widget"
for="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus">Do you feel edgy lately ?</label>
<div id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<input
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
type="text" autocomplete="off" />
</div>
<div class="ui-helper-hidden-accessible">
<select
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
tabindex="-1"><option value="3">Argggg</option>
<option value="2">Yes</option>
<option value="1">hmmm</option>
<option value="0">NO!</option></select>
</div>
<label
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
<div
class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
<div
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_panel"
class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
<div class="ui-selectonemenu-items-wrapper"
style="height: auto">
<ul
class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="Argggg">Argggg</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="Yes">Yes</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="hmmm">hmmm</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="NO!">NO!</li>
</ul>
</div>
</div>
</div>
<script id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_s"
type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch",{id:"_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch",widgetVar:"widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch"})});</script>
Sorry, i have to contrast with the last answer...
In your example, this select does not have an associated label
<select
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
tabindex="-1"><option value="3">Argggg</option>
<option value="2">Yes</option>
<option value="1">hmmm</option>
<option value="0">NO!</option></select>
There is one label after it who might have been thought for it, but it does not have a for attribute and does not contain the select tag.
<label
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
As I understand, both the input and the select are generated for this one field and only one label is correctly associated with the input. This looks like a bug in primefaces, and you should ask their staff to make some corrections...
Also there would be more correction to do, because the first label should be associated with the select element, and the input element be invisible to screenreaders if I correctly understand.
There is nothing wrong with your markup per se. It conforms to one of the accepted techniques.
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H44#H44-ex1
Although that example shows use with an <input> element, it is equally valid with a <select> element.
This looks like a bug in your validator. I suggest trying FireEyes http://www.deque.com/products/fireeyes/fireeyes-installation/

ZK: Menubar with Buttons

I got a ZUL Page, which is aligned by a "borderlayout". In "north" I got a Menubar, which is aligned left.
Now I want 2x Buttons and 2x Labels in "north", on the opposite direction of the Menubar (right).
I tried:
<north border="none">
<hbox width="100%">
<menubar id="menubar" width="380px">
<menu label="A">
<menupopup>
<menuitem label="A1"/>
</menupopup>
</menu>
....
</menubar>
<hbox vflex="1" hflex="1" align="center">
<div hflex="1"></div>
<label id="B"/>
<button id="C" label="C" />
<button id="D" label="D" />
<label id="E"/>
</hbox>
</hbox>
</north>
which looks fine, but when I set a value for label "b" or "e", the design gets broken.
h**p://i.imgur.com/HnRnxmj.png
The top part in the image is the right looking one, while the bottom one is screwed up. Any Idea how to fix this? The buttons are "fixed width" while both labels can "grow".
Thanks
Your spacer <div> is eating up all the space. Remove this and then set pack of the <hbox> to end.
This gives you something like that:
...
</menubar>
<hbox vflex="1" hflex="1" align="center" pack="end">
<label id="B"/>
...
As a general note I find it quite helpful to use Firefox/Firebug for debugging those layout issues. So one can easily see which resulting DOM is generated by the ZUL code.

Float align display:inline problem

<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>

Resources