Comments (7)
Thanks for the feedback and for the feature suggestion. Regarding the hiding/disabling of the input field, you can disable the component or set it to readonly (although I am not sure if that fits your use case).
from multiselect-combo-box-flow.
Agree, awesome component.
However, I would also need to hide input field, showing selected items only. Any way to achieve that with the current version of the component?
Cheers, Simon
from multiselect-combo-box-flow.
You can hide the input field via CSS by hiding the underlying part="input-field"
:
[part="input-field"] {
display: none;
}
Hope this helps,
Goran
from multiselect-combo-box-flow.
Hi @gatanaso
Unfortunately, does that not work. It hides drop-down arrow, but keeps the space for input-field, which is the opposite of what I need.
Cheers, Simon
from multiselect-combo-box-flow.
Yes, that is expected as the arrow icon is part of the input field :)
However, it's interesting that it would still take up space in the page even though it's removed. Have you inspected this already?
from multiselect-combo-box-flow.
Ok, there are two parts with "input-field" If I display:none the first one, the space is not visible, but also not the arrow. Furthermore, the dropdown it opens is not wide enought to show items without truncation.
If I display:none the second, space is visible.
from multiselect-combo-box-flow.
@yoursnowyfriendleo Ah yes, I forgot to clarify you need to target the input field that is part of the multiselect-combo-box-input
. And yes, if you do this, the down arrow is not visible (as that is part of the field itself).
Furthermore, the dropdown it opens is not wide enought to show items without truncation.
This is interesting, as I think the dropdown should be the width of the whole field. For example:
Though to get this, you need to have some value present in the MultiselectComboBox, otherwise it just looks weird.
I applied the following style (file name and location: frontend/styles/multiselect-combo-box-input-styles.css
.multiselect[part="input-field"] {
display: none;
}
And then had it imported in my view as follows:
@CssImport(value = "./styles/multiselect-combo-box-input-styles.css", themeFor = "multiselect-combo-box-input")
Hope this helps,
Goran
from multiselect-combo-box-flow.
Related Issues (20)
- Implement standard HasLabel interface
- Vaadin 14 - version 2.5.0 - Custom Values are not returned by getValue and getSelectedItems
- Vaadin 14 - version 2.5.0 - Smaller height in readOnly mode with empty value
- Dropdown doesn't display when switching from setEnabled(false) to setEnabled(true) HOT 2
- Allow typeahead text to be automatically cleared when an item is selected, else manually cleared via API?
- Item selected by clicking outside the component
- Js error this.$.comboBox.$.dropdown._setOverlayWidth (Vaadin 23)
- ERROR in ../node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js (Vaadin23.3.3) HOT 2
- The setCompactModeLabelGenerator method is not working. HOT 1
- "Select All" functionality
- Vaadin 18 - BUG when setting compact mode for combobox HOT 1
- Vaadin 14 - BUG - Dropdown not defocusing on second click
- Problem in Vaadin 19.0.4 HOT 2
- Placeholder should be hidden when a value is selected HOT 7
- "Cannot read property of undefined" with Vaadin 21 (Flow) HOT 5
- Split itemsLabelGenerator and valuesLabelGenerator
- Component does not work with vaadin 22 HOT 20
- Add additonal attribute or class to overlay HOT 1
- Items not showing when using larger data HOT 9
- Using the component with Vaadin 23 gives NotSupportedError: CustomElementRegistry.define: 'vaadin-lumo-styles' has already been defined as a custom element. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from multiselect-combo-box-flow.