Comments (3)
Could you give me an example of what you're trying to do in a Codepen or JSFiddle? I don't fully understand what you're trying to achieve.
Thanks
from react-collapsible.
This here is the code in the parent component:
{this.props.users.map((user, index) => {
return <Collapsible key={index}
trigger={<UserCreationElement user={user}/>}>
<div><i>Apps:</i></div>
<ul className="list-inline">
{this.props.products.products.map(product => {
return <li key={product.id}><img width="75px" height="50px" src={product.image} alt={product.name} /></li>
})}
</ul>
<hr />
<div><i>Access Groups:</i></div>
<p>Access Groups</p>
<hr />
<div><i>Permissions:</i></div>
<p>Permissions</p>
</Collapsible>
})}
and this is the code in the child:
<div className="row" id="hoverDiv">
<div className="col-sm-2 col-xs-4 text-center"> {user.pic ?
<img className="img-circle" width="40" height="40" src={user.pic} alt={user.lastname} /> :
<button type="button"
className="btn btn-info btn-sm"
onClick={this.showPicModal.bind(this)}>
<span className="glyphicon glyphicon-user"></span>
</button>}
</div>
<div className="col-sm-2 col-xs-3">{user.firstName}</div>
<div className="col-sm-2 col-xs-3">{user.lastName}</div>
<div className="col-sm-2 col-xs-3">{user.position}</div>
<div className="col-sm-2 col-xs-3">{user.email}</div>
<div className="col-sm-2 col-xs-8">
<button type="button" onClick={this.delUser} className="btn btn-default btn-sm pull-right">
<span className="glyphicon glyphicon-trash"></span>
</button>
<button type="button" className="btn btn-default btn-sm pull-right">
<span className="glyphicon glyphicon-user"></span>
</button>
</div>
</div>
I don't want the collapsible to open when clicking on one of the buttons.
from react-collapsible.
In this example, the text which should appear in the collapsible doesn't do. When clicking on it, it expands, but there is no text, only blank white space:
<div className="row">
<Collapsible
trigger={
<div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
</div>
}
triggerSibling={
<div className="col-sm-3">
<button className="btn btn-success" type="button">Test</button>
<button className="btn btn-danger" type="button">Test</button>
</div>
}>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
</Collapsible>
</div>
from react-collapsible.
Related Issues (20)
- If the component is open while it's being triggered through a state change the component stops functioning HOT 7
- contentHiddenWhenClosed prevents content from opening HOT 1
- Can you all three of these simultaneously: triggerWhenOpen, easing, transitionTime? HOT 1
- Question - programmatically open/close component
- Please accept React 18 support pull request HOT 1
- Suggestion: Refactor library into a modernized approach in a new major version HOT 5
- Example app error: Invalid Version
- form inputs instantly close Collapsible. HOT 4
- Unable to pass key prop HOT 1
- Click events do not work correct within the collapsible
- Space Button does not work on any input element passed in "trigger" prop HOT 1
- lazyRender do not render on first open
- Attributes with unique values are not deterministic HOT 1
- Production version contains unnecessary files
- Hidden (closed) items still part of the DOM
- Just using Collapsible throws an error as of recently HOT 1
- Release 2.8.3 introduced a major Callapsible OPEN defect with lazyRender=true
- Display multiple items in a map when a Collapsible is clicked HOT 1
- Not a bug or issue, just some help with Collapsible - how to collapse a previously selected row when selecting a new HOT 1
- How to disable row collapse when clicking anywhere on the window
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 react-collapsible.