My first question ever - so apologies if I am not specific enough.
How do I change the color and width of material drawer component in angular-dart in css? I have tried it several ways in the CSS, including as below:
::ng-deep material-drawer {
color: #9437FF;
width: 200px;
}
.material-drawer {
color: #9437FF;
width: 200px;
}
FYI, the following worked with the material-header, which is inside a header tag:
::ng-deep header.material-header.material-header {
background-color: white;
color: #9437FF;
}
My material-drawer is not in a div or anything, just directly an HTML element on its own.
Any pointers are appreciated!
Setting the width of the drawer is a bit complicated. It involves setting a good amount of values as such it is best to use the mixin. You can see an example here
As for the color that is a little bit harder. What color are you trying to change? The background color?
For the background color you can set the background-color on the drawer. The problem is going to be that the content itself is going to override that color. In this case the material-list has it's own white color associated with it. Removing that color you could have problems with the divider colors.
Related
When trying out the Material-UI basic example for Tree View (#mui/lab/TreeView), I do not know how to remove the horizontal scrollbar when using the overflowY: "auto" (The same effect even if I use overflow: "auto") option in the sx prop of the TreeView component. The horizontal scrollbar appears no matter how much space is available to the right. I want to keep the overflowY option in case of vertical overflow.
For example please see the basic tree view example from the official Material-UI page in StackBlitz or CodeSandbox.
How to remove the horizontal scrollbar when it's not needed?
This happens because the CSS classes .MuiTreeItem-content and its child .MuiTreeItem-label are set to 100% width by default, therefore, the .MuiTreeItem-content's 8px padding on x axis (also default) get in the way, adding 16px too many. You can easily override this by setting .MuiTreeItem-content's class padding to 0.
// ...
import MuiTreeItem from "#mui/lab/TreeItem";
import { styled } from "#mui/material/styles";
const TreeItem = styled(MuiTreeItem)(({ theme }) => ({
"& .MuiTreeItem-content": {
padding: 0,
},
}));
// ...
To remove the horizontal scrollbar completely you can hide the overflow over the X axis.
in css
.TreeView {
overflow-x: hidden;
}
or in jsx
<TreeView
sx={{ overflowX: "hidden" }}
...
>
I am using ag-theme-material. I migrated to Angular 9, and I had to migrate ag-grid to v.23.0.0. However, some of the styles got changed and I am not able to change them back. The biggest issue I have is the grid's header row used to be transparent (I was on version 20.2.0 before the upgrade):
.ag-header {
background-color: transparent;
}
This doesn't work anymore. It sets my header row background to white, and I can't see the headers because the text is white. If I change it to a specific color, it works, but it doesn't accept transparent. I've tried setting opacity to 0, using an image, nothing works!
So I added a variable in my SCSS file to override this theme parameter, as specified in their migration guideline - https://www.ag-grid.com/documentation/javascript/themes-v23-migration/.
$ag-theme-override-params: (
header-background-color: transparent
);
#import "~ag-grid-community/src/styles/ag-grid.scss";
#import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat.scss";
But that doesn't work either. Now, I know this variable is doing its job because I am able to override the checkbox-checked-color using it...
Am I naming it wrong? What am I missing???
FYI for anyone facing the same problem, I tracked it down. In version 23, ag-grid has specified a background color (in a variable) in .ag-theme-material .ag-root-wrapper (it's part of _ag-theme-base-mixin.scss), and it overrides the CSS for ag-header class. So you have to set the background-color CSS property to transparent both in .ag-header and in ag-grid-angular .ag-root-wrapper.ag-layout-normal.ag-ltr.
ag-grid-angular {
width: 100%;
height: 100%;
.ag-root-wrapper.ag-layout-normal.ag-ltr {
background-color: transparent;
}
}
.ag-theme-material .ag-header {
background-color: transparent;
}
I am aware that I can change the color of the clear-icon and the search-icon as follows:
$searchbar-md-input-clear-icon-color: white;
$searchbar-md-input-search-icon-color: white;
For the cancel-icon, however, this method does not seem to work.
$searchbar-md-input-cancel-icon-color: white;
The code above has no visible effect on the cancel-icon. Instead, the color of the cancel-icon always falls back to the defined primary color.
$colors: (
primary: blue
);
How can I change the color of the cancel-icon?
Yes searchbar-md-input-cancel-icon-color is not a property of SearchBar component.
You need to sets style by a specific css selector like this :
.searchbar-ios-danger .searchbar-ios-cancel {
color: white;
}
I want to show thumb-left icon on button in sapui5. thumb-left is not available. So can i choose thumb-down or thumb-up and rotate it on 90 Degree ?
How I can do it.
2ndly How to set the buttons color Red, Green ,Yellow. I set button type to Accept, Reject but it just make border of buton green ,red,
<Button id="btnNegative" type="Reject" icon="sap-icon://thumb-down" text="Negative" press=".onSentimentFeedBackButtonclick"></Button>
<Button id="btnNeutral" type="Accept" icon="sap-icon://thumb-up" text="Neutral" press=".onSentimentFeedBackButtonclick"></Button>
Here is a simple example
In your XML add a custom class to your button
<Button id="btnNeutral" class="myNeutralThumb" icon="sap-icon://thumb-up" text="Neutral" press=".onSentimentFeedBackButtonclick" />
Then in your style.css (or however your CSS file is named) add the following:
button.myNeutralThumb .sapMBtnInner {
border-color: #ff0 !important;
}
button.myNeutralThumb .sapMBtnIcon {
transform: rotate(90deg);
color: #ff0 !important;
}
The first style changes the color of the button's border. Probably that should be the same color as the icon.
The second style rotates your thumb icon and changes its color.
If you also want to change the background-color of your button, put something like background-color: #fff; in the second style rule.
Edit: Replaced complicated and long and non-future-proof CSS style rule with short CSS rule + !important
I want to give the items in my suggestbox a custom background color.
Is this possible?
like
item.getElement().getStyle().setBackgroundColor("red");
just add this to your css file to change the background color of an item/selected-item
.gwt-SuggestBoxPopup .item {
background: red !important;
}
.gwt-SuggestBoxPopup .item-selected {
background: black !important;
}
look here for detailed information