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"
/>
Related
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 want to change carousel-item.active display property block to flex.I change it in css but when I change slider it first gives display:block than make my cude run.display:flex,I want that bootstrap doesn't give display:block than display:flex.Give only display:flex
Set your CSS like this:
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex;
}
The carousel-item-next and carousel-item-prev classes are temporarily assigned to your slides during the transitions, so you have to make sure they have the same display property as the active slide.
If this isn't working, what version of Bootstrap are you using? I have tested it in a JSFiddle.
Here is the fiddle. I've put a Select box as sample. It seems that it can't be shown inside modal. How can be it solved?
...................................................Update.....................................
To solve this, I've added this CSS:
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
}
Now, the Select-Option are showing, but it seems that the dropdown taking the real space which increasing the height of popup. But, I expect dropdown will cross the popup window if the height of dropdown is much. How can I make it?
Updated Fiddle
See the updated jsFiddle: http://jsfiddle.net/mijopabe/gj9axc18/5/ You need to add this to your CSS:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
I also took the liberty of including the plugins corresponding CSS file from a CDN:
//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css
I have a class using display: -ms-grid, for arguments sake, let's say it's defined as below:
.gridDiv {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 200px 400px 200px;
}
Is there a way to hide one of my columns via either css or js at runtime? I've hidden the elements within, but I'd like to crush down the .gridDiv, so that it only appears to have two columns.
Any thoughts appreciated.
this can be done in your .js file. need to ensure that elements are laid out again if required after this.
var gridDiv = this.element.querySelector('.gridDiv');
var columns = '200px 200px';
// TODO - code to compute columns
gridDiv.style.msGridColumns = columns;
i would like to ask how can i split my blogger header into two columns? Can you help me please? I'm having a hard time figuring out...
btw, i just need to add my logo at the left then google adsense on the right.
Thanks!
first you need to configure your blogger header max widgets. Check it if its more than 2. if not change it to (let's say) 4 and add the following css attributes under the #header & #header2:
float:left;
width:50%;
You'll be able to add new gadgets which is aligned horizontally. then add google adsense on the right and your logo at the left. Save your template and view!
Login to Blogger.com
Click on the "Template" section.
Click on "Jump to Widget"
Click on "Header1"
Under the code it jumps to, ie:
<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Bog Tittle (Header)' type='Header'>
</b:widget>
</b:section>
Insert this code:
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
Now search for and find: "/b:skin"
ABOVE "/b:skin" insert this code:
#header {
float:left;
width:50%;
}
#header2 {
float:right;
width:30%;
}
You can adjust the percentages based on what you desire.
On the layout page, after you save the template AND REFRESH, you should see an "Add a Gadget" area to the right of your logo, where you can insert your adsense widget.
If things don't look right on the Layout page, place these codes below the other ones:
#layout #header, #layout #header2 {
padding: 0px !important;
margin: 0px !important;
width: 50% !important;
}
Remember to save your template and also remember to click REFRESH after you save your template.