I have a CellTable with Columns. One of the column I align the text to the right programatically:
column.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
Further I want the cell to have a padding on the right. By cannot get it to work. This is what I tried:
column.setCellStyleNames("numberCell");
.numberCell {
padding-right: 5px !important;
margin-right: 5px !important;
color: red !important;
}
The text in the cell is rendered in red, but there is no padding.
As you applied style it should work. but let You try apply particular column style using getCellStyleNames. it may work.
Column<Data,String> noColumn=new Column<Data, String>(new TextCell()) {
#Override
public String getCellStyleNames(Context context, Data object) {
return "numberCell";
}
#Override
public String getValue(Data object) {
return "";
}
};
Related
I have a <mat-tree> component where styling for dependant <mat-tree-node>'s introduces a special background color for mouse hovering:
mat-tree-node {
// ...
&:hover {
background: $hoverColor;
}
}
In the tree, some elements may be selected by the user. In order to highlight them visually, a special class is applied to <mat-tree-node> as [class.highlight]="isHighlighted(node)" and the class is defined as follows:
highlight {
background-color: $selectColor;
}
My problem arises when a node is selected and hovered at the same time. I want the selectedColor to take priority but the node gets hoverColor background when hovered. I changed the definition to this:
mat-tree-node.highlight {
background-color: $selectColor;
&:hover {
background-color: $selectColor;
}
}
Google Chrome developer console started to show the class higher in the stack as now it has +1 point of selectivity, but when hovering, the hoverColor is still being applied to the background, and even !important does not help.
Why does not it obey the new definition and how to fix it?
Try this:
mat-tree-node.highlight {
background-color: $selectColor;
}
may-tree-node:not(.highlight):hover {
background-color: $hoverColor;
}
I'm working with jvectormap to organize images that were collected across the globe.
When a user hovers over a marker, an image with a description appears above the marker. Instead of this image completely obscuring the map, I'd like the tip affixed to the left of the map, so nothing is obscured.
I've tried changing the position value for .jvectormap-tip. I can't quite figure out how to fix the tip to the left (its default behavior to to hover directly over the marker).
.jvectormap-tip {
position: absolute;
display: none;
border: solid 1px #CDCDCD;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
I expect the position attribute needs to be changed, along with something else. Not sure what tho..
I would suggest You to create your own custom positioned div and the use the provided functions to show/hide it. Use the on*TipShow hooks (invoked before) to prevent the default tip to be shown.
function showInfo(code) {
/* Show custom div */
}
function hideInfo() {
/* Hide custom div */
}
$("#map").vectorMap({
map: "world_mill",
// other settings...
onMarkerTipShow: function(e, tip, code) {
return false; /* Don't show the standard marker tip */
},
onMarkerOver: function(e, code) {
showInfo(code);
},
onMarkerOut: function(e, code) {
hideInfo();
},
onRegionTipShow: function(e, tip, code) {
return false; /* Don't show the standard region tip */
},
onRegionOver: function(e, code) {
showInfo(code);
},
onRegionOut: function(e, code) {
hideInfo();
}
});
I'm trying to hide all elements except those within a "print" div. I'm not sure my syntax is correct:
#media print {
body *:not(#printable *) { display: none; }
}
So you want to print just printable right? If this so the solution is this:
#media print {
*
{
display: none !important;
}
.printable
{
display: block !important;
}
}
You hide all elements but not elements with printable class
I came across this strange phenomena while toying on codepen.
I set my various font sizes as vw values, but it created some strange behavior:
The font size will only display correctly while my elements are on hovered state, and will render as 0px if they are not.
Here's my SCSS :
$title:2vw;
$subtitle:1.5vw;
$text:1vw;
and
p {
color:$red;
font-size:$text;
}
h1 {
color:$black;
font-size:$title;
}
h2 {
color: lighten($black, 20%);
font-size:$subtitle;
}
Those elements have no set class in my html, except being children of divs which are styled as such:
#mixin div {
border:$border;
border-radius:$border-radius;
background-color:$green;
color:$black;
padding:$padding;
margin:$margin;
&:hover {
background-color:$black;
color:$green;
h1 {
color:$green;
}
p {
color:$green;
}
}
}
And here is the link to the pen page: http://codepen.io/rlacorne/pen/tgrbn
Anyone knows what's happening? It's bugging me.
Thanks in advance!
So I am providing the resources for my celllist via the constructor. Everything seems to work, I have provided my own style sheet:
.cellListWidget {
color: #021650;
background-color: #021650;
}
.cellListEvenItem {
cursor: pointer;
zoom: 1;
background: red;
}
.cellListOddItem {
cursor: pointer;
zoom: 1;
background: blue;
}
.cellListKeyboardSelectedItem {
background: #ffc;
}
.cellListSelectedItem {
background-color: green;
color: white;
height: auto;
overflow: visible;
}
I must not understand it quite right because the background color I tried to set for the widget does not seem to take any effect. The rest of the styles work though, even item, odd item, selected item, etc.
Just to clarify, I want to change the color of the whole column this list is on, it items in the list are obviously styled, but the list takes up more vertical space than there are items, so where there are no items, is just a grey color which I want to change.
The solution I found was to not style the cell list, but the flowpanel that the cell list was on.