I all, I'm new to the ADF language and after a long search and failed tries, I have to ask how can I change a button layout - background, border, ... - using the CSS and the property "styleClass" of the ADF?
In my .jspx I have something like:
<af:commandButton action="#{backing_test.echoAction}" id="echo1" text="Save 1" styleClass="commandButton.buttonSaveTest" />
The thing is, after opening firebug, I found out that instead of a regular button, I have an image!
Thanks for you help!
You can't rely on what generated HTML you'll get for a specific component in ADF. The best way to get your own look and feel is to implement your own 'skin', which extends one of those already provided by ADF (eg, 'blafplus', or 'fusion', the new default). You then use the CSS selectors for the component you want, eg
af|inputText::content {
background-color: red;
}
Check out the following link to learn about skinning
http://download.oracle.com/docs/cd/E17904_01/web.1111/b31973/af_skin.htm#BAJFEFCJ
The hosted demo is an excellent way of finding out how to skin specific components. Eg, for your command button, check out:
http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/commandButton.jspx
Related
I have quite long Strings in one column and I want to display them as multi-line cells in my grid.
I'm using Vaadin 14 + Java and I tried to set CSS-Style Class for the specific column:
Java-Code:
#CssImport("./styles/shared-styles.css")
public class RisikoGrid extends Grid<RisikoEntity> {
public RisikoGrid() {
setSizeFull();
// add the column to the grid
addColumn(Entity::getAttribute).setHeader("MyCol")
.setFlexGrow(10).setSortable(true).setKey("mycolumn");
// set CSS style class for the specific column
this.getColumnByKey("mycolumn").setClassNameGenerator(item -> {return "grid-mycol";});
}
}
CSS (shared-styles.css)
.grid-mycol{
background: red;
white-space: normal;
word-wrap: break-word;
}
While I do see the class-name when I use the inspector in my webbrowser (chrome), the css is not applied.
What do I need to change to make it work?
Edit: this is how my styles look like - and I can't even see the background:red for instance:
You can use the built-in wrap-cell-content theme variant to allow text to wrap inside the cells.
grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);
See the last example on https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos – the texts there are not that long, but if you make your browsers window narrow enough you’ll see some of the addresses wrap on two lines.
I looked into why my css settings didn't show up in the inspector and the solution was a minimal change from:
#CssImport("./styles/shared-styles.css")
to
#CssImport(value = "./styles/shared-styles.css", themeFor = "vaadin-grid")
I'm guessing the component scope of the grid differs from the global CSS.
It works now.
I'm facing a situation where I want to display a link like this:
For more information check out our FAQ.
Where the full stop is displayed right after the link. It's seems like an Overkill to define multiple properties for this like
E.g.
faq.info=For more information check out our
faq.markup=FAQ
faq.href=http://www.some.very.nice.url.com
faq.fullstop=.
Neither do I want to include the dot only in the html. Is it possible to insert the dot at the end or the link inbetween?
You can embed components inside string messages:
<wicket:message key="faq.info">
<a wicket:id="faq">
<wicket:message key="faq.info.label"/>
</a>
</wicket:message>
faq.info=For more information check out our ${faq}.
faq.info.label=FAQ
For this to work you'll have to add a link with id "faq" from your Java code.
I just faced an interesting thing concerning HTML widget. The thing is...
If a word length is too long per line then HTML widget becomes wider to have it all placed in
so my question is... is it possible to make HTML widget to cut by pieces long words not to getting wider itself?
Comparing to Swing, I mean the effect something like JTextArea does when word wrapping is off (see image)
EDIT
I tried to use css word-break: break-all; here is the code:
composite code:
public MyTestUI(){//constructor
html.setStyleName("my-test");
}
public void setLongWord(String word)//method
{
html.setHTML(word);
}
css
.my-test {
color:gray;
font-family:verdana;
white-space: normal;
word-break: break-all;
}
... the css works in Chrome but doesn't in FF :( How to make the word breaking the crossbrowser one ?
GWT version 2.3
Any useful comment is much appreciated
Use CSS property word-wrap:break-word as described in following link. This will work even if the HTML widget is having static height and width.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Use CSS property word-break:normal; or try word-break:hyphenate;
Add a CSS style to your HTML widget to break long words:
http://www.w3schools.com/cssref/css3_pr_word-break.asp
EDIT:
I stay corrected: word-wrap is a better option. See more:
What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS
I've tried to hide a tag in wicket, I've managed to accomplish that only in the case that follows:
HTML
...
<div wicket:id="div_id">This is what hides</div>
JAVA
final WebMarkupContainer wmc = new WebMarkupContainer("div_id");
Method
public onSubmit(){
wmc.setVisible(false);
}
This manages to get the div hidden, but my div tag has another wicket components inside, and so I can't seem to get this working, error pops saying inner components are not defined in the component "div_id".
Any idea how to get this working?
Thanks guys!!
If you have other components inside that div, you have to add your other components to the markup container you have for the div instead of adding them to your page. What wicket is looking for is a match between the hierarchy on the Java and HTML part.
This is just a very wild guess, since I don't know how you add the inner components and what exactly fails, but if you add or modify them in onBeforeRender() and you're using Wicket 1.4.x, you'll need to override WebmarkupContainer.callOnBeforeRenderIfNotVisible() to return true...
For Wicket 1.5 this code should be moved to onConfigure()
Is it possible to change the header style of a rich:simpleTogglePanel ?? The font of the header is always "bold" and I want it to be normal.
I tried with the style attribute this way: style="font-weight:normal" without result.
Any idea?
Have you tried putting the !important at the end of your style definition(i.e. style="font-weight:normal !important;")?
Also, as I'm sure you are aware, it is usually better to specify your style in a separate stylesheet. I've customized the <rich:extendedDataTable in this manner (not sure if this is a hack or not, but it works great for me). Open your page in a browser and then crack open the developer tools (press F12 in Firefox with FireBug installed, or in Chrome right click on the rich:SimpleTogglePanel and click 'Inspect Element'. This will let you see the CSS definition name used by the RichFaces framework. Just create a new .css file and define the style you want using the name you find RichFaces is using.
/*This class defines styles for a table cell.*/
/*tableBorderWidth, tableBorderColor border-bottom*/
/*tableBorderWidth, tableBorderColor border-right*/
.rf-edt-c {
border-bottom: 1px solid #021e2f;
border-right: 1px solid #021e2f;
height: auto !important;
min-height: 26px;
}
As you can see, you may need to specify the !important tag there as well, but it keeps the style outside of your page...
Hope this helps.