Comments (6)
Any idea if this could become a feature? I mainly want to avoid the position of this input changing, so maybe if there could be a way to make this render into another component or DOM item? like target=".list" or "target="#test"?
Its a great component though!
from material-ui-chip-input.
I'll try to work on it during this weekend
from material-ui-chip-input.
Good idea, PR welcome! 👍
from material-ui-chip-input.
Started working on this but turns out it requires more work than I thought. Just moving the chip rendering under the 'error text' display does't work as the styling get's messed up. Some of the issues that I noticed are:-
- The chips overlap with the 'error text' display.
- There is extra space under the floating label that was initially intended for chips.
- Moreover, changing the chips element position might break someone's custom css due to change in component structure. For example, initially the chips could be styled by passing the className prop (let's assume className='mui-chip-input-root') and then using
.mui-chip-input-root > div > div > div
. But if we change the structure, then this css might not work. So we need to think about this as well.
There might be some other things to look into as well. So will need more time to do a detailed investigation. I might not be able to work on it in the next few weeks so if anyone else is interested please feel free to pitch in.
from material-ui-chip-input.
@amit1911 Thank you for trying, though! Material-UI currently gets a full rewrite, so maybe we should wait for them to finish before trying to implement this. The chip input needs to be re-written anyway because of all the breaking changes in the rewrite. 😕
Regarding the structure changes: I never officially supported using CSS for styling. There are supported style
props that should be used for styling, so that wouldn't be a problem.
from material-ui-chip-input.
Hey guys, not all internal divs are supported with style
props so right now you can't do everything you could do with CSS...
If you don't mind some SCSS, here is what I have for my chips-under:
.multiSelect {
height: 200px;
> div:nth-child(1) {
padding-top: 8px;
> div:nth-child(1) {
> label {
top: 18px;
}
> div {
top:60px;
position: absolute;
max-height: 180px;
overflow-y: auto;
}
}
}
}
And
<Col xs={12} className={css.multiSelect}>
<ChipInput
floatingLabelText="Type and select one or more practice areas"
...
/>
</Col>
If you don't want to support CSS, maybe add more internal style props?
from material-ui-chip-input.
Related Issues (20)
- On Android Mobile: newChipKeys not working HOT 1
- dataSource is not working HOT 1
- Update storybook examples
- How to add date/datetime values as chips?
- Can I add icon to input field like in TextField by using Input Adornments?
- Label positioning on "outlined" variant is incorrect.
- Dependency version mismatch error: Unable to install this module HOT 12
- Dependency error with material-ui/core v5 HOT 3
- Make chips editable in the same place HOT 1
- "future" compatibility issue HOT 1
- Module not found HOT 1
- Make ChipInput a required field in a form HOT 1
- Chip note adding using space bar HOT 1
- MUI v5 HOT 1
- Please add React 17 support HOT 7
- Is there a way to change OnBlur so that focusing and then clicking on a chip doesn't trigger it?
- Submit button not working after update the Android system WebView in android device.
- Performance issue with pasting 100+ items in chip input. Cannot add more chips and DOM freezes
- Should ChipInput component be wrapped by Form tag ?
- unable to install in react 18v 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 material-ui-chip-input.