Is it possible to change the font size of the drop down list that appears in an Xpages type ahead control?
Have to display a type ahead on a 7 inch tablet screen and readability is quite hard for most people.
<xp:td><xp:inputText id="inputHost" styleClass="inputCovFieldYellow">
<xp:typeAhead mode="partial" minChars="1" valueList="#{javascript:applicationScope.employeeSelectionListNoNum;}" ignoreCase="true"
id="typeAhead1"> </xp:typeAhead> </xp:inputText>
The xp:typeahead control wraps its content in an outer div with CSS classes dijitPopup and dijitComboBoxMenuPopup, an inner div with CSS classes dijitReset, dijitMenu and dijitComboBoxMenu, and then a div with CSS class dijitMenuItem for each item in the drop down list.
So you can style each item using these classes. Here's a simple example of setting the font size to 20 px:
.dijitComboBoxMenu .dijitMenuItem {
font-size: 20px;
}
Related
I input the text in a help database in native Notes and display it to a user on the web. The content goes beyond the page size on the web. How can I use a scrollbar in that Rich Text field?
<xp:td align="center">
<xp:inputRichText
id="inputRichText1"
value="#{document1.Body}"
readonly="true">
<xp:this.style><![CDATA[color:darkblue;text-align:left;border:solid;border-width:thin;padding-top:15.0px;
padding-bottom:15.0px;padding-left:15.0px;padding-right:15.0px;width:800px]]></xp:this.style></xp:inputRichText>
</xp:td>
Add this to your CSS:
.lotusMain {
height: auto;
}
Currently height is set to 200%. This is not enough for some of your rich text fields. With auto it takes the height needed.
First question is: do I really need to use tables to align/organize labels/fields on my xPage?
It's like old style development (using hidden tables) that helps group components on the form/page.
Anyway I just switched from Notes 8 to Notes 9 and apply Bootstrap 3 theme. Now all tables have top border I cannot remove. It's something weird. Even my own class doesn't remove the border.
table, th, td {
border-collapse: collapse;
}
Moreover if I try to set border size/color it works only for left,righ and bottom. If I set border size 2px then it sets the color for top border as well
table, th, td {
border: 1px solid black;
}
So how do I remove tables borders on my page. See picture below
Add the following lines to your CSS:
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td,
.table>tbody>tr>td, .table>tfoot>tr>td {
border-top: 0px;
}
You don't need a table to align label and field. Use style "display:inline-block" and set an appropriate width:
<xp:label
value="Label1"
id="label1"
for="inputText1"
style="width:20%;display:inline-block;">
</xp:label>
<xp:inputText
id="inputText1"
value="#{sessionScope.input1}"
style="width:75%;display:inline-block;">
</xp:inputText>
Use separate classes for label and fields with those styles to set the same align to all label/fields in your application.
If you move to a Bootstrap theme you would not need the tables for alignment plus you would be creating a responsive design that could adapt to mobile devices.
I want to add placeBar label to the right..
PlaseBar title appears as a text on left, all buttons/items appears on right. But there is no option to add just a text/label as an item. If I cannot add a lebel then how can I style the button to hide borders?
To answer your question on the button styling: add border: none to your buttons in the place bar by adding this to your custom css file:
.lotusPlaceBar .lotusBtn {
border: none;
}
This will target buttons in the place bar only.
You can also add your own class to a specific button and then target that class only.
The most simple solution is probably to just add inline CSS to your button:
<xp:button value="need a label here" id="button3" style="border:none"></xp:button>
Add a basicLeafNode to your placeBarActions
<xe:this.placeBarActions>
<xe:basicLeafNode
label="need a label here"
enabled="false"
styleClass="labelPlaceBar">
</xe:basicLeafNode>
and give it a class "labelPlaceBar".
Set enabled to "false". This way it won't change mouse cursor hovering over the label.
Use class "labelPlaceBar" in css to hide label's border and background for normal mode and for hovering:
.labelPlaceBar a, .labelPlaceBar a:hover {
border: none;
background: transparent;
}
Then it will show the label just as a label.
After you have chosen a field name, then you start typing in the value textbox, the dropdown defaults to a width of 150px which causes lots of things to be cut off. A scrollbar shows up so you can scroll left and right, but I would like to figure out how to set the minimum width of this element.
The css path to the element defining this is:
body > div.gwt-SuggestBoxPopup > div > table > tbody > tr.suggestPopupMiddle > td.suggestPopupMiddleCenter > div > div
It seems to be an inline style in the element
<div class="" style="overflow: auto; position: relative; zoom: 1; height: 322px; width: 150px;">
The field dropdown seems to re-size dynamically, so it does not get scroll bars, the suggest box starts at 150px and resizes sometimes, but it doesn't seem to have any rhyme or reason.
I added the following to my stylesheet:
.suggestPopupMiddleCenter > div > div
{
min-width: 300px; !important
}
But that also affects the field dropdown, which appears to be working properly.
Is this a bug, or is there a configuration that I can use that will allow the value suggestion box dropdown to dynamically resize based on the widest element?
It is hard wired in the tardis branch https://github.com/salk31/RedQueryBuilder/blob/tardis/redquerybuilder-core/src/main/java/com/redspr/redquerybuilder/core/client/expression/SuggestEditorWidget.java#L107
It probably could use some rule to choose the width. Best if you raise a bug and make a suggestion?
I have a rich:autocomplete dropdown selector in my application. In the dropdown list that appears as the user begins entering text, the strings that have been loaded into the list of selections will happily display out to the entire width of the dropdown. However, once you make a selection only about 34 characters of the string will be displayed, with the result that the end user has to scroll left and right in the input box to see the entire string, see here (StackOverflow won't allow me to post inline images yet): http://imgur.com/Y9LLaBi
Here's the offending table cell in the frontend XHTML file. It uses the JSF and richfaces namespaces and there's a backing bean that creates the autocomplete suggestion list and executes other business logic, but I believe this is the only relevant code:
<td height="20" class="addborderright addborderbottom inputbox" colspan="4">
<!-- nb: richfaces autocomplete to ensure proper name entry -->
<h:message styleClass="errormsg" for="campusName" />
<rich:autocomplete id="campusName" length="50" mode="client" minChars="1"
layout="table" autofill="true" selectFirst="true"
onselectitem="javascript:executeAction(
'#studentComplaintCampusInformationBean.formName}',
'populateCampusAddressFieldsLink');"
value="#{studentComplaintCampusInformationBean.campus.operatingName}"
autocompleteList="#{studentComplaintCampusInformationBean.registeredCampusNameList}"
style="width:370px" fetchValue="#{fn}" var="fn" maxlength="100">
<rich:column>#{fn}</rich:column>
</rich:autocomplete>
</td>
To make the dropdown box left-justify text and be the same as the width of the input field the following CSS is at the top of the XHTML file:
<style>
.rf-au-fnt{
text-align: left; float: left;
}
.rf-au-lst-dcrtn .rf-au-lst-scrl {
width: 370px; !important
}
</style>
However, there doesn't appear to be a CSS property relating to the width of the displayed text in the input box, so it appears cut off to the end user, and only fills about half the available space in the input box! Could someone please help? Thanks!
rf-au-fnt is the class of the input, you're already overriding it so just add the width.
As a sidenote, rather than directly overriding the RichFaces classes you should set a class for the component and then write stylesheets like
.myAutocomplete .rf-au-fnt {text-align: left; float: left; width: 370px !important
}
This way you don't change something you wouldn't want to.