I am trying to integrate a wrapping component based on select2, taking as an example the same one that proves the official documentation of vue.js https://v2.vuejs.org/v2/examples/select2.html the problem is that I need to use this component as a multiple select and pick up the values of those selected in an array. this is the link to reproduce the official example https://jsfiddle.net/d131Lebj/4989/, what changes should I make to obtain this?
Related
I've explored the docs, the code, and all of the questions/discussions I can find on this library but haven't found any discussion of whether this is possible.
Basically we want to only show the marker if the list contains some particular element-type as its direct child in the source HTML.
I'm aware of Custom Rendering but even with all of the information I've reviewed, I don't see any way to accomplish this.
Can this be done?
I have an Angular 9 application, where I am using select to populate the cities belong to a country. Countries are also listed using a normal html select, not using any third party components like material. Currently I am facing some slowness with rendering the select for cities when I have around 5700 cities against a country. We are populating cities from an API endpoint, when the country value changes. The issue is not present when there are fewer cities against a country.
When I looked for a solution across the forums, many are suggesting to use a autocomplete search box for cities.In our case, we should have to stick with the select as the customer wants it that way.
Would like to hear your thoughts/solution/approaches for this
Thanks
Virtual scroll can resolve your issue. Because in case of big lists, like yours. CDK Virtual scroll should be used. Please refer to Cdk virtual-scroll inside mat-select for mat-option for how to implement it.
I really like the commenting interface employed by Medium, allowing users to highlight a portion of an article and comment on that specific part.
I would like to implement a similar commenting facility in a VueJS app.
I found this package which does something similar: http://aroc.github.io/side-comments-demo/, but I want to try to find something that has been updated more recently. Also, it requires jquery, which I don't currently use and I would like to avoid adding that dependency if possible.
I would love to know if anyone has seen anything that could help.
I have created a sample at https://codesandbox.io/s/medium-style-text-select-comment-box-h5o9r
Here I am adding the comments component to the root component such that it is available globally. On component mount() hook, I am attaching a mouseup method to the window object where any selections done are checked using
if (window.getSelection() && !window.getSelection().isCollapsed) {
//execute only with the getSelection() method is available
//and the current selection is not collapsed
}
Once we do have a selection, the position on the page is calculated using the selection position and its dimensions and the floating comments component is positioned accordingly.
We can get the selected text using
window.getSelection().toString();
I would advise you to go through the sandbox as there are a lot of things going on which are not in this answer.
I'm trying to insert a datepicker in my angular 4 app but I've faced some dificulties.
So I tried this kekeh/mydaterangepicker but I need to have this design:
I tried to modify the css of the plugin in my css but without real success. I cant succed to change the color of first selected node and last selected node to follow my design.
My actual state:
If someone can help me.
I can also start from scratch but I don't know how to properly create a datepicker in angular.
The styles of the component can be changed by overriding the existing styles.
Read documentation and follow the instructions. The library documentation also provides you with examples.
Also you you might want to use Angular material datepicker
It is very convinient to work with it and it has bunch of other useful components.
I am new to react & I am using material-ui and I want to design a custom autocomplete in React where once data is selected from dropdown it appears as a chip in the text input. I am using the onNewRequest property of material-ui autocomplete but I am not sure how to render a chip component inside it.
Can someone guide me how to do it properly? I want to design recipients like layout found in gmail. I know there are npm packages available but I need to design it purely from material-ui so please guide with a proper approach
Thanks
The question is very broad but I'll try to at least point you in the right direction.
You don't need to render the chips inside the autocomplete, create a a new reusable component. The parent component will contain both the autocomplete and the chips. This will contain all the state. It has two child components:
The first child is always going to be the autocomplete, modify the material-ui styles to make it transparent and without an underline/borders. Whenever an element is selected, send an event to the parent to add the element to the chips array in the parent state.
The second child is the array of chips. This is only a presentational component, receives an array of chips, and the chips might contain another prop event to remove the chip.