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>
Related
I have a graphical bug with the ClearButton provided by react-bootstrap-typeahead. I wanted to replace it with another button (for instance the CloseButton from Bootstrap). Unfortunately, the CloseButton is not clickable.
Graphical bug
What do I do wrong ?
import { CloseButton } from "react-bootstrap";
import { Typeahead, ClearButton } from "react-bootstrap-typeahead";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-bootstrap-typeahead/css/Typeahead.css";
<Typeahead
id="search"
options={chartData.datasets}
labelKey={chartData.datasets.label}
placeholder="look for projects"
multiple
onChange={setMultiSelections}
selected={multiSelections}
>
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <CloseButton onClick={onClear} />}
</div>
)}
</Typeahead>
try to change rbt-close-content css class
I used react-bootstrap-typeahead/css/Typeahead.bs5.css instead.
It seems like there may be two different issues here:
1. The clear button isn't clickable.
This is happening because .rbt-aux has pointer-events: none; set to avoid blocking clicks on the input. The default close button then has pointer-events: auto; to enable clicks on the button. You'll need to add something similar, or define your own element to position the clear button that doesn't remove pointer-events.
.rbt-aux .btn-close {
pointer-events: auto;
}
2. There are two instances of the clear button being rendered in the component.
I'm not sure why this is happening. Based on your code sample, there should only be one button rendering. If you plan on rendering a custom clear button, be sure not to set the clearButton prop on the typeahead (or set it to false, which is the default).
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",
}}
/>
I'm working on using treeData, but was wondering if it is possible to hide the text next to the chevron.
For example, can I hide the letters from the column in this table, and just show the chevron? Maybe using cell renderer?
You can do that even without using cellRenderer.
Include below styles in your component declaration.
styles: [`
::ng-deep [class^='ag-row-group-indent-'] .ag-group-value {
display: none;
}
`]
Working plunk: Ag-Grid treeData: Possible to hide text next to chevron
Figured out an easy fix within the column def:
cellRendererParams: {
innerRenderer: () => ''
}
i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.
Here's one way to do it:
handle rowDataChanged in your markup:
<ag-grid-angular
class="ag-dark"
[rowData]="messages"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
(bodyScroll)="handleScroll($event)"
(rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>
In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:
gridOptions: GridOptions = {
suppressScrollOnNewData: true,
}
handleRowDataChanged(event) {
const index = this.messages.length - 1;
this.gridOptions.api.ensureIndexVisible(index, 'bottom');
}
Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom
In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.
I am using AngularStrap, (TypeAhead), trying to make the substring in the matched items to stand out, like either make them bold (like jquery autocomplete) or change the background of the characters ta different color
California
Technical
I thought this should be possible by changing css (if I know they have a selector for the matched substring) Or use of template/$templatecache
no luck so far
EDIT: In this plnkr I can see the drop down menu items have user input highlighted/bolded but cannot see why and how it happens:
<input type="text" class="span3" ng-model="typeaheadValue" bs-typeahead="typeahead">
plnkr -> http://plnkr.co/edit/Yjff9DiLnGqi2x1E5D2q?p=preview
The typeahead dropdown menu items can be styled through .dropdown-menu a. Matched text is regexed' to <strong>match></strong> i.e style those through .dropdown-menu a strong. Example :
/* style the dropdown items */
.dropdown-menu a {
font-family : 'courier new';
font-size: 110%;
}
/* styling matched text */
.dropdown-menu a strong {
color: white;
background-color: red;
}
forked plnkr -> http://plnkr.co/edit/LpdRiH9DxeRiAib3MOnn?p=preview