Extra div inserted between Collapse component's div and content

[alburritos]

I noticed an extra div being inserted between the Collapse Component div and the div that contains my content. That inserted div is interfering with my styling and there's no way to access it. In the Chrome Dev Tools Elements pane I see something like:

<div id="collapse" ... > // this is the id I give to the Collapse component
  <div> == $0
    <div class="my-conent"> // This is the content I define between `<Collapse ... >` and </Collapse>

How can I access the interfering div? I need to adjust it's styling because it is affecting the styling of my content.

[nkbt]

Which version are you using? try react-collapse@3, it should not have it anymore.

[alburritos]

@nkbt 2.3.3. Are there breaking changes?

I just noticed on the README page that react-collapse is only at 2.3.3. How is react-collapse@3 available?

[nkbt]

Sure there are, but very little. Mostly about auto-unmounting component. It is done not with a special prop, but rather as a different component. See readme on master branch: https://github.com/nkbt/react-collapse/tree/master

Also onHeightReady -> onMeasure prop

Also it has hasNestedCollapse prop, but it is not breaking.

Check README diff for more details: https://github.com/nkbt/react-collapse/compare/2.x...master?short_path=04c6e90#diff-04c6e90faac2675aa89e2176d2eec7d8

[nkbt]

For all our projects the only thing we needed to do is to replace

v2:

import Collapse from 'react-collapse';

with v3's:

import {UnmountClosed as Collapse} from 'react-collapse';

[alburritos]

@nkbt I don't see anything about keepCollapsedContent. I'm receiving a warning that it's an unknown prop. Is it now removed in v3?

[alburritos]

Also, I'm on 3.2.0 right now, and that extra div is still there.

[nkbt]

Yes, it is niw default behaviour, if you want content to be removed - you use anotet component (my comment above). If you need to keep content - just use default component as usual

[nkbt]

Sorry for typos, I'm on my phone...

[alburritos]

@nkbt Np, I appreciate the responses. I'm still having issues with the exra div. When I open up elements I see <div> == $0 as the parent of the collapse content. How can I remove this?

The content that exists in the Collapse component isn't fully expanding to the width of the containing div. I notice if I manually add width: 100% to that injected div (via Elements pane), the content displays properly (takes up the entire space). Otherwise it seems to only take up 75% of the div width.

In other words, if I could somehow add styling to that inserted div, I'd be able to fix my problems. Otherwise, I'd need to remove it.

I also can't just set the width of the child width because on different browsers, the width actually varies (75% was just a rough estimate). So I couldn't do something like "width: 125%".

[nkbt]

You should be able to use theme that allows to style every single element that react-collapse injects.

[nkbt]

It is not in the readme though.

<Collapse theme={{
  collapse: 'ReactCollapse--collapse',
  content: 'ReactCollapse--content'
}}>
 ...

[nkbt]

Just in case, extra div is essential to capture content height without expanding parent element, so there is absolutely no way to remove extra div, though you can still style it with theme prop.

[alburritos]

@nkbt Yes, I was looking for a solution more along the lines of theme. For the injected div, is that collapse or content? Also, can I pass a style object directly instead of giving it a class, as you have above?

[alburritos]

I have tried somethign such as:

<Collapse
  theme={{
    collapse: { backgroundColor: 'yellow' },
    content: { backgroundColor: 'pink' },
  }}>
...

But in the Elements Pane, it doesn't show that the styles were passed to the extra div.

I also tried exaactly what you recommended, but the divs still have no id or class.

[nkbt]

Thise are class names, not styles