On our current Angular 5 project, we use bootstrap 3.3.7 and ngx-bootstrap 2.0.3
I have been asked to implement a dropdown multi-select option as shown below. It will allow user to select multiple options from dropdown list.
How can I implement this feature?
You can create a dropdown using ngx-bootstrap and then add <input type="checkbox" with labels for a description within in menu item li.
It turns out neither of these frameworks support such component.
Related
Versions：
ngx-bootstrap: 7.0.0
Angular: 12.1.3
Bootstrap: 4.6.0
Clicking on a dropdown button after another dropdown is opened, the first dropdown is not closed.
But in ngx-bootstrap#6.2.0, it didn't happen.
How can I solved this issue? Any idea?
I ran into the same problem today. Turns out this is an unsolved issue that's been looked at by the Angular bootstrap Community. My guess is that it will be resolved soon.
https://github.com/valor-software/ngx-bootstrap/issues/6248
However as a work around:
An element with the dropdown-menu class is shown by adding the show class.
So you could give every menu a ref:
<ul class="dropdown-menu" #menu1>...</ul>
<ul class="dropdown-menu" #menu2>...</ul>
And upon a click event on any dropdown navigation item, trigger a function that removes the show class on all of these elements.
I'm looking at the options for customise fluent UI dropdown, based on the doc there are 4 options:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
<Dropdown
placeholder="Select an option"
label="Custom example"
ariaLabel="Custom dropdown example"
onRenderPlaceholder={onRenderPlaceholder}
onRenderTitle={onRenderTitle}
onRenderOption={onRenderOption}
onRenderCaretDown={onRenderCaretDown}
styles={dropdownStyles}
options={exampleOptions}
/>
onRenderPlaceholder
onRenderTitle
onRenderOption
onRenderCaretDown
But these options are not really close to my requirements, I want to customise the group header and dropdown panel with extra buttons.
Based on the defnition in the code (IDropdownProps) there are also some exposed custom rendering are not in the docs, just curiouse is there any sample use case for following custom renderings.
onRenderItem
onRenderList
onRenderContainer
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.
Im In need of assistance when it comes to implementing Bootstrap buttons in a DataTable where the purpose is to toggle the columns with these buttons.
This is how it looks like by default in the DataTables design, what I am trying to do is to use the Bootstrap design instead and also place the buttons to the left of the table which seem rather impossible...
If you have any suggestions please feel free to discuss it!
Check This
Bootstrap 3
This example shows DataTables and the Buttons extension being used with the Bootstrap framework providing the styling. The DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap page.
https://datatables.net/extensions/buttons/examples/styling/bootstrap.html
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme