Using DataTables with checkboxes as described here in the documentation. Given that it's not a "real" checkbox (per the doc) is it possible to check the box but not "repaint" the row?
In my app by default all rows are checked; less readable when styled as selections.
If I understand you, you only want remove selection style, no?
Use css for add style to tr selected and td child of datatables, something like this:
table.dataTable tbody > tr.selected, table.dataTable tbody > tr.selected > td {
background-color: transparent !important;
}
Related
In my vue.js application, I have a requirement where I want to hide the column headers in the ag-grid but want to display the rows.
I used below property to hide the column headers.
headerHeight: 0
with this I can able to hide the column headers but still the line separator between header and first row is visible. How can I add hide the separator line as well ?
You can achieve it by tweaking the ag-header style along with the headerHeight.
In ag-grid template :
:headerHeight="0"
In CSS side :
.ag-header {
border-bottom: 0px !important
}
Working Plunker : Hide ag-grid column header
Another way of doing it without using headerHeight and css is to only use display: none; in the css. however, if you have multiple ag-grids in your application you should define a unique ID to the ag-grid so the other grids dont get overwritten by your css.
//customcss.css
#uniqueAGGridID .ag-root .ag-header {
display: none;
}
//file where grid is.
<ag-grid-vue
id="uniqueAGGridID"
class="ag-theme-balham h-100"
:grid-options="gridOptions"
:column-defs="columnDefs"
/>
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.
See this image here of my custom Lightbox component.
One should be able to simply exit the component and go back to the page by clicking on anywhere outside the image or the v-sheet component on the right (which by the way, is supposed to be touching the image, but I can't figure out how to move it without using margin).
Unfortunately, the red boxes exist - they are areas where clicking should close the dialog, but don't. This is because the entire Dialog component is the green box - it believes even those red boxed areas are part of the component.
I've been attempting to use #click and v-click-outside directives where possible to try and exclude the image and the sheet component can be clicked but everything else closes the dialog, but unfortunately I only get strange behaviors that donn't help at all.
Also, I found out using margin: auto will create another unclickable area, so I need to find out another way to move it over.
Source Code
Problem 1:
"is supposed to be touching the image, but I can't figure out how to move it without using margin"
Instead of lg="10" on the first col, you can use lg="auto" so it will shrink to fit its contents.
justify="center"
class="fill-height"
>
<v-col
- lg="10"
+ lg="auto"
md="12"
offset-lg="0"
class="fill-height text-right"
>
Problem 2:
"areas where clicking should close the dialog, but don't"
You can use pointer-events: none on the dialog body to disable click event capturing, then pointer-events: auto on specific elements to selectively enable it.
<v-col
lg="2"
md="4"
align-self="top"
- #click="dialog = false"
>
<v-sheet
class="rounded-tr-lg text-left"
...
- <style lang="scss">
- .v-dialog {
+ <style lang="scss" scoped>
+ ::v-deep .v-dialog {
margin: 0;
padding-left: 24px;
padding-right: 24px;
box-shadow: none !important;
+ pointer-events: none;
+ }
+ .v-image,
+ .v-btn,
+ .v-sheet {
+ pointer-events: auto;
}
</style>
Option 1: Use flexbox and #click function to close whatever
Basically, if you get your css to do a similar layout, but fill those red boxes with a background: blue you in turn can put an #click on that same div, which will close whatever you need.
Option 2: Use Modals
I would use a parent component that communicates to an "image component" and "image details component" (such that the two components are siblings.
Moreover, I would personally use v--modal for both of these sibling components, and have the closed event tied to a single instance of closing both modals by names
The shiftX and shiftY should be enough for placement.
https://www.npmjs.com/package/vue-js-modal
I want to create this type of animation in textbox in materialize css. Checked many codepen an websites but can't find anything which helps with materialize css. Sometime two border display or sometime no effect.
Anyone provide some sourcecode of css so i can implement it. I don't want to include other css library. Only with materialize css and little bit css.
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
I think customizing this after or before presudo will work.
Created Pen Here :
https://codepen.io/naitik_kundalia/pen/bRNeaz
I had created sliding border but it also work in reverse. Textbox removed on focus after animation end.
Check this Pen:
$(".mat-input").focus(function(){
$(this).parent().addClass("is-active is-completed");
});
$(".mat-input").focusout(function(){
if($(this).val() === "")
$(this).parent().removeClass("is-completed");
$(this).parent().removeClass("is-active");
});
https://codepen.io/legeoffrey/pen/VYMLNq
Hope this will help you
I am trying to create a grid panel, that should highlight the grid in red, (as it happens when the validations fail on other components,) when the grid is empty. Is there a simple solution for this?
On the most basic level you can add this css:
.grid-highlight {
border: 1px solid red !important;
}
And upon load (or datachanged) events check if the store is empty and then do either:
iGrid.addCls( '.grid-highlight' );
iGrid.removeCls( '.grid-highlight' );