CODEWITHSUNDEEP
reactjsprimereact
JavaHava
JavaHava

Reputation: 199

How to change the height of an accordion in react?

I created an accordion using the prime react UI library.

I just wan't to change the height of the accordion so it takes up more of the page. The accordion responds to changing the width in the style tag, but doesn't respond to the height. My question is how do you change the height?

export class ThirdPageAccordions extends Component {
    render() {
        return (
            <div align="left" className="content-section implementation">
                <center>
                <Accordion style={{height: "50px", width: "100px"}} >
                    <AccordionTab header=" Data"  >
                    <DataTableinAccordion />
                    </AccordionTab>
                    <AccordionTab header=" Details">
                        <p></p>
                    </AccordionTab>
                    <AccordionTab header="Details II">
                        <p>Details II</p>
                    </AccordionTab>
                    <AccordionTab header="Cars">
                        <p> Cars </p>
                    </AccordionTab>
                    <AccordionTab header=" Summary">
                        <p> summary </p>
                    </AccordionTab>
                    </center>
                    </div>
                    );
                 }
             }

EDIT: Whats circled in red is what I'm attempting to make larger

Whats circled in red is what I'm attempting to make larger

That extra space between the data header and the cars header was the result of changing the height via headerstyle{{height: "300px"}}

EDIT 2: I added it here: 

<Accordion  >
    <AccordionTab headerStyle={{height: "50px", }} header="DATA" >
</Accordion>

Upvotes: 1

Views: 3881

Answers (1)

Vencovsky
Vencovsky

Reputation: 31693

Instead of using style, you should use contentStyle as it's says in the docs in Properties For AccordionTab. You should be changing the AccordionTab's style.

<AccordionTab headerstyle={{height: "50px", width: "100px"}} >
    ...
</AccordionTab>

You can also change the header style with headerStyle.

If you want to pass a className you should use contentClassName and headerClassName.

Upvotes: 1

Related Questions