dosubot[bot] commented on issue #28699:
URL: https://github.com/apache/superset/issues/28699#issuecomment-2129733407
<!-- Greeting -->
Hello @LucasSantosGuedes! I'm here to help you with your Superset issue. I'm
a bot designed to assist with bug solving, answering questions, and guiding
contributors. Let's tackle this together!
<!-- Answer -->
To create rows and columns in Apache Superset without encountering layout
issues when adding elements and their divisions, you can follow these key
practices:
1. **Use Flexbox for Layout**: Utilize the `GridContent` and `GridRow`
components, which use flexbox to manage the layout of rows and columns. This
ensures proper alignment and spacing of elements.
2. **Handle Component Drop Properly**: Implement the `handleComponentDrop`
function correctly to manage the addition of new components without breaking
the layout.
3. **Use Droppable Areas**: Define areas where new components can be dropped
using the `Droppable` component. This helps maintain the layout structure.
4. **Use Resizable Containers**: Ensure elements can be resized without
breaking the layout by using the `ResizableContainer` component.
5. **Implement Row and Column Components Properly**: Handle the layout of
children in `Row` and `Column` components, including managing empty states and
drop targets.
Here are some code snippets to illustrate these practices:
```jsx
const GridContent = styled.div`
display: flex;
flex-direction: column;
/* Additional styles */
`;
const GridRow = styled.div`
display: flex;
flex-direction: row;
/* Additional styles */
`;
handleTopDropTargetDrop(dropResult) {
if (dropResult) {
this.props.handleComponentDrop({
...dropResult,
destination: {
...dropResult.destination,
index: 0,
},
});
}
}
```
By following these practices, you can create stable rows and columns in
Apache Superset without encountering layout issues
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/DashboardGrid.jsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/gridComponents/Row.jsx)</sup><sup>[[4]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/gridComponents/Column.jsx)</sup>.
<!-- Dosu Comment Footer -->
<details open>
<summary>
#### Details
</summary>
**About Dosu**
This response is meant to be useful and save you time. It is **not meant to
be a precise solution**, but rather a starting point for your own research.
Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is
irrelevant.
</details>
*To continue the conversation, mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
