A CSS hack which creates a Kanban-like board UI in a specified list:
A CSS hack which creates a Kanban-like board UI in a specified list:
#list_481388 ul.topLevel {
display: flex;
}
#list_481388 ul.topLevel > li {
flex: 1 1 auto;
}
#list_481388 ul.topLevel > li > .frame{
display: none;
}
#parentTask_0 div.coreDiv {
margin-right: 20px;
}
May be, will be useful to someone :)
An adaptation of this that allows you display any set of tasks horizontally (as in the example above) by adding a #_horizontal tag to the parent task.
ReplyDeleteUseful for content inventories.
(Note: Horizontal items will not expand/contract, but the children of these items that are displayed as lists will.)
ul.topLevel {
display: flex;
}
.tag__horizontal + ul.dndUl {
display: flex;
}
ul.topLevel li {
flex: 1 1 auto;
border:1px solid #eee; /* Optional. Helps show the overall structure */
}
ul.topLevel li > .frame{
display: none;
}
#parentTask_0 div.coreDiv {
margin-right: 20px;
}
Rebecca O'Connell I have tried this in a list, and it does not seem to be working for me. Perhaps I misunderstand something - :^)
ReplyDeleteCan you share an actual example with us? Sorry I am so uninformed in CSS, but this looks like it could be very helpful.
Jim McGuire, did you tag the parent item with _horizontal tag?
ReplyDeleteRebecca O'Connell, doing this applies it to all lists. Is it possible to restrict the entire effect to only children of _horizontal, and leave everything else as it is?
ishan chhabra, I did... but I just tried again, and it does indeed work. I must have let a typo creep in during my first try. Thanks for trying to help.
ReplyDeleteAnd Rebecca O'Connell, thanks for the very nice tip!
ishan chhabra I think the ul.topLevel rule is causing the undesired behavior. Try the code below, with the rule removed:
ReplyDelete.tag__horizontal + ul.dndUl {
display: flex;
}
ul.dnl {
/*
overflow:auto;
This would create a horzontal scrollbar at the bottom of this set of items when the horizontal items are wider than the content block. Without it, the content is forced out of the content block, and a scrollbar appears at the bottom of the screen */
}
ul.topLevel li {
flex: 1 1 auto;
border: 1px solid #eee;
/* Optional. Helps show the overall structure */
border-right:none;
/* Also optional. Removing the right border keeps it from drawing a line through items that are horizontally displayed within the li. Can be removed if you use ul.dnl {overflow:auto} (see above) */
}
ul.topLevel li > .frame {
display: none;
}
#parentTask_0 div.coreDiv {
margin-right: 20px;
}
Kirill Maximov should the CSS for the kanban organization of lists still work? I've copied the CSS and updated the list ID to the list I want to apply the CSS to, but it isn't working.
ReplyDeleteBrian Tait It should work. Try shift+refreshing the page, may be some caching prevents it from showing correctly.
ReplyDelete