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.
Related
I have JSF data table and only one column has column header.
I need to hide the column with header text based on the condition and when I do that the entire header row shrinks because the other columns don't have header text.
To prevent this, I need to set 'empty' string and I tried a few tricks but nothing seem to work.
<p:dataTable ....>
<p:column headerText=" " >
How do I set empty string headerText attribute?
Thx in advance.
Depending on your Primefaces version you could use this code to force the creation of the html element
<p:dataTable ....>
<p:column headerText=" " >
With early version this should create the div but make it very small, so you can add css style to adjust to your wish, something like
.ui-datatable thead th {
min-height: xx px;
min-width: yy px;
}
I think you can solve your problem event with only the second part, so only with css.
In SelectOneMenu, one of the value is overflowing in drop-down and that value should be aligned according with other value.
Following skinning styles are available for selectOneMenu
.ui-selectonemenu Main container.
.ui-selectonemenu-label Label of the component.
.ui-selectonemenu-trigger Container of dropdown icon.
.ui-selectonemenu-items Items list.
.ui-selectonemenu-items Each item in the list.
try the following for your menu
.ui-selectonemenu-items {
display: inline !important;
}
or you can use
word-wrap: break-word;
I have JSF table with left alignment for all rows. But I would like to apply right alignment on one row. I tried this:
<h:panelGroup styleClass="table-right">
<h:selectBooleanCheckbox value="#{bean.method}"> </h:selectBooleanCheckbox>
</h:panelGroup>
.table-right {
text-align: rigth;
}
But it's not working. What is the proper way to apply CSS class for one h:panelGroup and align it's content on the right side?
If you inspect the html, you'll see the h:panelGroup is rendered as a <span>.
The span-tag is an inline-element, meaning it will be as small as possible and you can't set a width on it. You can verify this, if you add i.e. border: 1px solid black; to the styleClass. It has no effect to either left- or right-align something in a container, that is just big enough.
I think you can solve it by making the panelGroup a block/inline-block element and putting a width on it:
display: inline-block;
width: 100%;
Guys i have a serious problem, like in the image below , the styles menu is not showing for html rich editor in sharepoint 2010, i included the *.css file and the PrefixStyleSheet
any help ? :(
Did yor read http://msdn.microsoft.com/en-us/library/ms551040.aspx and especially the first section which specifies how to set the PrefixStyleSheet-property of the RTE-control? If you then add css-classes with the specified stylesheet-prefix in your css, they should show up in the Styles or Markup Styles section depending on the context of the editing.
Have you done the above steps?
If you set PrefixStyleSheet to, for example "Test", your css should look like this to have a H1 show up in the Markup Styles section:
H1.TestElement-H1
{
-ms-name: "Heading 1";
}
and markup:
<PublishingWebControls:RichHtmlField id="Content" PrefixStyleSheet="Test" FieldName="PublishingPageContent" runat="server" />
Get a copy of corev4.css and do a search for ms-rte. Keep searching untill you get to a bit that looks like this:
H1.ms-rteElement-H1 {
-ms-name: "Heading 1"
}
.ms-rteElement-H1 {
FONT-SIZE: 2em; FONT-WEIGHT: normal
}
Use the supplied values to build your own styles and Markups.
Assuming your prefix is PrefixStyleSheet="myPrefex"
Markup Styles seem to require 2 css entries each. So if you wanted a markup style called "HEADING ONE!!!FTW" that was 2em bold you would have:
H1.myPrefexElement-H1 {
-ms-name: "HEADING ONE!!!FTW";
}
.myPrefexElement-H1 {
FONT-SIZE: 2em; FONT-WEIGHT: bold;
}
Markup styles are applied to existing HTML tags, so it appears the logic behind rolling your own is to overload the HTML tag with your own class name and give it a label, then flesh out your class with the actual css goodness.
Items in the STYLES drop down seem to only require a single line:
.myPrefexStyle-Bold {
-ms-name: "Bold Bits";
font-weight:bold;
}
But besure to include the -ms-name attribute as this determines the text that appears in the drop down (If you dont have this attribute you end up with blanks)
PS: Dont forget to include your own css stylesheet in the master or layout or page. I ended up putting in my master page with: <SharePoint:CssRegistration ID="CssRegistration2" Name="<% $SPUrl:~SiteCollection/Style Library/MyCustomMarkup.css %>" After="corev4.css" runat="server"/>
[offtopic]Ive only just started with sharepoint, but boy is it a dogs breakfast behind the scenes! The horror, the horror![/offtopic]
To use a custom style prefix you must set both PrefixStyleSheet and Stylesheet property:
<PublishingWebControls:RichHtmlField AllowFontsMenu="True" FieldName="Page Content" runat="server" PrefixStyleSheet="custom-rte" Stylesheet="<% $SPUrl:~sitecollection/Style Library/custom_rte.css %>"/>
Remember that doing this you will overwrite all dropdowns, colors and other options in RTE, so if you want to only change the Styles dropdown you still must to copy all the default rules.
In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.