I'm using Grid (multiselect mode) in Vaadin for data representation and i've got a question:
How to remove select/deselect checkbox in header?
Screenshot
In order to avoid mouse clicks on the cell to toggle the checkboxes you can use the CSS property pointer-events.
I've added the style hide-checkbox to my grid and then used the following css to hide the checkbox and prevent click events (Vaadin 7):
.v-grid-hide-checkbox th .v-grid-select-all-checkbox {
display: none;
}
.v-grid-hide-checkbox th:first-child {
pointer-events: none;
}
You could use css to hide it, something like
.v-grid-select-all-checkbox {
display: none;
}
should work.
If course the checkbox is still there so by using browser's developer tools it's possible to make it visible.
Related
Picker has two components :
The Initial/Selected value displayed in Codenameone UI.
The Native picker dialogs/sheets.
It makes sense that we can not control the theme/color/style of Native Pickers as they are influenced by an OS-specific theme selected by the user.
But how do we change the color of text inside the picker in Codenameone Interface?
What I want to do in the following screenshot is to make the texts "3/20/20, 00:00, & 0-5 persons" white.
What I tried :
Channing the "Label" font-family in CSS changed the font so I tried changing the "color" from CSS but it didn't help.
I tried changing the foreground color like this : timePicker.style.fgColor = 0xfffff
In CSS I defined a style.
DropdownStyle{
background-color: #333333;
color: #FFFFFF;
}
Then I set the style to picker
datePicker.uiid ="DropdownStyle"
But none of the above ways worked as expected.
What is the right way to do it? I believe I am missing a very simple thing but I couldn't find it myself.
AS #shai-almog suggested, after digging through Component Inspector, I found out that
A PickerComponent has the ID "TextComponent" so if we replace the UIID of PickerComponent it's going to change the style of just the Holder Component that's why I was able to change the background-color only but not the text.
Inside it, there is Picker which Represents the Text and has the id TextComponentField.
So I had to Style them individually like this :
TextComponent{
background-color: rgba(0, 0, 0, 0.0);
}
TextComponentField{
color: white;
}
Output :
I have the following code, which displays the images in my table with no border, then an orange border when hovered over:
table.test {
}
.test img {
border: solid 4px transparent;
}
.test img:hover {
border-color: orange;
}
If it try the following, i expect the border to stay orange after click, but it does not
.test img:active {
border-color: orange;
}
The images being used are thumbnail size instead of checkboxes.
Any ideas how I can keep the border orange after click?
Images cannot use active. http://www.whatwg.org/specs/web-apps/current-work/multipage/selectors.html#selector-active.Wrap it within an anchor and prevent default on the anchor click and change the cursor maybe?
check this fiddle might help you using simple jquery let you give your output
$('.test img').on('click', function(){
//use jquery css function
$(this).css({"border-color":"orange"});
// or add class .active with your own style
$(this).addClass('active');
})
make your image as block element and add this jquery click event. solved
You can create a class called orangeborder (or anything, really). Give it the attributes of border-color:orange;.
Then you can use jQuery and use:
$('img').click(function(){
$(this).toggleClass('orangeborder');
});
jsFiddle
How to hide portlet icon and title but keep edit controls in Liferay?
Most combinations of these styles didn't help:
.portlet-borderless-bar {
display:none;
}
.portlet-topper {
display: none
}
.portlet-title {
display: none;
}
they are either remove everything or keep everything.
Using Liferay 6.2,
Just click the settings icon on the left and select look and feel from the drop down. Then under Portlet Configuration, select No for Show Borders.
Try this:
.portlet-title-text, .portlet-title .icon {
display: none;
}
.portlet-title {
height: 15px;
}
I have added a clickhandler to a label which works fine. But when I mouseover the label a cursor instead of the mousearrow is shown (the clickhandler still works fine). Is it possible to set something so the mousearrow remains?
If you have a label like
<g:Label addStyleNames="{style.mytext}">MyText</g:Label>
Just add the following to its style
.mytext {
cursor: default;
}
Or cursor: pointer, cursor: help, ...
Alternative
Or turn the <g:Label> into a <g:Anchor href="..." addStyleNames="{style.myanchor}">. To avoid the default underline, you may want to add a style
.myanchor {
text-decoration: none;
}
How to change single element of the widget style in GWT. I would like to create new version of TextBox style, so that only the border color changed to red, for example.How to get to the style responsible for the TextBox?
I tried to create new style
.gwt-TextBox.invalid {
border-color: red;
}
but it does not work.
Make sure you add class invalid to your TextBox:
textBox.addStyleName("invalid");
Use CssResource to associate your CSS file with GWT: http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles