CODEWITHSUNDEEP
css
CrystalGarnet
CrystalGarnet

Reputation: 119

Positioning a div within a parent div

I have a color_wheel element I'm trying to keep within the boundaries of the parent div (speech_bubble_middle_bar).

I know the correct way to do this is to have an absolute positioned div within a relative positioned div, so I tried creating a parent container. I've been unable to get ANY relative positioned divs to stay centered on the screen though, and when the div is absolute positioned I can't get it to stay within the constraints of the relatively positioned parent div.

This is what I have so far, could someone help me position this div so that it stays within the grey colored div? In my actual code I have some other elements within speech-bubble-middle-bar so I need to avoid changing that div in any way that would affect other elements, but I can create a container div for color_wheel if needed.

Here's a working code-pen with the full code: https://codepen.io/TheNomadicAspie/pen/dyWVLyx

<div id="speech_bubble_middle_bar" class="speech-bubble-middle-bar">
    <div id="color_wheel" class="color-wheel"></div>
</div>

.speech-bubble-middle-bar {
  grid-row: 2/3;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  height: 100%;
  background-color: grey;
}

.color-wheel {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

And this is how it looks now.

enter image description here

Upvotes: 1

Views: 50

Answers (1)

Auroratide
Auroratide

Reputation: 2577

This is tricky because two things seem to be in tension with one another:

  • On the one hand, you're trying to keep the entire layout to fit on the screen without scrolling. Because of this, everything is sized relative to the screen's height.
  • On the other hand, the Iro ColorPicker tool seems to be configured to have a hard width and height in pixels (I may be wrong, but that's what I got glancing at the Iro API). Because of this, the colorpicker's size is explicit and does not adapt to the screen nor parent height.

The colorpicker has a height greater than 300px. On some screens, the grey box will adaptively shrink to be less than 300px tall, and since the Iro Colorpicker tool is explicitly sized, it will not shrink and hence overflow out of the box. So, you have two options:

  1. Accept that the colorpicker is 300px tall and allow the grey box to naturally size itself according to its contents. Doing this may force you to accept that scrolling will happen if the content in the bubble is sufficiently large.
  2. Force the Colorpicker to adapt to the screen's size on creation by setting width as one of the options.

For example, option 2 can be accomplished rather cheaply using the following code, though perhaps you will need something more sophisticated.

var background_color_wheel = new iro.ColorPicker(color_wheel, {
  width: 0.12 * window.innerHeight // 12% of the window's height
})

The code is a bit complex for me to dive into the specifics on how to accomplish either option; ultimately, it's a compromise between a statically sized element and a flexibly sized layout.

There's also an option 3, which happens to be my favorite though admittedly far less flashy.

  1. The input tag can have type="color", which will open the user's native color picker. It's flexible, semantic, and accessible. See more on MDN: Input Color Type

Upvotes: 1

Related Questions