Select to view content in your preferred language

calcite-components: v1.5.1 is released on August 8

887
4
Jump to solution
08-12-2023 10:59 AM
ForrestLin
Frequent Contributor
0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

At this time there are no plans to document the above feature on the documentation site, as the feature supports a specific user workflow with CSS styling.

There will be more documentation in the upcoming summary notes in September 2023 to showcase feature updates. In between main releases, changelog updates reflect the changes between minor releases.

As far as the implementation, check out the following Codepen sample showing the newly supported functionality, where a Block can support scrolling using CSS styling, also depicted in the code below:

<style>
calcite-block {
  height: 450px; 
  overflow: hidden;
}

.scroll-block-container {
  height: 100%;
  overflow-y: scroll;
}
</style>

<calcite-block heading="Bear 🐻 Facts" open>
  <div class="scroll-block-container">
    <!-- Your content here -->
  </div>
</calcite-block>

 

View solution in original post

0 Kudos
4 Replies
KittyHurley
Esri Contributor

Thanks for reaching out, @ForrestLin. There was a delay in the documentation update, which is live today.

0 Kudos
ForrestLin
Frequent Contributor
  • block: Improve block's content layout to allow scrolling (#7367) (ecbf17b)

But there is no updates in the documentation.

0 Kudos
KittyHurley
Esri Contributor

At this time there are no plans to document the above feature on the documentation site, as the feature supports a specific user workflow with CSS styling.

There will be more documentation in the upcoming summary notes in September 2023 to showcase feature updates. In between main releases, changelog updates reflect the changes between minor releases.

As far as the implementation, check out the following Codepen sample showing the newly supported functionality, where a Block can support scrolling using CSS styling, also depicted in the code below:

<style>
calcite-block {
  height: 450px; 
  overflow: hidden;
}

.scroll-block-container {
  height: 100%;
  overflow-y: scroll;
}
</style>

<calcite-block heading="Bear 🐻 Facts" open>
  <div class="scroll-block-container">
    <!-- Your content here -->
  </div>
</calcite-block>

 

0 Kudos
ForrestLin
Frequent Contributor

There is big gap between two calcite-blocks. How to make the gap smaller?

ForrestLin_0-1692185847422.png

 

0 Kudos