Creating an Accordion.Content as TableBody causes display issues by setting tbody display to block

[ghost]

By creating and causes display issues when the element is expanded because the tbody element's display attribute is set to 'block' instead of a value more suitable for tables such as 'contents'

This react render code presents the issue on a chrome browser:

<Accordion as={Table} columns={16   } className="ui">
                <Accordion.Title
                    as={Table.Header}
                    active={this.props.activeIndex === this.props.index}
                    index={this.props.index}
                    onClick={this.handleActiveIndexChange.bind(this)}
                >
                    <Table.Row>
                        <Table.HeaderCell width={10}>
                            <b>{record.account.name}</b>
                        </Table.HeaderCell>
                        <Table.HeaderCell width={6}>
                            {this.props.deleteModal}
                            <Icon className="dropdown icon"></Icon>
                        </Table.HeaderCell>
                    </Table.Row>
                </Accordion.Title>
                <Accordion.Content
                    as={Table.Body}
                    active={this.props.activeIndex === this.props.index}
                    index={this.props.index}
                >
                   <Table.Row>
                      <Table.Cell width={10}>{record.data.name}</Table.Cell>
                        <Table.Cell width={6}>
                          <Dropdown
                            name="xxx"
                            fluid
                            selection
                            options={this.state.options}
                            value={this.state.value}
                        />
                    </Table.Cell>
                 </Table.Row>
                </Accordion.Content>
            </Accordion>

[y0hami]

Can you create a JSFiddle to replicate the issue?

[ghost]

Sure thing if you can point me to a working example of how to use Semantic-ui on JSFiddle?

On Wed, Apr 25, 2018 at 1:16 AM, Sean notifications@github.com wrote:

Can you create a JSFiddle https://jsfiddle.net/ca0rovs3/ to replicate the issue?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/6351#issuecomment-384184511, or mute the thread https://github.com/notifications/unsubscribe-auth/AJy87EVL41zMV4gden4-mkf9WQE6D-E8ks5tsCLrgaJpZM4TikDY .

[y0hami]

You can use the following link https://jsfiddle.net/ca0rovs3/

[chriscoderdr]

were you able to overcome that?

[ghost]

The issue I fixed in my code the moment I encountered it. The jsfiddle I did not pursue it as it seemed too much effort.

I was just reporting this as an issue to fix in semantic because the behavior is wrong. The issue remains that semantic accordion sets display to block when expanding the content instead if setting it back to what the content's original display value was.

Regards

On Sat, Aug 11, 2018, 8:29 AM Cristian Gomez notifications@github.com wrote:

were you able to overcome that?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/6351#issuecomment-412278540, or mute the thread https://github.com/notifications/unsubscribe-auth/AJy87FtYZHr1Yu0VZPvOqM3bLzVpNqHPks5uPupGgaJpZM4TikDY .

[chriscoderdr]

I overrided the value in my css but it seems more like a hack that the way it should works..

[ghost]

That is a hack. For a fix it needs to be solved on the javascript side by storing the display mode before hiding the content and re-setting it when the content is expanded instead of setting it to block.

On Sat, Aug 11, 2018, 10:31 AM Cristian Gomez notifications@github.com wrote:

I overrided the value in my css but it seems more like a hack that the way it should works..

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/6351#issuecomment-412286058, or mute the thread https://github.com/notifications/unsubscribe-auth/AJy87P9UCpuNnioBIoyQu_2UhoYe1kGJks5uPwbqgaJpZM4TikDY .

[lubber-de]

Fixed in https://github.com/fomantic/Fomantic-UI 2.5.0