I need to change the color of the highlighting of possible drop targets in a Vaadin 14 Grid. To illustrate, I am using the drop mode "between", which results in a purple line:
How do I change the color of that purple line?
Vaadin Tutorials are not easy to understand and suggest using a CSS selector ending with -drag-center (Vaadin 8) or using .v-drag-over-target.card selector. But this does not seem to work, maybe I need to replace "v" in the second suggestion with something else?
Due to the purple color I'm assuming that you are using the Material theme. I'll also assume that you have a custom theme set up, as is described here. If not, that page explains how to set up a custom theme.
To customize the color of the grid row drag indicator:
In your project folder, create a file frontend/themes/<your-custom-theme-name>/components/vaadin-grid.css
Add the following contents to the CSS file:
[part~='row'][dragover] [part~='cell']::after {
background: green; /* replace with the color you want */
}
Related
I am using a Custom Title bar (TTitleBar) primarily to place the Main Menu and a couple of drop downs onto the title bar. This works without applying styles to my app but not when I apply Styles.
How can I discover the colors defines in a custom style so I can apply them to my CustomTitleBar.
I'm using Delphi 11.1
TStyleManager.ActiveStyle.GetSystemColor(clActiveCaption) does the trick.
I'm to add an angular material spinner, but can't even have the basic one works on Stackblitz. I've added everything the way the documentation suggest, but I'm still getting nowhere.
Thanks for helping
You were missing to define a theme in styles.css. https://stackblitz.com/edit/angular-pbet9b?file=src/styles.css
Or you can also define the stroke color in styles.css:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: red;
}
I would suggest to pre-define a theme and then override in styles.css so in case you forget to define maybe a color at least the default color appears.
I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in the css. My radio buttons are named Can meet, not sure and Decline. I want my Decline radio button to have a different color than the two others when it is selected (the color red).
I'm using Jquery mobile and have customized the css for which colors I want to have on the different themes and I have changed the .ui-btn-active to .ui-btn-active-a and .ui-btn-active-b and made them with different values. I have tried to switch between the two ui-btn-active classes without no luck, and I have tried the addClass(..) and removeClass(..) without luck. I made a method in my jquery-mobile.js which look like this:
$.mobile.changeAction = function( activeBtn){
$.mobile.activeBtnClass = activeBtn;
}
where my activeBtn parameter will be a string to choose which activeBtnClass I want to have. I think the problem is that I have problems refreshing the activeBtnClass after overriding it, I have tried some refreshing methodes without no luck.
As long as the radio buttons have different colors when active I will be very thankful.
Following styles should do the trick:
.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
background-color:red;
}
Sample jsfiddle.
To style Horizontally stacked select options:
.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
background-color:red;
}
Sample jsfiddle.
Why not just create custom themes for all of the states that you might want? You can have multiple custom themes, and only use them when you'd like. I have 7 themes in my CSS, and this way you can always incorporate them later if you'd like without having to do so much custom coding.
You can just apply the theme with the data-theme="f" (or other letter swatch) element attribute.
Here's jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php. If you're just making small changes to the theme, such as an active state, just copy the theme, and make the changes and save as a new swatch. You can go from A-Z :)
I would like to programmatically set a border around a Form component in Java. How can I do this without having to edit the css style sheet?
You could wrap the form with a Panel component, which has a border defined already. Otherwise, not much alternatives than just using CSS.
One option, if you wish to stay inside the server environment, is to use the CSSInject add-on and add the border using that (you still need to write CSS, but you can do it on the server in a Java file and not inside a regular CSS file).
Vaadin Flow — Style::set to specify CSS
In Vaadin Flow (Vaadin versions 10 and later), you can conveniently set CSS for a widget or layout programmatically. No need to edit separate CSS files, even though styling with CSS files is the recommended way.
On your widget/layout, call getStyle to retrieve the Style object.
On that Style object, call set to pass the name and value of your CSS property.
For example, I find setting a bright colored border on my nested layouts quite helpful for debugging.
myVerticalLayout.getStyle().set( "border" , "6px dotted DarkOrange" ) ;
You can see this in action with this screenshot on my Answer to another Vaadin question here:
I'm using jquery-ui for buttons. The default theme looks great, but I'd like to apply a different background color to a few specific buttons. Is there a way I can easily add another css class to my buttons to just change the bg color of them, without changing any other properties of the button?
Thanks
Just add it to the button's HTML and when the button is created it will get all of the existing classes.