Can I use Syncfusion controls inside Accordion panel without losing styling?

[Derek Saffie]

I am using the Accordion control, but would like to use other controls, such as the Textbox, inside of the Accordion panels. However, doing so results in the loss of all the styling that makes the Textbox control useful. I basically just have an ordinary textbox at this point. If I move the Textbox control outside the Accordion it looks fine. How can I fix this?

html

            <div id="accordion_html_markup">

                <div>

                    <div>

                        <div>"Option 1"</div>

                    </div>

                    <div>

                        <div id='container'>

                            <div class='wrap'>

                              <div id="input-container">

                                <input id="username" title="Username"/>

                                <input id="password" title="Password" type="password"/>

                              </div>

                            </div>

                    </div>

                </div>

            </div>

js

ej.base.enableRipple(true);

//Initialize Accordion component

var accordion = new ej.navigations.Accordion({});

//Render initialized Accordion component

accordion.appendTo('#accordion_html_markup');

var testrailUsername = new ej.inputs.TextBox({

    placeholder: 'Username',

    floatLabelType: 'Auto'

});

testrailUsername.appendTo('#username');

var testrailPassword = new ej.inputs.TextBox({

    placeholder: 'Password',

    floatLabelType: 'Auto'

});

testrailPassword.appendTo('#password');

[Ruksar Moosa Sait]

Hi Dered,

We have checked on your shared codes and you have tried to append the textbox instance before the element is rendered inside the accordion panel. The text box element added to the accordion item will be available once the accordion item is expanded. Hence you can append the instances of the textbox in the expanded event of the accordion to overcome this issue. We have prepared a sample for your reference.

var accordion = new ej.navigations.Accordion({

    expanded: function (args) {

        if (args.index === 0 && args.isExpanded && args.content.querySelector('#username').classList.length == 0) {

            var testrailUsername = new ej.inputs.TextBox({

                placeholder: 'Username',

                floatLabelType: 'Auto'

            });

            testrailUsername.appendTo('#username');

            var testrailPassword = new ej.inputs.TextBox({

                placeholder: 'Password',

                floatLabelType: 'Auto'

            });

            testrailPassword.appendTo('#password');

        }

    }

});

Sample: https://stackblitz.com/edit/2mqser?file=index.html,index.js

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait