I can't add default div styling using React beautiful Dnd

Question

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

export default class Dashboard extends PureComponent {

state = {
alarmSubsections: ["AlarmNotification", "Overspeed", "HighTemperature", "Voltage"],
  };
componentDidMount() {
const { t, updateHeading } = this.props;
updateHeading(t('Dashboard'));
  }
onDragEnd = (result) => {
if (!result.destination) {
return;
    }

const { alarmSubsections } = this.state;
const reorderedAlarmSubsections = Array.from(alarmSubsections);
const [removed] = reorderedAlarmSubsections.splice(result.source.index, 1);
reorderedAlarmSubsections.splice(result.destination.index, 0, removed);

this.setState({ alarmSubsections: reorderedAlarmSubsections });
  };

render() {
const { alarmSubsections } = this.state;
return (
      <div className="feature-page">
HEALTH & ALARMS */}
        <Strike text="Health & Alarms" badgeClass="default" />
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="health_alarm_row" direction="horizontal">
            {(provided) => (
              <div
className="row mb-4 health_alarm_row"
                {...provided.droppableProps}
ref={provided.innerRef}
              >
                {alarmSubsections.map((subsection, index) => (
                  <Draggable
key={subsection}
draggableId={subsection}
index={index}
                  >
                    {(provided) => (
                      <div
ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
className="col-3"
                      >
                        {subsection === "AlarmNotification" && (
                          <AlarmNotification tileHeading="Alarm Notification" />
                        )}
                        {subsection === "Overspeed" && (
                          <Overspeed tileHeading="Over Speed Alarms" />
                        )}
                        {subsection === "HighTemperature" && (
                          <HighTemperature
tileHeading="High Temperature"
tileColor="red"
                          />
                        )}
                        {subsection === "Voltage" && (
                          <Voltage tileHeading="Voltage" tileColor="purple" />
                        )}
                      </div>
                    )}
                  </Draggable>
                ))}
              </div>
            )}
          </Droppable>
        </DragDropContext>

FLEET HEALTH */}
        <Strike text="Fleet" badgeClass="default" />
        <div className="row mb-4 fleet_row">
          <div className="col-3">
            <FleetHealth isCarousel={false} tileHeading="Fleet Health" tileImage="fleet" />
          </div>
          <div className="col-9">
            <TroubleCodes
tileHeading="Trouble Code Notification"
            />
          </div>
        </div>

MAINTENECE SECTION */}
        <Strike text="SERVICE ENTRY" badgeClass="default" className="health_alarm_heading" />
        <div className="row mb-4 maintenance_row">
          <div className="col-3">
            <OilRemaining tileHeading="Oil Remaining" tileImage="oil-change" />
          </div>
          <div className="col-9">
            <Maintenance tileHeading="Next Due Maintenance" />
          </div>
        </div>
      </div>
    );
  }
}

I want to add drag and drop functionality on all the inner sections such that the inner sections can drag and drop only inside the main section inside which they are present. The problem is that when i add the same functionality to all the section which I did for "Health & Alarms" the col properties dont work and styling just vanishes by contracting the divs. e.g styling collapses when I am implementing this logic as divs size dont adjust accordingly.

I can't add default div styling using React beautiful Dnd

0 Answers0