Accordion orientation

Radzen.Blazor Components
1

Hi! I basically copied and paste the code on the demo, but I get a differente behavior and I dont quite understand why
image

As you see, the items are next to each other and expanding to the right, when they should be on top of each other and expand vertically. Why is that?
here is my code:

 <RadzenAccordion >
     <Items>
         <RadzenAccordionItem  Text="Dietas especiais" Icon="eco" CollapseTitle="Minimize os detalhes das dietas"
                              ExpandTitle="Visualize os detalhes das dietas." CollapseAriaLabel="Minimize os detalhes das dietas"
                              ExpandAriaLabel="Visualize os detalhes das dietas.">
             Details for Orders
         </RadzenAccordionItem>
         <RadzenAccordionItem Text="Alergias e intolerâncias" Icon="priority_high" CollapseTitle="Collapse employees."
                              ExpandTitle="Expand employees." CollapseAriaLabel="Collapse the employee details."
                              ExpandAriaLabel="Expand the employee details.">
             Details for Employees
         </RadzenAccordionItem>
         <RadzenAccordionItem Text="Ingredientes" Icon="Grocery" CollapseTitle="Collapse customers."
                              ExpandTitle="Expand customers." CollapseAriaLabel="Collapse the customer details."
                              ExpandAriaLabel="Expand the customer details.">
             Details for Customers
         </RadzenAccordionItem>
         <RadzenAccordionItem Text="Opções de planejamento" Icon="date_range" CollapseTitle="Collapse customers."
                              ExpandTitle="Expand customers." CollapseAriaLabel="Collapse the customer details."
                              ExpandAriaLabel="Expand the customer details.">
             Details for Customers
         </RadzenAccordionItem>
     </Items>
 </RadzenAccordion>
2

Hi @lmanes,

It seems that some CSS from your app is affecting the appearance of RadzenAccordion. You can use your browser's developer tools to inspect the items and see which CSS rule is causing them to appear on the same line. I suspect it is something that applies either float: left or display: inline-block.

3

oh, ok! I will definely check it out. I had to pause the project for a few days to work on something but I will get back to it. Thanks!