Does anyone maybe have an example of a LitRenderer with multiple lines of potentially wrapped text in a vaadin grid please?
All the examples in the documentation just have a bold line and a small single line of text underneath. I have tried to create a bold line and then a multi line text paragraph underneath it, but I cant get the grid to render this properly.
The text should ideally change width responsively with flex grow, wrap accordlingly and potentially truncate if no space is available.
Edit:
I think I got this working as follows:
grid.addColumn(TemplateRenderer.<SubProductTypeOption>of("""
<vaadin-vertical-layout style="line-height: var(--lumo-line-height-m); height: 175px; cursor: pointer;">
<span> [[item.name]] </span>
<span style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color); white-space:normal;">[[item.description]]</span>
</vaadin-vertical-layout>
""")
.withProperty("name", SubProductTypeOption::getName)
.withProperty("description", SubProductTypeOption::getDescription)
).setFlexGrow(1);
Seems to work so far...
Related
According to this question
show highcharts node text from beginning if the text is to long
it is possible to use dataLabels.nodeFormat to display only the name which is correct. But the text stands all in one line, and you cant read the whole text "Merkmale | Makro zur Prüfung" because it gets cut off in the end. If you don't use datalabels.nodeFormat the text will be wrapped inside the label automatically. Is there any solution for this?
I think that using this CSS config is a solution to your issue:
.highcharts-data-labels span {
word-break: break-word !important;
white-space: normal !important;
}
Demo: https://jsfiddle.net/BlackLabel/36y52qcf/
In Vaadin 13, I have a grid in which 80% of the content does NOT fill in the cell, so Vaadin 13 intelligently truncates the cell and adds ellipses to indicate that the field is truncated.
However, is there any way in which the ellipse can appear on the LEFT part of the text, so the user can always see the "suffix/ending" portion of the cell rather than the beginning of the cell field?
(In case you're curious as to why we need this: the cell contains the "full path" information for various files, but in 90% of the cases, the beginning part of the filepath is always identical, eg "C:/Windows/system32/folder 1/folder 2" etc. But the suffix tends to be unique, so we'd rather show the suffix.)
direction: rtl; should address the problem, as suggested here : I need an overflow to truncate from the left, with ellipses
It seems to work fine with my example:
Styles under shared-styles.html:
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
<template>
<style>
[part~="cell"].truncateLeft {
background: rgb(245, 245, 255);
direction: rtl;
}
</style>
</template>
</dom-module>
This is a column definition:
grid.addColumn(string->"Loooooooooooooooooooooooong test").setHeader("column 6").setWidth("45px").setClassNameGenerator(item->"truncateLeft");
And this is the final result:
[
I have a form, ending with an "I agree to these terms and conditions line" with a checkbox.
The code that I have for the checkbox is currently:
Although all is functioning well, the width of the checkbox element is too much. This causes a very wide space between the "I agree..." statement, and the actual checkbox. Any tips on how I can left align the checkbox, or reduce the width of the checkbox's element.enter image description here
Standard checkboxes in Rails could be changed with CSS in the following way:
input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
Although you should be detailed with your selector in case your checkbox is wrapped in some div with an ID, in which case the above will look slightly different:
#div input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
Recent upgrade to Bootstrap 3 on a Rails app. SimpleForm text box and also other form inputs are too large - they are erroneously full-page in length. The app does have responsive design, and the form input boxes do resize.
I'd like to limit the form input size to 50% instead of full page.
I did add this initializer gist https://gist.github.com/tokenvolt/6599141 but it did not seem to have an effect.
I am unfamiliar with the Bootstrap3/Simpleform2.1.1 conflicts.
I adjusted the width to 50% in the application.css.scss, but that did not make a clean change
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
margin-bottom: 15px;
#include box_sizing;
}
By length do you mean width? If you don't want the form to be too wide you could divide the page into columns and then put the form into a smaller column.
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<%= simple_form-for...
</div>
</div>
Bootstrap uses a gridsystem that divides the page into 12 columns. if you just put the form on, it will take up all 12 columns (the whole page) so you need to specify how many columns you want the form to take up. Here's a post that really helped me understand the new gridsystem: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/
In a document like:
<p class="wrapper">
<span class="ref">
<span class="text">English</span>
</p>
the following rules are applied:
.wrapper {
background:green;
position:relative;
padding-left:20px;
font-family:Times;
}
.text {
line-height:1;
background:blue;
font-size:80px;
}
.ref {
position:absolute;
left:5px;
width:10px;
height:80px;
background:black;
}
In Chrome (Version 22.0.1229.79) or IE9, the background of the span element containing 'English' seems to have a height larger than font-size, yet in Firefox (13.0.1) the height equals font-size. (See the output)
Can anybody explain this?
I thought the height of the content area would have the same value as specified by font-size.
Here's a diagram showing the various reference lines available when rendering text:
As you can see, there are many choices. It seems like Firefox is using a different baseline than Chrome/IE when rendering.