html - HTML5 CSS Horizontally Scrolling multiple dynamic number of columns -

-

i having problem getting div scroll horizontally. div has dynamic number of columns can go on 100% width of page. currently, have total width set fixed px width (1500px) horizontal scrolling. however, number of columns dynamic, div should grow fit new columns in, , not hide new columns below div.

here fiddle of page stripped down: https://jsfiddle.net/razzledazzle/jpj2cuo7/5/ can see last input in column visible 'last 1 visible'. next column input 'new kanban list not visible'.

how can change div#board-container width 100% instead of 1500px , still scroll horizontally? it's similar layout trello or meistertask.

div#main-kanban {   top: 49px;   position: absolute;   bottom: 0;   right: 0;   left: 0;   bottom: 52px; }  div#content-kanban {   position: absolute;   left: 0;   right: 0px;   overflow: hidden;   height: 100%;   overflow-x: auto;   background: #e3e3e3; }  div#board-container {   width: 1500px;   top: 49px;   position: absolute;   height: 100%;   overflow: hidden; }  section#kanban-board {   top: 0;   bottom: 0;   right: 0;   left: 0;   position: absolute;   margin-bottom: 49px; }  div.kanban-individual {   display: inline-block;   vertical-align: top;   width: 320px;   overflow-y: scroll;   height: 100%;   float: left;   background-color: #e3e3e3;   cursor: pointer;   -webkit-transition: background 0.3s linear;   -moz-transition: background 0.3s linear;   -o-transition: background 0.3s linear;   -ms-transition: background 0.3s linear;   transition: background 0.3s linear; }

thanks @ketan , @carol mckay pointed me on right path. managed working needed setting height 100% , using display:flex on div#board-container.

here working fiddle

the working css:

div#main-kanban {     top: 49px;     position: absolute;      right: 0;     left: 0;     bottom:52px; }  div#content-kanban {     position: absolute;     left: 0;     right: 0px;     overflow: hidden;     height: 100%;     overflow-x: auto;     background: #e3e3e3; }  div#board-container {     width: 100%;     display: -webkit-box;      /* old - ios 6-, safari 3.1-6 */     display: -moz-box;         /* old - firefox 19- (buggy works) */     display: -ms-flexbox;      /* tweener - ie 10 */     display: -webkit-flex;      display:flex;     height:100%; }  section#kanban-board {     margin-bottom:49px;     display: -webkit-box;      /* old - ios 6-, safari 3.1-6 */     display: -moz-box;         /* old - firefox 19- (buggy works) */     display: -ms-flexbox;      /* tweener - ie 10 */     display: -webkit-flex;      display:flex; }  div.kanban-individual {     display: inline-block;     vertical-align: top;     width: 320px;     overflow-y: scroll;     float: left;         background-color: #e3e3e3;     cursor: pointer;     -webkit-transition: background 0.3s linear;     -moz-transition: background 0.3s linear;     -o-transition: background 0.3s linear;     -ms-transition: background 0.3s linear;     transition: background 0.3s linear; }

the concern have lack of browser compatibility ie 8-10 , older webkit browsers. i've added browser hacks per this page , still won't work right old ies.


Comments

Post a Comment

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

-
i trying display records table named staffpresentee database using clause... i using visual studio 2010... the table design follows- .......fieldname..................datatype........allownull 1......staff_id (fk).............numeric(18,0)......yes 2.......date........................date.............no 3......present.....................char(1)..........yes note type of 2nd field date , not datetime... i want display records table have today's date int 'date' field... current query is- cmd = new sqlclient.sqlcommand("select * staffpresentee date=" & date.now.date, cn) dr = cmd.executereader for dr = cmd.executereader error "operand type clash: date incompatible int" i tried select * staffpresentee query without clause runs correctly. try putting date value in sigle quotes maybe. cmd = new sqlclient.sqlcommand("select * staffpresentee date='" & _
Read more

SVG stroke-linecap doesn't work for circles in Firefox? -

-
i've got problem svg stroke-linecap attribute. i've got circular progress bar in angularjs , set outer circle (blue one) have rounded "ends". @ fiddle . <svg ... height="130" width="130"> <!-- ngif: background --> <circle ... ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" /> <!-- end ngif: background --> <circle ... fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)" /> </svg> how can that?
Read more

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -

-
here code im = cv2.imread('luffy.jpg') gray = cv2.cvtcolor(im,cv2.color_bgr2gray) ret,thresh = cv2.threshold(gray,127,255,0) contours,h = cv2.findcontours(thresh,cv2.retr_tree,cv2.chain_approx_simple) cnt in contours: moment = cv2.moments(cnt) c_y = moment['m10']/(moment['m00']+0.01) c_x = moment['m01']/(moment['m00']+0.01) centroid_color = im[c_x,c_y] centroid_color = np.array((centroid_color[0],centroid_color[1],centroid_color[2])) print type(centroid_color) cv2.fillpoly(im,cnt,centroid_color) i getting error on last line try , pass centroid_color color argument. <type 'numpy.ndarray'> , have been able pass data type cv2.fillpoly color in other instances, not sure why having problem here. fillpoly() expects iterable, i.e. put cnt in brackets. believe duplicate of https://stackoverflow.com/a/17582850/5818240 . moreover, centroid color variable contains strings. need convert them i
Read more