I am using Primefaces graphicImage inside a p:tooltip and would like to set the width and height for the images individually.
<p:remoteCommand....update="myImage" />
<p:tooltip beforeShow="remoteCommand()">
<p:graphicImage id="myImage"... style="#{myBean.myStyle}" />
....
Update:
Bean.myStyle is triggered correctly and the style parameter is updated in the page source, but not in the dom tree.
If I set style="width:100px" directly it works, but if the value comes from the bean, it is ignored.
It seems like the style-attribute of graphicImage gets updated but not the component itself.
What am I missing here?
I think style value is setted when the document is loaded and its never reloaded, when its visible just its display:none value is changing. So I would give an id to p:graphicImage then I would add a p:ajax using onShow or similar event (I dont know which one is available for tooltip) then I would use update attribute to render graphic image. If I remember right even it should work just with <p:ajax /> without any attribute but I am not sure
So it should look like that:
<p:graphicImage id="x" style="#{bean.value}">
<p:ajax event="show" update"x"/>
</p:graphicImage>
use this
<p:graphicImage width="#{bean.widthValue}" height="#{bean.heightValue}" >
</p:graphicImage>
Related
When I try to inspect with firebug, i see nothing about the title of commandlink. So, how can
I change its style?
<p:commandLink id="ajax" update="panel,display"
style="margin-right:20px;"
title="STYLE?">
</p:commandLink>
I don't know if I understood question correctly, but you can't edit this style! The title generated is a html component... Try to use something like it:
<p:tooltip for="ajax" >
<h:outputText escape="false" value="<strong>Style?</strong>"/>
</p:tooltip>
Now commandlLink title style can be modified. You can use a global tooltip too.
How would I set the default properties of server controls that I'll always use?
For example I have combos all over my pages which almost always look the same in the mark up text (e.g. CSS CLasses for PopUp, TextBox, Button, etc.)
I thought of putting the control inside an user control and set the properties there.
But then I would have to access the control itself with a property of the UC.
I want to get rid of these repeating tags:
<Appearance>
<AnyRecordFieldCell CssClass="SFGridAnyRecord"></AnyRecordFieldCell>
<AlternateRecordFieldCell CssClass="SFGridAlternateRecord"></AlternateRecordFieldCell>
<RecordPreviewCell CssClass="SFGridRecordPreview" />
<GroupIndentCell CssClass="SFGridGroupIndentCell" />
<GroupCaptionCell CssClass="SFGridGroupCaption" />
<AnySummaryCell CssClass="SFGridAnySummary" />
<GroupCaptionPlusMinusCell CssClass="SFGridPlusMinus" />
<TopLeftHeaderCell CssClass="SFGridTopLeftHeaderCell" />
<RowHeaderCell CssClass="SFGridRowHeaders" />
<ColumnHeaderCell CssClass="SFGridColumnHeaders" />
<GroupHeaderRowHeaderCell CssClass="SFGridGroupedColumnHeaders" />
<FilterBarCell CssClass="SFGridFilterBarCell" />
</Appearance>
Any ideas?
Consider using ASP.NET Themes, you can use them to set mark-up for controls.
You could go with a purely CSS solution if these elements are almost always the same - i.e. have styles for input and button elements.
Where styles differ the enclosing div, for example, can be referenced to change the style.
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.
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .
I have tried setting the background image this way, but it doesn't work. Any ideas how to set the background image of a rich text control in flex as easy as possible? Thanks
.rte{
...
backgroundImage: "assets/globe.jpg";
}
and
<mx:RichTextEditor id="rt"
...
styleName="rte"
/>
Unfortunately, you can't.
The docs for RichTextEditor show that it doesn't support a backgroundImage property, and the component is not skinnable.
Therefore, I'd suggest creating your own wrapper component, which accepts an image, like so:
<!-- Note: Using Canvas becuase your post indicates Flex 3, if using Flex 4, please use Group -->
<Canvas>
<mx:Image width="100%" height="100%" />
<RichTextEditor />
</Canvas>
The RichTextEditor component doesn't support background images last I checked. What you'd want to do is create a custom RTE skin where you add an image behind the actual text, then within the skin, have the do getStyle('backgroundImage') and set it in a bindable private var which is then binded to the image.
That's about it. It's either use this skin or you can always wrap your RTE within a BitmapImage or some other kind of component that supports background images.
EDIT: Sorry, didn't see that this was Flex3. In that case, you'll need to extend your RTE component and add the Image component manually by overriding the createChildren function and then changing the value of the image by overriding the updateDisplayList function using the same getStyle function as mentioned above.
It can be done by setting RTE TextArea's backgroundAlpha to 0
<mx:RichTextEditor id="richTextEditor"
backgroundImage="#Embed('<imagepath>')" width="100%" height="100%"
initialize="{richTextEditor.textArea.setStyle('backgroundAlpha', '0') }"
/>
Note:Please modify image path and you can also set style through CSS/Style tag
Hopefully this will helps