I am using FluentUI drop-down control and can't find a way to customize the on-hover styles. I want to change the on-hover color to blue from grey. I tried following but it didn't seem to work.
Any help would be highly appreciated.
const dropdownStyles: Partial<IDropdownStyles> = {
dropdownItems: {
selectors: {
'& .dropdownItem-168:hover': {
backgroundColor: '#0067B8',
color: 'white',
},
},
};
.dropdownItem-168 is the class for drop-down items.
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
You don't address the generated css class names (e.g. dropdownItem-168) directly in your IStyle configuration objects. Rather, you target them based upon the IDropdownStyle property that isolates the styles used in different "entry points" of the component. Based on the docs, it looks like "dropdownItems" (plural) is the entry point for styling the container for all drop down items, not the styling entry point for the items within the container individually. try something like:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdownItem: { // note: singular "dropdownItem"
selectors: {
":hover" : {
backgroundColor: "#0067B8",
color: "white",
}
}
}
};
Related
I have stumbled upon some difficulties styling ion-datetime component using ionic 6, and none of the posts seem to contain a solution for this. I would like to apply some custom styles to picker items that appear in the shadow-root part.
Applying CSS to classes like .picker-item and .picker-item-active doesn't do anything because they are in the shadow-root. And there don't seem to be any styling properties and variables for ion-picker that I could use.
I am using the standard ion-datetime component like this:
<ion-datetime presentation="time"></ion-datetime>
and in the simulator while inspecting the HTML it appears as:
Styling that I would like to change:
Color and font properties for picker items
Color, background and font properties for active picker item
Since they are all open shadowRoots, you can get in and inject a <style> sheet:
document.querySelector("ion-datetime")
.shadowRoot.querySelector("ion-picker-internal")
.shadowRoot.querySelector("ion-picker-column-internal")
.shadowRoot.prepend( Object.assign( document.createElement("style") , {
innerText : `
.picker-item {
background:hotpink
}
`
}));
After some more playing around, I have been able to find a solution and customize it to my project needs. Thanks to Danny '365CSI' Engelman for inspiration.
The use of ion-datetime and its customization in my project is complex due to using multiple ion-datetime elements appearing and disappearing dynamically. Therefore, applying custom styling of it required some additional logic not posted here. Please reach out if you need some help regarding this.
Here is the base logic that allowed me to apply some styles to ion-datetime:
document.querySelectorAll("ion-datetime").forEach(dt => {
var el = dt.shadowRoot.querySelector("ion-picker-internal");
el.shadowRoot.prepend(Object.assign(document.createElement("style"), {
innerText: `
.picker-highlight {
background: red !important;
}
`
}));
el.querySelectorAll("ion-picker-column-internal").forEach(col => {
col.shadowRoot.prepend(Object.assign(document.createElement("style"), {
innerText: `
.picker-item {
color: green !important;
}
.picker-item-active {
color: blue !important;
}
`
}));
});
});
Hi i am extending the heading block using the filter hooks functions. so i am using the "blocks.registerBlockType" to add additional attributes. i am using the "editor.BlockEdit" to have my inspactor controls and update the attributes values. and i use the "blocks.getSaveContent.extraProps" to save the added attributes on the front end.
and indeed all attributes pass to the front side. but, the issue is that while editing none of the changes are reflected in the full site editor. the attributes are changing but it does not displayed inside the full site editor.
for example: this is a function that change the margin top attribute:
const updateMTDvalue = (newDTval) => {
setAttributes({ marginTop: (newDTval === undefined ? '' : newDTval) });
}
and as i said the new values does pass to the save function and works on the front end. but in the full site editor....nothing.
so i thought maybe i should add styles in the edit function like so:
if (attributes.desktopTop && attributes.desktopTop != undefined && attributes.desktopTop != '') {
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit
};
}
as you can see i also try to hard code display and even a css custom property, as well as the attribute values. none of it pass the the element.
but when i have tried this:
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit,
typography: {
fontSize: '3rem'
},
spacing: {
margin: {
top: fullTopM
}
}
};
the spacing and typography does work on the element inside the full site editor.
any idea why? why the update function itself, that update the attribute, does not change the element in the editor? and how can i add the styles to the element in the editor?
NOTICE i am talking about the full site editor, not the posts and pages editor.
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
Monaco editor has several interfaces for creating decorations or overlays. These appear to be rendered into one of two places in the DOM:
.monaco-editor > .overflow-guard > .overlayWidgets > .monaco-editor-hover
.monaco-editor > .overflowingContentWidgets
I am finding that using the line decorations API, the overlays are rendered into location (1), and that's a problem:
This happens because .overflow-guard has overflow (surprise!) set to 'hidden'.
Sample code:
editorInstance.getModel().deltaDecorations(decorations.current, [
{
range: new monaco.Range(err.line, err.pos, err.line, err.pos + err.str.length),
options: {
className: 'error',
glyphMarginClassName: 'error_line',
glyphMarginHoverMessage: { value: err.message },
overviewRuler: { color: '#ff0000', position: monaco.editor.OverviewRulerLane.Full }
}
}
]);
This is an instance of an IModelDecorationOptions.
Questions:
Is it possible to modify my code to do this in a way that renders the decoration outside of overflow-guard?
Is there a monaco bug here? (I couldn't find a way to test it on the playground)
In a sencha app, I want to create two or more "Panel" in the same page, but with different Style.
Panel_1.js:
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title",
//some try
componentCls:'panel_1',
cls:'panel_1'
...
});
Panel_2.js:
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title",
componentCls:'panel_2'
});
I add these two panels in one page, eg. the "center" of mainview. Add for css file with css class panel_1 and panel_2. But does not work.
how can I set these two panel with different Title, Background color, color, border, and so on.
Add the same question, I want different Button, eg. Blue Button with yellow text, red Button with white text, in a same toolbar.
I try override the extjs css class, eg. x-panel-body . You know, all compoent will be changed. That is not what I want.
It's hard to tell what you're having a hard time with. What you seem to be trying to do does work. I'll just provide a simple example, see https://fiddle.sencha.com/#fiddle/ecd
The easiest way is to add a cls to your panel, then you can use CSS to apply only within those classes. You can also add cls to items inside of your component. Also, Ext has some classes it already applies so you can use them (x-body, x-header for Ext.panel.Panel). The following example shows you how to scope your .x-header definitions so they only apply to your class
JavaScript
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title',
cls:'panel_1',
html: 'Here I am',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title',
cls:'panel_2',
html: 'Here I am again',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
CSS
.panel_1 .x-header{
background-color: blue;
}
.panel_1 .ok{
background-color: green;
}
.panel_2 .x-header{
background-color: yellow;
}
.panel_2 .cancel{
background-color: red;
}
Most typically, you would extend your sass resources to create custom classes for your both Panels (or at least for the one you wish to change).
You could do it with the Sencha Architect, which has a 30 day trial period.
The trick would then be to add a ui tag, that would then be added to your generated class name
Ext.define("MyApp.view.Panel_2", {
ui: 'black'
});
would then be generated with a class called like
.panel-default-black
for this class you could then create your sass for all internal elements
sass/component.css would then for eg contain
.panel-default-black {
background-color: black;
color: #ffffff;
.panel-default-header {
background-color: $some-predefined-value-in-another-sass-file;
}
}
another option would be to use the UI-label, like:
#include extjs-panel-ui(
$ui-label: 'black',
$ui-background: black;
$ui-color: white;
$ui-header-background-color: blue;
);
After compiling the theme, you would then see the changes between the 2 panels.
More info, you could find on the site of Sencha
Yet another none recommended way, would be to use the style tag, and to directly give your style for your panel, but that is not recommended to use