As suggested in documentation, i have tried below properties first.
this.gridOptions.rowHeight = 25;
this.gridOptions.headerHeight= 28;
But it ended up like below:
grid
We have also tried the material css property changes, but didnt see any reflection to the grid.
$ag-mat-grid-size: 4px;
$ag-mat-icon-size: 12px;
Please give us the suggestion here.
Try providing those properties at the grid itself.
<ag-grid-angular
[gridOptions]="myGridOptions"
[rowHeight]="25" //or [rowHeight]="hightParam"
[headerHeight]="28" //or [headerHeight]="headerHeightParam"
>
</ag-grid-angular>
I have checked it and it works.
That's why I find ag-grid kind of strange sometimes. Many of the properties they show under gridOptions under documentation, but they works only when we apply at the grid level itself. Although its performance compensates this behaviour :)
Check this working example plunk link ag-grid material theme example
Related
I have this <v-select multiple persistent-placeholder></v-select> component and I would like to display some custom content if selection is empty, like No entry selected yet.
Is there any chance I can achieve this? I looked at props and slots but none seem to fit my need. I tried the no-data named slot but did not work.
Thanks
Looks like the best approach with the current vuetify version is to use the placeholder as you mention in the comments. Check this codepen I made: https://codepen.io/cmfc31/pen/GROyQMa
I just added some css to make it look like an item
.no-entries input::placeholder {
color: #212121 !important;
}
".ngx-datatable datatable-header{
overflow: visible !important;
}
.ngx-datatable {
overflow: visible !important;
}"
I have two ngx datatables in two different pages,And I set customized filter in one datatable header by an filter icon, Problem is the dropdown of onclick of icon is cutting the dropdown,for that I googled and got to know that its an CSS issue and can be handled. So i written the following in my Angular SCSS file for one component related.
Using this working but impacting on other ngx datatables.
Help or suggest me any one on this.
Aren't they both having separate CSS files? If that is the case, it shouldn't be affecting one another. If they are both having the same CSS file as the style sheet, provide an ID to each table and provide the same id in the CSS as well, so that the specified style gets added only to that Id.
Once you specify the ngx-datatable styles under the respective Id's, it should work.
Let me know if it worked.
How can I make an element sticky using Vuetify? In the new Vuetify documentation the right column is what I'd like to achieve. I couldn't find anything similar in examples.
you can do position fixed
position: fixed; in css
here is my sample pen.
https://codepen.io/anon/pen/wmKYNP
Many components there has the fixed prop.
I'm not sure which component you're trying to use but in the Vuetify docs they're using the v-navigation-drawer with fixed prop:
<v-navigation-drawer fixed>
https://vuetifyjs.com/en/components/navigation-drawers
I have found lots of ways to control a QtComboBox using style sheets, but not directly from code (well, you can use the setStyleSheet method).
I have a requirement to disable all widgets when a page is disabled, and I can accomplish that requirement. The problem is trying to make a QtComboBox look disabled (also a requirement).
Is there a way to change the QtComBox drop-down arrow to another image in code?
I have found that sometimes you have to implement an entire style sheet in Qt whenever you want to change one part of the widget.
Do I have to implement a disabled style sheet in code and use the setStyleSheet method?
And then, do I have to re-implement an enabled style sheet when the page is re-enabled?
It seems there should be something like: myComboBox->setDownArrowImage(url . . .);
Am I missing something?
Thanks.
Use pseudo states.
Stylesheet example:
QComboBox:enabled {color: red;}
QComboBox::down-arrow:enabled {image:url(:/images/downarrow.png);}
QComboBox::disabled {color: white;}
QComboBox::down-arrow:disabled {image:url(:/images/downarrowdisabled.png);}
I wanted to have a feature in my Jommla based application, that when ever a user brings the mouse over a particular paragraph in article the color of text should change. so that the paragraph looks more prominent on the screen.
I want this thing to be dynamic. Just wanted to know which is the best place to do that. Where in the Joomla the article parsing takes place ?. If I am lucky is there any plugin that can help achieve that ? Kindly let me know
You can make a slight modification to Trev's solution and make it work without having to change any articles.
.contentpaneopen p:hover {color:#ff0000;}
By default, Joomla assigns the contentpaneopen class to articles, this would produce the effect on all P tags that are children of that class.
By far the easiest thing to do would be to add a style to paragraph in question in your article and then add an appropriate hover rule in the css, e.g.
<p class="highlight>some text in here</p>
and
p.highlight:hover
{
color: #ff0000;
}
Just tried it here and it worked for me on the last paragraph:
http://thelunarscape.com/blog/an-increasingly-active-sun
Better solution than using a plugin in this case, unless you want to something more fancy I guess as content plugins are run every time an article is loaded no matter if it's needed or not.
Another more advanced way to achieve this is with help of MooTools.
Include MooTools with in your application with:
jimport( 'joomla.html.html.behavior' );
JHtml::_('behavior.framework'); //MooTools core
JHtml::_('behavior.framework', true); //This is for MooTools more libraries
Next create a script that changes the css of the paragraph with id "myid":
$js = <<<EOD
window.addEvent('domready', function(){
$('myid').setStyle( 'border', '1px solid #000000')
});
EOD;
$document =& JFactory::getDocument();
$document->addScriptDeclaration($js);
Why use MooTools?
MooTools makes it possible to tweak the highlightning and even animate the highlight. It should also have better support for the older browsers.