I want to use the color of the text text filed to display its current state, but v-text-field shows the color only if it is focused on.
Is there a way to show it permanently?
thanks in Advance.
I want it like this:
but it's like this:
I have tried using css, but it seems i can only change the label and input slot:
.edited >>> .v-text-field__slot input {
color: orange;
}
The line below is represented through a pseudo element on v-input__slot. You can target it with the :before selector.
.edited >>> .v-input__slot:before {
border-color: orange;
}
Related
I'm using Vuetify trying to approach this textfield style. I'm using outlined textfield provided them with a simple custom style, but I can't change its label position. Is there any way I could change the label position and the "interval" where the line starts and ends?
I was trying searching in their documentation and found this session, but no luck while changing $text-field-outlined-label-position-x or $text-field-outlined-label-position-y.
edit: this is the best I could reach, which is actually the default outlined textfield with rounded borders.
Thanks in advance!
I figured it out by myself.
We can change the margins on the Vuetify classes of v-text-field to change its position. Just change it by your own margin and everything works!
.v-text-field__slot {
margin-left: 20px;
}
.v-input__slot > fieldset > legend {
margin-left: 20px;
}
I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.
I need to focus all the form user inputs onCreate(), so to make clear to the user that he can edit the fields if he needs to.
The closer thing I found is something like:
<input ref="email" />
const input = this.$refs.email
methods: {
focusInput() {
this.$refs.email.focus();
}
That should work, but I was looking for a better way to do it, without applying the ref attribute to every single input.
Is there a way to wrap them all at once?
I tried attaching the ref to the form <b-form ref="focusInputs">, then, in the method, access the inputs through it
focusInputs() {
this.$refs.focusInputs.input.focus();
}
and call it in created:
created(){
this.focusInputs()
}
But in the console I got:
Error in created hook: "TypeError: Cannot read property 'input' of undefined"
I think that's because I am using bootstrap-vue, so the input tags are <b-form> and <b-form-input> (instead of just <form> and <input>). CSS and Javascript, as far as I know, are not able to access these tags as the can with form or input.
So, do you think is there still a way to wrap them all, or do I need to mark them singularly (either with a class or with ref).
Anyone know?
Thank you,
x
You can create a css class that will apply the bootstrap textbox highlight color to any textboxes you want. The below CSS should do the trick. You can find this CSS in the bootstrap files, I just changed the name and removed the focus requirement.
You cannot however actually "Focus" multiple fields since focus is where the input cursor is set. You can only auto focus one field at a time.
.fillable{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
Is it possible to set a color based on the lightness/darkness of a less variable?
Currently I have the following code:
li {
color: darken(#bodyBackground, 10%);
}
This works providing #bodyBackground is a light color. However if it was a dark color I'd like to use lighten(#bodyBackground, 10%). Is this possible with LESS?
There's contrast function, e.g.:
li {
color: contrast(#bodyBackground,
lighten(#bodyBackground, 13%),
darken(#bodyBackground, 13%));
}
You can be much smarter than this. You can make a mixin to check the provided color, and perform either a darken or lighten depending on its color:
.smart-text-color (#a) when (lightness(#a) >= 50%) {
// Its a light color return a dark output
color: darken(#a, 60%);
}
.smart-text-color (#a) when (lightness(#a) < 50%) {
// Its a dark color return a dark output
color: lighten(#a, 60%);
}
Here is an example mixin, that takes the background color as the variable, and works out what text color to use. Returning either a light or dark output.
http://codepen.io/TristanBrotherton/pen/GwIgx?editors=110
Is it possible to set a color based on the lightness/darkness of a less variable?
Currently I have the following code:
li {
color: darken(#bodyBackground, 10%);
}
This works providing #bodyBackground is a light color. However if it was a dark color I'd like to use lighten(#bodyBackground, 10%). Is this possible with LESS?
There's contrast function, e.g.:
li {
color: contrast(#bodyBackground,
lighten(#bodyBackground, 13%),
darken(#bodyBackground, 13%));
}
You can be much smarter than this. You can make a mixin to check the provided color, and perform either a darken or lighten depending on its color:
.smart-text-color (#a) when (lightness(#a) >= 50%) {
// Its a light color return a dark output
color: darken(#a, 60%);
}
.smart-text-color (#a) when (lightness(#a) < 50%) {
// Its a dark color return a dark output
color: lighten(#a, 60%);
}
Here is an example mixin, that takes the background color as the variable, and works out what text color to use. Returning either a light or dark output.
http://codepen.io/TristanBrotherton/pen/GwIgx?editors=110