In Blueprint.js MultiSelect example at https://blueprintjs.com/docs/#select/multi-select , after clicking on search box, exactly 10 items are shown. We can scroll down to view the rest.
How can I enable scrolling, and/or specify the maximum number of items displayed?
In the MultiSelect tag, add popoverProps props, then fill in popoverClassName with the custom css value:
.custom-class {
max-height: 150px;
overflow-y: auto;
}
<MultiSelect
popoverProps={{
popoverClassName: "custom-class",
}}
/>
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 working with Custom CSS Loader and it's all setup.
I can alter CSS for VSCode and make changes. But the only thing I cannot change for some reason is the text within the tab.
I can alter the icon size when I just font-size for tab. But it has no effect on the text size.
And I have try increasing the width of the tab but there is no go.
I can only guess what .tab-container and .tab does.
Here is what I want to alter:
Here's the CSS code I stole from someone's suggestion within VSCode's Issues:
:root {
--size-reduction: 12px;
}
.monaco-shell {
font-family: "JetBrains Mono", "Monoco", monospace;
}
.tabs-container .tab,
.tabs-container .monaco-icon-label,
.tabs-container .monaco-icon-label::before,
.tabs-and-actions-container .editor-actions {
height: unset !important;
}
.monaco-workbench .tabs-container .tab * {
font-size: 0.5em;
width: 100px;
}
.editor-instance > .monaco-editor,
.editor-instance > .monaco-editor .overflow-guard,
.editor-instance > .monaco-editor .monaco-scrollable-element {
height: 100% !important;
}
.editor-instance,
.editor-instance > .settings-editor .settings-toc-wrapper,
.editor-instance > .settings-editor .settings-editor-tree {
height: calc(100% + var(--size-reduction)) !important;
}
.editor-instance > .settings-editor {
height: calc(100% - var(--size-reduction)) !important;
}
Can someone please break down the each of the elements (.tab, .tab-container, etc.) or point me to a source that breaks it all down?
Also, if I adjust the font-size within tab, why isn't the tab's fonts shrinking?
My Pinned Tab Sizing is set to "Shrink". I have tried changing it from Compact and Norman with no difference in Font Sizing.
My normal font is "Jetbrains Mono" for the editor.
Acknowledging that this answer does not answer my original inquiry of "altering shrink pinned tabs either with width or font size."
But without using CSS-Custom-Loader and fiddling with the viscose's css, I found a more elegant solution using the UI settings.
The three settings to pay attention to:
Pinned Tab Sizing: Normal
Workbench > Editor: Show Tabs checked
Workbench > Editor: Tab Sizing shrink
Now I will pin 8 to 10 tabs at a time. So this will fit nice and neat within a workspace.
If I had 30 pinned tabs, I don't know if it would show enough to make a difference.
I am using in my component but by default, it's displaying a group of buttons in one row. I want to display the grouped buttons in one column. How is this possible?
Thanks.
.columnCss {
display: contents !important;
}
<lightning-button-group class="columnCss">
<lightning-button label="Refresh"></lightning-button><br/>
<lightning-button label="Edit"></lightning-button><br/>
<lightning-button label="Save"></lightning-button>
</lightning-button-group>
It seems impossible to create a global footer in an Ionic app.
Within a single page, you can use <ion-footer> and in turn, the <ion-content> component resizes itself using its resize() function, accounting for contained headers and footers, and global <ion-tab> allowing for tabs.
Having a <ion-footer> in app.html will not resize the content accordingly, causing for the footer to overlay the content.
Before I submit a pull request to the Ionic Framework's Content.resize method, does anyone know of a way to achieve a global footer?
If you know the height of the footer, you can style the .ion-page height to calc(100% - #{$global-footer-height}).
Example where global footer can be toggled on/off:
app.component.ts
#HostBinding('class.has-global-footer') public globalFooterEnabled: boolean = true;
constructor(platform: Platform, statusBar: StatusBar) {
// You can toggle the footer from a Service or something.
setTimeout(() => this.globalFooterEnabled = false, 5000);
// myService.somethingHappened$
.subscribe((toggle) => this.globalFooterEnabled = toggle);
}
app.html at the end:
<ion-footer class="global-footer" *ngIf="globalFooterEnabled">
Hello World!
</ion-footer>
app.scss
$global-footer-height: 50px;
.has-global-footer .ion-page {
height: calc(100% - #{$global-footer-height});
}
.global-footer {
height: $global-footer-height;
}
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