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
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.
Play Framework 2.2.0 seems to incorrectly display html content that comes from an Html object inside a layout. Given the following templates:
main.scala.html:
#(title : String)(content: Html)
Price 10€
#content
index.scala.html:
#main("Index") {
Price: 20€
}
The result of rendering index.scala.html is:
Price 10€
Price 20�
Something happens to the content displayed inside the layout, but not to the content on the outside. Am I missing something? Thanks!
Turns out Eclipse was setting different encodings for different files and it was breaking the characters.
A similar post about this problem is here:
Wrong Charset Encoding with Play Framework 2.1
If I do this
sb.appendHtmlConstant("<div class=\"" + CELL_RESOURCES.style().title() + "\">");
in the CellList render method then my generated HTML ends up looking like
<div class="title">Wow!</div>
but the CSS that is generated does not include the "title" class/selector and so no CSS gets applied.
Is there a way of applying CSS styling to parts of the CellList rendering?
Did you call CELL_RESOURCES.style().ensureInjected(); somewhere in your code (preferable as soon as possible in you startup code)? to make sure the css is actually injected?
I am implementing a simple markdown wiki using Apache Wicket. The wiki would typically render any arbitrary HTML based on what the user has entered.
I am a bit confused about which Wicket component would be best suited to render such arbitrary HTML.
I tried the Label component but it does not render lists properly, neither does the MultilineLabel (which puts breaks instead of the regular list HTML).
Thanks for any help.
UPDATE: The Label component works perfectly. It was my mistake that I was not able to get it to work earlier. It was a combination of some bad stylesheets and late night coding. Thanks for the helpfull answers. As suggested, I am also going to check out some WYSIWYG editors, which actually might work out better than markdown. Visural Wicket seems especially promising.
If what you want to render is not big, or is already represented as a String, Label will work well, just call label.setEscapeModelStrings(false); to ensure it prints the string as is.
But, if your HTML content is generated dynamically, or read from an InputStream/Reader, and you don't want to keep it in memory, you could use WebComponent directly, and override the method onComponentTagBody(). This way, you write directly to the response, instead of filling a in-memory buffer, transform it to a String, and then write to the response (which happens if you use Label).
Sample code, for both cases:
HomePage.java
public class HomePage extends WebPage {
public HomePage() {
add(new Label("label", "<ul><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li></ul>")
.setEscapeModelStrings(false));
add(new WebComponent("html") {
#Override
protected void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag) {
Response response = getRequestCycle().getResponse();
response.write("<ul>");
for (int i = 0; i < 5; i++)
response.write("<li>test</li>");
response.write("</ul>");
}
});
}
}
HomePage.html
<html xmlns:wicket="http://wicket.apache.org">
<body>
<h2>Label</h2>
<div wicket:id="label"></div>
<h2>WebComponent</h2>
<div wicket:id="html"></div>
</body>
</html>
It is Label, call Component.setEscapeModelStrings(false) though to render the raw html your model returns.
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