I made a from with input text area, and the value will come from database.
value is some thing like : A 2 year notice has bean applied by mycompany with effect from 12 December 2012.
I want to hilight 12 December 2012 with some different background color.
Note: value will come dinamycally from database.
<h:inputTextarea cols="60" rows="5" id="messageId" style="margin-top:3px;"
value="#{messageBean.textMessage}" />
How can i do this? Thanks !!
Since <h:inputTextarea generates <textarea
Its impossible
Take a look at this similar questions:
Change the Color Of Certain Words In Textarea using Jquery?
And
color codes in textarea using jquery
You can use some WYSIWYG text editor
Like this one used in Primefaes Editor
Or just integrate some third party js WYSIWYG text editor , like CKEditor or TinyMCE
You also can strip all the toolbars/buttons from the editor , so it will eventually look like almost like a textarea
No it is impossible.
But you can do a trick. You can make your <h:inputTextarea component transparent by using the css property background:transparent;. Then use another colored div and place it behind the word you want to highlight. Sometimes you may need to add display:inline-block; to your highlighter div if JSF doesn't render the div with the width you give. A negative z-index may also be needed.
Related
I am struggling to understand how I can change the font-family, font-size, bold, etc for the Tab component.
Can someone point me in the right direction
Many thanks
Stephen (SquareHat)
p.s. I could not find the tag ui-kitten as suggested on the web-page
If you want to edit the text on the Tab component, you should pass a own Text component to the title property like this
<Tab title={evaProps => <Text {...evaProps} style={{color: 'blue'}}>USERS</Text>}>
On that text, you can use the style that you want!
I've got a simple inputTextarea contained in a xp:table. I want to display it all opened up, and not have a scroller on the right. style="width:100%; height:auto" doesn't seem to do anything.
Anyone?
The best route here is to use the Dojo Textarea control, xe:djTextarea - it does just what you're describing.
For navigation I'm using an xe:navigator and containing xe:basicContainerNodes, which in turn contain xe:pageTreeNodes. Rather classic design, I'd say.
If I mark the xe:navigator as "expandable" all the containerNodes are showing something that at first glance appear to be classic "twisties" so that users can collapse / expand them.
This is kind of OK but I'd love to replace the "twisties" with icons showing "+" or "-" as that is what I'm using everywhere else inside the application.
Looking at the rendered html code for my navigator I see that the "twisties" in fact are links with a background sprite applied through css:
<a class="lotusSprite lotusArrow lotusTwistyOpenMenu" style="padding: 0px" role="button" href="#" onclick="javascript:XSP.oneUIMenuSwap(event,'wipe','view:_id1:_id2:facetLeft:_id278:outline_node_0')" title="Click to expand or collapse this section">
<span class="lotusAltText">▼</span>
</a>
(btw: the <span> inside the link appears to be a fake element as it is set to display:none)
Examining the sprite I in fact find some "+" icons but no "-" ones.
Question: is there probably away to reach my goal, other than building my own sprite and replacing the original one?
Update: another helpful option would be to make the container's label clickable so thar user could expand / collapse the containers by clicking their headline labels. Any idea here?
Update #2: apparently not too many responses ;). Meanwhile I solved it by switching to an Accordion based navigator; a bit more programming effort, but nicer looking, too...
solved it by switching to accordions. Looks even nicer but is a bit more programming effort (keeping the right accordion panels open and marking the currently selected menu entries)
I'm using the Domino 8.5.3 <xe:inputRichText> control for end-users to add web content. The control has the basic feature to add an image, but no "align" settings to float text around the image (ex. <img align="right"> ), which is so common with basic HTML.
One work-around tried is to use a 2-column table, which works, but not as well (especially, when re-sizing the window).
Any ideas for a work-around? Is there anything similar to 'Pass-thru HTML' in a inputRichText control?
Try to set toolbar style to large and then simply switch to HTML source (the last but one button) and change it whatever You like:
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/CKEditor_in_XPages_in_NotesDomino_8.5.2
I am getting a scenerio where there are three buttons() right next to each other. They need to be enclosed by tag to work properly. The problem here is out of 3 buttons, second button operation must open in new window, rest in same window. So I was forced to use 3 tag around 3 buttons respectively with second one having target="_blank" property set. However, each starts with newline. I want all 3 buttons on same line with second button's form tag having property, target="_blank". Thanks
That's because the HTML <form> element is by default a block element. HTML block elements are positioned in their own new line. Apart from putting them inside a table, you can also just display them inline using CSS. This way they won't be positioned in their own line, but next each other.
form {
display: inline;
}
wrap them around <h:panelGrid columns="3">
Then you will have each buttom in one colum, thus inline.
Answer is simple.. Sometimes solution will be right in front of your eyes and we cant see it. Used table tag of simple HTML.