In my Vaadin App I want to change the color of a focused TextField, which is no problem. Additionaly I want to change the color of the caption which belongs to the TextField. How can I achieve this with css?
.v-textfield.textfield-default {
border: none;
border-bottom: 1px solid $non-active-field;
outline: none;
height: 3rem;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
}
.v-textfield.textfield-default:focus {
border-bottom: 1px solid $default;
}
.v-caption-default-caption {
color: purple; //changes the text to purple
top: 0.8rem;
left: 0.75rem;
font-size: 1rem;
cursor: text;
transition: .2s ease-out;
}
.v-caption-default-caption:focus {
color: red; //is never called
}
.v-caption-default-caption:active {
color: blue; //is never called either
}
Note: I'm not a CSS/SCSS guru thus more elegant solutions may exist that I'm unaware of. The only one I could come up is Vaadin-based (also java 8), but corrections and suggestions are more than welcome.
From what I gathered, the problem in this case is that you need to update the previous sibling of the input that gets focused, aka it's caption. I've done a bit of research and so far it does not seem possible with CSS.
Also looking at the DOM (see image below), only the text-field gets foucused, hence none of the styles you've defined for the caption gets applied. Under the circumstances, a quick workaround that you can use, is to add focus & blur listeners to your text-fields, which will add & remove a custom style you're also going to define.
Step 1: The component
public class MyTextFieldsComponent extends VerticalLayout {
public MyTextFieldsComponent() {
// the text-fields
TextField myFirstField = new TextField("My first caption");
TextField mySecondField = new TextField("My second caption");
// when focused, add our custom style
FieldEvents.FocusListener focusListener = event -> event.getComponent().addStyleName("red-caption");
// when blurred, remove the custom style
FieldEvents.BlurListener blurListener = event -> event.getComponent().removeStyleName("red-caption");
// use the above listeners
myFirstField.addFocusListener(focusListener);
mySecondField.addFocusListener(focusListener);
myFirstField.addBlurListener(blurListener);
mySecondField.addBlurListener(blurListener);
// add the text-fields to the UI
addComponent(myFirstField);
addComponent(mySecondField);
}
}
Step 2: The style
.v-caption-red-caption {
color: red;
}
Step 3: The result
Related
I'm new in Angular and I do not even know if this approach is good.
I want to create my own universal button component and define his styles in button.component.css. After i want to use this button in my other component like login form.
I do something like that in button.component.css:
button {
height: 50px;
width: 100px;
border-radius: 8px;
font-family: "Arial Black";
font-size: 18px;
box-shadow: none;
}
.primary-button {
background: #5c52ff;
color: white;
}
.primary-button:hover {
background: white;
border: #5c52ff solid 2px;
color: #5c52ff;
}
.secondary-button {
border: forestgreen solid 2px;
background: white;
color: forestgreen;
}
Now in index.html i do:
<app-button class="primary-button"></app-button>
But scope of button.component.css works only in button.component.html
I should to create this style classes in global style.css and don't create button component but simple use button tag and add class attribute with property from style.css. How to approach this problem.
You should be setting the class to the button present in your button.component.html instead of setting it in the app-button element. You can achieve this by sending your class to the button component as an Input.
index.html
<app-button className="primary-button"></app-button>
button.component.ts
import { Component, Input } from '#angular/core';
....
#Input() className: string;
button.component.html
<button [class]="className"></button>
This way your class will be applied within the scope of button.component.css.
I was wondering whether there is a way to customize the built-in tooltip and the header tooltip using CSS? Is there a class name that can be referenced?
Yes, there is a class called ag-tooltip in ag-grid.css
I'm able to customized the default headerTooltip, something like below:
.ag-tooltip{
background-color: #0f1014;
color: #999eab;
border-radius: 2px;
padding: 5px;
border-width: 1px;
border-style: solid;
border-color: #545454;
}
In case you want to customize tooltip using a 3rd party library, you can make use of cell renderer component.
Here is an example using angular cell renderer component and ngx-bootstrap.
#Component({
selector: 'tooltip-cell',
template: `<span tooltip="Custom text" container="body">{{params.value}}</span>`,
})
export class ToolTipRenderer implements ICellRendererAngularComp {
public params: any;
agInit(params: any): void {
this.params = params;
}
refresh(): boolean {
return false;
}
}
Once created, you can register the custom cell renderer component using frameworkComponents gridOption. You can more details in the official doc here
and more details on Cell Renderer Components
I used "Balham" theme in my code and I had to override the default tooltip CSS.
I made a file with the custom CSS.
.ag-theme-balham .ag-tooltip {
background-color: black;
color: white;
border-radius: 2px;
padding: 10px 16px;
border-width: 1px;
border-style: solid;
border-color: #cbd0d3;
transition: opacity 1s;
}
Finally, I imported the CSS file where I had implemented the Ag-Grid.
import "./customTooltipStyle.css";
This worked for me.
i am trying to change the color of radiobutton on selected and deselected as
QtStylesheet :Qt Stylesheet
but In this link it only refer to Loading a Image but how could I change it color and without loading Image and change border color or styling radiobutton
the requirement is attached in the Image :
Read documentation carefully. It describes all you need. It even almost described your case, the only difference is images instead of colours.
Style sheet for your case is like this:
QRadioButton {
background-color: gray;
color: white;
}
QRadioButton::indicator {
width: 10px;
height: 10px;
border-radius: 7px;
}
QRadioButton::indicator:checked {
background-color: red;
border: 2px solid white;
}
QRadioButton::indicator:unchecked {
background-color: black;
border: 2px solid white;
}
Setting style sheet to next works for me:
QRadioButton:checked{
background-color: red;
}
QRadioButton:unchecked{
background-color: black;
}
Setting style sheet to QRadioButton::indicator:checked doesn't work, because this only changes the settings of the indicator.
If you want to change the background color of your radiobutton when he's selected you should use both slots and stylesheet.
I will name your button MyButton.
In your .h you will find :
private :
QRadioButton MyButton;
private slots:
void changeColorMyButton();
and in your .cpp add in the setup of your Mainwindow :
QObject::connect(MyButton,SIGNAL(clicked(bool)),this,SLOT(changeColorMyButton));
Your button is now connected to the signal clicked and when you will click on your button, the slot changeColorMyButton will be executed. You can now customize your slot.
void Mainwindow::changeColorMyButton()
{
if(this.MyButton.isChecked())
{
this.MyButton->setStyleSheet("background-color: black");
}
else
{
this.MyButton->setStyleSheet("background-color: yellow");
}
}
I am using vis.js to display some items on a timeline.
Some items have a clear start and end date which allows me to simply use the vis.js timeline features.
By default a div box is drawn which I can overwrite with my custom CSS.
This is a running example how this looks like with some ugly custom styling:
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-16', end: '2014-04-19'},
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
body {
font-family: purisa, 'comic sans', cursive;
}
.vis-timeline {
border: 2px solid purple;
font-family: purisa, 'comic sans', cursive;
font-size: 12pt;
background: #ffecea;
}
.vis-item {
border-color: #F991A3;
background-color: pink;
font-size: 15pt;
color: purple;
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: green;
background-color: lightgreen;
}
.vis-time-axis .vis-text {
color: purple;
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: pink;
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #F991A3;
}
<link href="http://visjs.org/dist/vis.css" rel="stylesheet"/>
<script src="http://visjs.org/dist/vis.js"></script>
<div id="visualization"></div>
</body>
</html>
This is basically creating a blue box with a solid border. So far so good.
In my case I have some items which don't have a defined start and/or end date, so there might be open ends (from ever to ever).
To be honest I am struggling with both the 'conceptual' and the 'technical' solution how to display that within the timeline.
Currently I am just setting some very early/late date for open starts/ends but ideally it would be somehow visible to the user.
First idea that I had was to draw some infinite icon in the background of my item's div at the left for open start and/or at the right for open end.
Another idea would be to somehow fade out the endings of my div (some color grading from blue to alpha and get rid of the solid borders left and right).
Does anyone have a better idea (I guess so) and how would I have to overwrite the given CSS to reach that goal?
Yet I hope the question is clear and precise enough, if not please give me some chance to explain it into more detail.
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.