[Feature]: Limit card height and add scrolling inside the card

Capaldi12 commented 2 years ago

Goal or desired outcome of this feature

When I add too much text to the card or include too big note/section, it stretches out and takes all screen height, pushing other cards out of the screen. It would be nice to have card just hide extra content under scrollbar so it does not take up all screen.

Describe the feature

My idea is to set limit to card height and hide overflow, and add scrollbar to view entire card contents. When editing card, it should open in full. Maybe also add some sort of a focus, so when card is in foucs, it's shown in full, and limited to set height otherwise.

Can you think of any alternatives or work-arounds?

It is possible to put all of this text to the note and just reference the not inside the card, but it's not ideal in some situations.

Screenshots, mockups, or videos

No response

huyz commented 2 years ago

Possible alternatives:

Fold all card content after the first line, leaving a triangle that can be clicked to expand the content.
Limit height (showing as much as the card content as will fit) and, if there's overflow, then display a "more..." link that when clicked makes the card take full height
hover to see popup with the rest of the card content

Rhydderch commented 2 years ago

I did this with a css snippet.

I guess this is the result you would like to get?

.kanban-plugin__lane-items>div {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right:3px;
    padding-left:3px;
}
div.markdown-preview-view.kanban-plugin__markdown-preview-view.kanban-plugin__item-markdown {
    max-height: 350px;
    overflow: scroll;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

div.markdown-preview-view.kanban-plugin__markdown-preview-view.kanban-plugin__item-markdown::-webkit-scrollbar {

}

.kanban-plugin__embed-link{
    margin:5px;
    z-index: 999;
    position:relative;
}

.markdown-preview-view .kanban-plugin__markdown-preview-view  > div:nth-child(2) > h1,
.markdown-preview-view .kanban-plugin__markdown-preview-view  > div:nth-child(2) > h2,
.markdown-preview-view .kanban-plugin__markdown-preview-view  > div:nth-child(2) > h3,
.markdown-preview-view .kanban-plugin__markdown-preview-view  > div:nth-child(2) > h4,
.markdown-preview-view .kanban-plugin__markdown-preview-view  > div:nth-child(2) > h5,
.markdown-preview-view .kanban-plugin__markdown-preview-view  > div:nth-child(2) > h6 { 
  /*display: none*/
}

.markdown-preview-view .markdown-embed-title {
    display: none;
  }

  .markdown-preview-view .markdown-embed h5 {
    display: none;
}

pryley commented 10 months ago

Once Obsidian updates Electron to v26 (Obsidian v1.5.3 uses Electron v25.8.1), it will be much easier to implement this properly with themes.

Electron v26 supports CSS scroll-driven animations which allows you do add CSS-only shadow indicators when scrolling inside a card like this:

https://github.com/mgmeyers/obsidian-kanban/assets/134939/815c6f8c-169e-4732-b615-608d4a0c6528

mgmeyers / obsidian-kanban