Chris Bolson Comments - Answer Overflow

Chris Bolson

•Created by HansM on 4/29/2025 in #help

Setting overflow on child cuts off content and removes scroll behavior of nested grid

Try swapping overflow-x: hidden; with overflow-x: clip; on your .InnerGrid:last-child span. That gets the scroll back on the parent container but I can't see any elpises so I might be missing something 🤔

3 replies

KPCKevin Powell - Community

•Created by the_paras on 4/29/2025 in #help

CSS Vertical Text Alignment

you could also use align-content: center without having to define the display but that may not work on all browsers yet.

6 replies

KPCKevin Powell - Community

•Created by the_paras on 4/29/2025 in #help

CSS Vertical Text Alignment

you could remove the padding on the li and use grid (or flex) on the li items themselves.

.nav2 li {
  display: grid;
  place-content: center;
  
  font-size: 1em;
  background-color: #0F0F0F;
  border-radius: .25em;
  box-sizing: border-box;
  margin: 3%;
  /*padding: 1em 0em 0em 0em;*/
  /*line-height: 3em;*/
  height: 5em;
  width: 5em;
  color: #ffffff;
}

.nav2 li {
  display: grid;
  place-content: center;
  
  font-size: 1em;
  background-color: #0F0F0F;
  border-radius: .25em;
  box-sizing: border-box;
  margin: 3%;
  /*padding: 1em 0em 0em 0em;*/
  /*line-height: 3em;*/
  height: 5em;
  width: 5em;
  color: #ffffff;
}

6 replies

KPCKevin Powell - Community

•Created by corizon. on 4/21/2025 in #help

Implementing a loader animation

It might be a good idea to share what you have so far to give somebody who knows gasp something to start with so as to be able to help you.

4 replies

KPCKevin Powell - Community

•Created by Becii on 4/19/2025 in #help

Display none isn't working as intended

By page flip I presume you are referring to the pagination? Your updatePages() function (which is called after every button action) is not takling into account the current display value of each of the items. It is simply defining "flex" or "none" depening on the current page view. So, even though you have set "show open", the updatePages is overriding that. You either need a way to track the items open or closed state separately or you need to get the items' current checked radio button. Maybe a single checkbox would be better than 2 radio buttons in this case?

7 replies

KPCKevin Powell - Community

•Created by omar_ab(@om4rAb) on 4/17/2025 in #help

Can't give a background color to the image

It was Epics suggestion. I just threw a demo together.

34 replies

KPCKevin Powell - Community

•Created by omar_ab(@om4rAb) on 4/17/2025 in #help

Can't give a background color to the image

You don’t need 2 images. Just your image and a linear-gradient with a semi transparent color. https://codepen.io/cbolson/pen/wBBvGXV

34 replies

KPCKevin Powell - Community

•Created by omar_ab(@om4rAb) on 4/17/2025 in #help

Can't give a background color to the image

The double background image as suggested by Epic is probably the easiest solution.

34 replies

KPCKevin Powell - Community

•Created by vince on 4/17/2025 in #help

Creating curved text

with an SVG you can alter the text start position with startOffset="70px" (px or %)

9 replies

KPCKevin Powell - Community

•Created by vince on 4/17/2025 in #help

Creating curved text

I would have thought that you are going to be hard-pushed to find something more suited to this than an SVG. When placing text along a curve you are always going to have to play with the font-size and start position

9 replies

KPCKevin Powell - Community

•Created by omar_ab(@om4rAb) on 4/17/2025 in #help

Can't give a background color to the image

thats a good idea and works well, thanks!

34 replies

KPCKevin Powell - Community

•Created by omar_ab(@om4rAb) on 4/17/2025 in #help

Can't give a background color to the image

background-color won't affect the image in any way. It will only work if the image itself has some opacity and the background-color is allowed to show through. Unfortunately it is not possible to set opacity directly on the background image. You could try using blend-mode: background-blend-mode: lighten; but that might work or be enough for your needs. Alteratively you could add the image via a pseudo element, placing it above the background but behind the content and give it (the pseudo element) an opacity.

34 replies

KPCKevin Powell - Community

•Created by depthark on 4/11/2025 in #help

Animated details element using ::details-content

transition: height linear 0.3s, padding-block linear 0.3s,content-visibility linear 0.3s;
transition-behavior: allow-discrete;

transition: height linear 0.3s, padding-block linear 0.3s,content-visibility linear 0.3s;
transition-behavior: allow-discrete;

4 replies

KPCKevin Powell - Community

•Created by depthark on 4/11/2025 in #help

Animated details element using ::details-content

Try adding content-visibility to your transition properties (and allow-discrete)

4 replies

KPCKevin Powell - Community

•Created by Wonderbear on 4/10/2025 in #help

Clickable areas on image

focus is for form elements (and a couple of other elements such as links and iframes). If they took the focus that would mean a double focus for the same element (the label and the related form field). I don't quite understand why you want them to get focus in your use case 🤔

103 replies

KPCKevin Powell - Community

•Created by Wonderbear on 4/10/2025 in #help

Clickable areas on image

Can the image not be converted into an SVG? Judging from the small screen capture your provided earlier it looks like a drawing.

103 replies

KPCKevin Powell - Community

•Created by Wonderbear on 4/10/2025 in #help

Clickable areas on image

In that case you “could” use a button (or, better still, a checkbox)

103 replies

KPCKevin Powell - Community