I have the following tag of primefaces
<p:outputLabel readonly="true" value="${displayHelper.getValue('CONTEXT_1')} ${displayHelper.getDescription('CONTEXT_1')}" />
to display some information.
the result of ${displayHelper.getValue('CONTEXT_1')} ${displayHelper.getDescription('CONTEXT_1')}" is 100%.
Now I want to display the result of vlaue as 100 (also bold) with "%" (small) without bold. How can I manage that in this case?
Also result should look like 100 %
Related
I have read-only textboxes in a form that auto-populate data from a table.
<p:inputText value="#{ManagedBean.var}" styleClass="textbox" id="varDetails" maxlength="200"></p:inputText>
Some entries are not displayed completely because they exceed the textbox width.
How can i use the Onmouseover command to change the width of the textbox dynamically?
This seems to work:
<h:form>
<p:inputText ...
onmouseover="$(this).attr('size', this.value.length)"
onmouseout="$(this).attr('size', '')" />
</h:form>
You'd have to use min-width and not width in the styleclass.
But if the content is smaller than the current size, it will also become smaller. If you don't want that you can use something like
onmouseover="if (this.value.length > 10) $(this).attr('size', this.value.length)"
The value (10 above) should be chosen so it matches the min-width in the styleclass.
Otherwise you could give it a title:
<p:inputText ... value="#{ManagedBean.var}" title="#{ManagedBean.var}" />
That will be shown onmouseover.
You could also give it a p:tooltip:
<p:tooltip for="varDetails" value="#{ManagedBean.var}" />
That's more or less the same.
I have a form for printing with code that looks like this:
<p><span style="font-size:18px;"><small>[GUESTADDRESS]<br />
[GUESTCITY]<br />
[GUESTCUSTOMQ4]<br />
[GUESTPOSTCODE]<br />
[GUESTCOUNTRY]</small></span></p>
</td>
When I want to print, I get a blank line if there is no entry for a particular field.
Is there a way to hide blank lines for printing?
Please keep it simple for me as I am not an expert. I think that this is CSS, but I am not sure!
if there is no entry for a particular field then you get br tags in one place for eg:
[GUESTADDRESS]<br />
<br />
[GUESTCUSTOMQ4]<br />
[GUESTPOSTCODE]<br />
[GUESTCOUNTRY]
So, whenever there is no contents for the field, you see multiple breaking line in one place and you can do like this:
#media print{
br~br{display:none;}
}
Actually I use primefaces 3.5.
I want to reduce the width for specific column in a datatable
it doesn't work:
<p:dataTable styleClass="myTable" ......................>
<p:column width="5" headerText="verylargeeeeeeeeeeeeeeeeeeeeeeeeeeeee">
</p:column>
Your code works for me, but it will not reduce the size of a column to be less than the headerText width. You can set the header to use multiple lines when the text is too large, but it only works if there are spaces in the headerText. That won't help with your example because there are no spaces. The CSS for that option is below:
.ui-datatable thead th {
white-space:normal !important;
}
In other words, I am not sure how you can reduce the size of a column to less than a word length.
Here is my acefaces datatable
<ace:dataTable id="tbl" value="#{mainSearch.searchResult}" var="srvc"
paginator="true" paginatorPosition="bottom" rows="10"
emptyMessage="No Record Present Yet" rowsPerPageTemplate="10,25,50,100"
rowIndexVar="row" rowStyleClass="#{row mod 2 eq 0?'none':'skyBlue'}">
<ace:column headerText="Category" sortBy="#{srvc.groupName}"
filterBy="#{srvc.groupName}" filterMatchMode="contains">
<h:outputText value="#{srvc.groupName}"/>
</ace:column>
<ace:column headerText="Service Number" sortBy="#{srvc.serviceNumber}"
filterBy="#{srvc.serviceNumber}"filterMatchMode="contains">
<h:outputText value="#{srvc.serviceNumber}"/>
</ace:column>
<ace:column headerText="Shift" sortBy="#{srvc.shift}"
filterBy="#{srvc.shift}" filterMatchMode="contains">
<h:outputText value="#{srvc.shift}"/>
</ace:column>
</ace:dataTable>
Now this datatable is showing on my whole page.I can fix its height by <ace:datatable height=.. but I didn't find any width attribute.I also tried to set its width using CSS (using style attribute on both header, datatable) but it didn't work. Now I am stuck here and unable to find that How can I minimize its width.
Note: The only way that worked for me was to small the header text.For instance, As my first row header is Category.Now If I repalced it with just CAT then whole row gets shrink.It mean first of all I need to squeez the text(as it is my guess).Is there anyway that without poking this text? If not, then how can I resize this text and shortened this datatable?
I've tried altering CSS width property in Firefox of the ICEfaces showcase, achieving the result you want. Note that there may be some potential problems when you make the table too small and the data won't fit in the table anymore, so my advice will be to inspect the resultant table in the browser to get the right CSS fixture.
Regarding the documentation of <ace:dataTable>, there are the typical styleClass and style property for setting CSS style classes and inline style respectively, so the following will do the work:
<ace:dataTable style="width:80%"> ... </ace:dataTable>
or
<ace:dataTable styleClass="my-width"> ... </ace:dataTable>
with CSS class:
.my-width {
width:80%
}
As a side note, when you are ready to try out the latest Primefaces <p:dataTable>, you will find many attributes designed for setting up proper CSS styles.
Is there a way I can limit the width of a textbox to be equal to the MaxLength property? In my case right now, the textbox control is placed in a table cell as in this snippet:
<td class=TDSmallerBold style="width:90%">
<asp:textbox id="txtTitle" runat="server"
CausesValidation="true"
Text="Type a title here..be concise but descriptive. Include price."
ToolTip="Describe the item with a short pithy title (most important keywords first). Include the price. The title you provide here will be the primary text found by search engines that index Zipeee content."
MaxLength="60"
Width="100%">
</asp:textbox>
(I know I should not use HTML tables to control layout..another subject for sure) but is there a way to constrain the actual width to the max number of characters allowed in the typed box?
You could set it from code (called in your Page_Load) as such:
txtTitle.Width = new Unit(txtTitle.MaxLength, UnitType.Em);
Our system is database driven and we have a meta data table that stores a length property for each variable. I personally used the meta data by iterating over the ControlCollection and for each TextBox item, pulling the length of the variable's meta data and then assigning it to MaxLength and to Width though if you already have MaxLength set, you could have it do Widths in this manner.
It won't be precise, because characters can vary in width. But if you were really serious about this, you could do it with a bit of Javascript (jQuery). The steps would be:
Create a span offscreen (top:-1000px or something)
Make sure the span has the same styles/classes as your text box
Fill the span with 60 characters
Use jQuery to measure the width of the span
Apply that width to the text box
It's a technique similar to the auto-expanding textareas you see on Facebook and such: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
(In this case, you are doing it horizontally instead of vertically.)
If you need real code, let me know, I'll do my best.
I use the HTML property cols
So for your example I would use
<td class=TDSmallerBold style="width:90%">
<asp:textbox id="txtTitle" runat="server"
CausesValidation="true"
Text="Type a title here..be concise but descriptive. Include price."
ToolTip="Blah Blah I don't like horizotal scroll-bars"
MaxLength="60"
Width="100%"
Cols="60"
>
</asp:textbox>
I have never tried this but i wonder if there is a way to tie both together. So setting MaxLength also sets to cols, would be an interesting exercise
I realise that this is a old question, but for those people who come across it looking for how to style text boxes based on the MaxLength attribute I use the following CSS:
input[maxlength='2'] { width: 40px;}
If you have lots of text boxes with different MaxLengths, then this probably isn't going to be the solution for you. However if you want the presentation of a text box to match what is to be input into it, I think it's a good solution.
$(':input[maxlength]').each(function (i, e) {$(e).width(e.maxLength * 10)});
This is making an assumption that characters are roughly 10px. It works quite well for my needs.
I realise this is a very old post - here's my answer for future reference for others!
Use the Style property to set width to 100% instead of the width property on its own.
e.g.
<td class=TDSmallerBold style="width:90%">
<asp:textbox id="txtTitle" runat="server"
CausesValidation="true"
Text="Type a title here..be concise but descriptive. Include price."
ToolTip="Blah Blah I don't like horizontal scroll-bars"
MaxLength="60"
Style="Width: 100%"
>
</asp:textbox>
This is tried and tested in a production environment I work on. It's simpler than using Javascript and works in the existing HTML.
As to exactly why this works, unfortunately I am short of knowledge.