Styling Change to Flex

samples/react-kanban-board/config/package-solution.json

@@ -3,7 +3,7 @@
     "solution": {
         "name": "react-kanban-board-client-side-solution",
         "id": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
-        "version": "2.0.0.0",
+        "version": "1.0.1.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": true,
         "isDomainIsolated": false

samples/react-kanban-board/src/kanban/KanbanBucket.module.scss

@@ -1,11 +1,7 @@
 .bucket {
- 
-    
-   // border-right: 1px solid gray;
+    width: 100%;
+    // border-right: 1px solid gray;
     .headline {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         padding: 2px 10px;
         line-height: 2em;
         font-weight: 700;
@@ -13,6 +9,12 @@
         position: relative;
         text-align: center;
         border-bottom: 1px solid gray;
+        .headlineText{
+            width: calc( 100% - 10px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
         .colorindicator {
             width: 10px;
             height: 100%;
@@ -20,18 +22,20 @@
             top: 0;
             right: 0px;
         }
+        .processIndicatorHeight {
+            height: 18px;
+        }
     }
-    .taskArea{
+    .taskArea {
         padding: 5px;
     }
     .placeholder {
         position: relative;
-        
     }
     .taskplaceholder {
         position: relative;
-     background-color: transparent;
-     cursor: move;
+        background-color: transparent;
+        cursor: move;
     }
     /*
     .placeholder::after {
@@ -43,5 +47,4 @@
         background-color:blue;
     }
     */
-    
 }

samples/react-kanban-board/src/kanban/KanbanBucket.tsx

@@ -28,7 +28,7 @@ export interface IKanbanBucketProps extends IKanbanBucket {
     leavingTaskId?: string;
     leavingBucket?: string;
     overBucket?: string;
-
+    hasOneProcessIndicator: boolean;
     openDetails?: (taskId: string) => void;
 }
 
@@ -53,21 +53,18 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
     public render(): React.ReactElement<IKanbanBucketProps> {
         const { bucket, bucketheadline, color, buckettasks,
             tasksettings, percentageComplete,
-            allowAddTask, showPercentageHeadline, leavingTaskId, leavingBucket } = this.props;
+            allowAddTask, showPercentageHeadline, leavingTaskId, leavingBucket,hasOneProcessIndicator } = this.props;
 
         return (
             <div
-
                 className={styles.bucket}
-                key={bucket}
-
-            >
-                <div className={styles.headline}
-                 
-                >
-                    <span>{bucketheadline}</span>
+                key={bucket}>
+                <div className={styles.headline}>
+                    <div className={styles.headlineText}>{bucketheadline}</div>
                     {color && <div style={{ backgroundColor: color }} className={styles.colorindicator}></div>}
-                    {showPercentageHeadline && <ProgressIndicator percentComplete={percentageComplete / 100} />}
+                    {showPercentageHeadline ? 
+                    (<ProgressIndicator percentComplete={percentageComplete / 100} />):
+                    (hasOneProcessIndicator?(<div className={styles.processIndicatorHeight}></div>):(<div></div>))}
                 </div>
                 {allowAddTask && (<ActionButton
                     iconProps={{ iconName: 'Add' }}

samples/react-kanban-board/src/kanban/KanbanComponent.module.scss

@@ -1,9 +1,12 @@
 .kanbanBoard {
-    display: table;
+    display: flex;
     width: 100%;
     .bucketwrapper {
         border: 1px solid transparent;
-        display: table-cell;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        
       //  min-width: 220px;
     }
     .dragover {

samples/react-kanban-board/src/kanban/KanbanComponent.tsx

@@ -73,10 +73,8 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
         const { openDialog } = this.state;
         const bucketwidth: number = buckets.length > 0 ? 100 / buckets.length : 100;
         const { leavingBucket, leavingTaskId } = this.state;
-        const wrappedTaskActions: IKanbanBoardTaskActions = {
-
-        };
-
+const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).length >0;
+        
         return (
             <div style={{ overflowX: 'auto' }}>
                 {showCommandbar && <CommandBar
@@ -91,7 +89,12 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
                         buckets.map((b, i) => {
                             const merge = { ...b, ...this.state };
                             return (<div
-                                style={{ width: bucketwidth ? bucketwidth + '%' : '100%' }}
+                            
+                                style={{ 
+                                    flexBasis: bucketwidth ? bucketwidth + '%' : '100%' ,
+                                    maxWidth: bucketwidth ? bucketwidth + '%' : '100%'
+                                }}
+                                
                                 className={styles.bucketwrapper}
                                 ref={bucketContent => this.bucketsref[i] = bucketContent}
                                 key={'BucketWrapper' + b.bucket + i}
@@ -102,7 +105,7 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
                                 <KanbanBucket
                                     key={b.bucket}
                                     {...merge}
-                                  
+                                    hasOneProcessIndicator={hasprocessIndicator}
                                     buckettasks={tasks.filter((x) => x.bucket == b.bucket)}
                                     tasksettings={tasksettings}