{{expression}}
Let us assume the output it will give is
"ABC-DEF,HIJ-KLM"
Now I wanted to have values after and before "-" to have different colors.
Since it is coming from an expression I don't know how to proceed. I tried building pipes for formatting but it did not work.I am not allowed to split JSON
and populate and style the divs separately.
You can't set css on expression because it is not an html element. If you want to split at '-' and set different color to each part you need to put the parts in two elements (like span or div) and set css on the elements.
Related
I have HTML that contains text with accent marks (U+0301 - a combining character) to denote stress. I'd like to be able to show and hide the accents with a checkbox. Some of the HTML is dynamically generated.
Is there a way to do this with CSS only? (no JavaScript and no enclosing all occurrences of U+0301 in tags)
One idea I tried was to use a custom font that renders U+0301 as an empty glyph - it does hide U+0301 in isolation, but fails to hide it when it's combined with another character.
I want to start using css grid. With grid, there is no <tr> element. All top level children of a grid container become cells. The layout engine breaks them into lines based on their attributes, and the number of columns in the grid-template-columns rule. And there's the rub: without a <tr>, where do I put my v-for? Each iteration of v-for needs to generate n elements. I need a magic disappearing element that leaves no trace in the rendered output (no trace of itself, but renders all it's children). Does this exist? How do people deal with this?
Ok found it. Here's a little record if anyone follows me here.
Put the v-for on a template element.
in a GWT project I have a CSS with
.my_datagrid tr {
height: 26px;
}
and in my client code i do
grid.getElement().setClassName("my_datagrid");
that modify the minimum hight (i know isn't final) of datagrid rows, i would need for some reason to set this property (the TR height value) code way or at least read it...but the tr part make it over my understanding,
i tried with
grid.getElement().getPropertyString("tr height")
or
with
dataGrid.getElement().getStyle().getProperty("tr height")
but doesn't work..I understand that i'm working on the data grid element and not on the row but i need to know (or set) the minimal height BEFORE any row is added.
So..anyone knows how to read from css that value or remove it from css and set directly code way on my data grid?
If you need to tweak the CSS itself, then you have to use the CSSOM to manipulate the stylesheet (independently of where it's applied through matching).
GWT doesn't provide a CSSOM API, so you'll have to use JSNI. Also, beware of cross-browser support.
With a DataGrid widget, you'd better use a custom CellTableBuilder where you can inject inline style="" attributes on each generated row and/or cell.
To set a row height on all rows, you do:
myDataGrid.addStyleName("my_datagrid");
There is no way to set a height of all rows to a specific number other than by using a CSS class, but you can set height of a single row:
myDataGrid.getRowElement(index).getStyle().setHeight(26, Unit.PX);
If you need a height of a row, you can do:
int h = myDataGrid.getRowElement(index).getOffsetHeight();
Note that the actual height of a row may be different from the "style" setting, because text can wrap to have more than one line (unless you prevent it).
I working on a project in MVC 4 where I am leveraging WebGrid to display various data elements for my models.
Currently, one of my models has a text property that accommodates a large amount of text. Yet when it is displayed via WebGrid, the text fails to wrap and extends the length of the grid. Needless to say, this looks very ugly and makes the text difficult to read.
Is there a way to either:
a) Wrap text of a specific column in WebGrid
b) Style the grid or column using CSS somehow to achieve the same effect.
I have done much research on this topic, but have not come up with much of anything that directly applies to this simple scenario.
The most useful link I found is this one, but it is somewhat old and does not directly address my needs.
I can't imagine why text wrapping was not included in the basic implementation of WebGrid, but it does not appear to be part of its integral functionality.
Anybody have any ideas?
You use CSS to manage this kind of thing. The WebGrid renders an HTML table so you can declare styles for tables and they will be adopted when the grid renders.
There are also some CSS hooks built in to the WebGrid. You can specify the CSS class that the individual table uses through the tableStyle parameter:
grid.GetHtml(tableStyle: "myStyle")
Or you can apply styles at column level:
grid.GetHtml(
columns: grid.Columns(
grid.Column(("ID"),
grid.Column("MyText", style: "wordwrap")
)
)
I've written about the WebGrid in detail here: http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid
To get words to wrap using CSS, you need a combination of table-layout: fixed on the table and word-wrap:break-word on the table cell. See here for example: How to force table cell <td> content to wrap?
If I want to link to a place within the same* page. I've seen that should do like this:
Link Text Here
But what if I have several divs with the same id? Is there way to distinguish other than using the id of the div?
I generate the xhtml code from Java and to match the generic css file (that will not be generated) I use "generic" divs for some cases. Of course I could generate a dummy div with no style attributes but with a unique id and wrap that one around the area of interest. I'm however curious if it could be done in a better way?
The id attribute is optional. However according to w3schools if an element has an id attribute then the id value must be unique. Source: http://www.w3schools.com/tags/att_global_id.asp.
ID Naming rules:
Must contain at least one character
Must not contain any space characters In HTML
all values are case-insensitive
And from what I have learned from experience and html validation it must not start with a number but nobody told me that...