KPC
Kevin Powell - Community•2w ago
edisa256

Circular element overflow issue

this was my idea. to have the menu with a circular border. However, the text e.g "Create vendor account", spills out of the circle despite using a padding. kindly guide my approach. 
 <div className="PageMenuItemContainer">
      <div className="Menu-Item-Content">
          <p>{icon}</p>
          <p>{menu_text}</p>
      </div>          
</div>
 <div className="PageMenuItemContainer">
      <div className="Menu-Item-Content">
          <p>{icon}</p>
          <p>{menu_text}</p>
      </div>          
</div>
.PageMenuItemContainer {
    border: 0.5px solid white;
    border-radius: 50%;
    padding: 10%;
    width: 4%;
    height: 5%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    transition: transform 0.3s; /* Smooth hover effect */
  background-color:aqua;
}

.PageMenuItemContainer:hover{
    transform:scale(1.1);
}

.Menu-Item-Content {
    height: 90%;
    width: 90%; /* Content width as a percentage of the parent */
    text-align: center;
    padding: 0% 0% 70% 0%; 
    color: white;
    font-size: 90%;
}
.PageMenuItemContainer {
    border: 0.5px solid white;
    border-radius: 50%;
    padding: 10%;
    width: 4%;
    height: 5%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    transition: transform 0.3s; /* Smooth hover effect */
  background-color:aqua;
}

.PageMenuItemContainer:hover{
    transform:scale(1.1);
}

.Menu-Item-Content {
    height: 90%;
    width: 90%; /* Content width as a percentage of the parent */
    text-align: center;
    padding: 0% 0% 70% 0%; 
    color: white;
    font-size: 90%;
}
it doesn't show well in the codepen but here's the result
No description
No description
3 Replies
Chris Bolson
Chris Bolson•2w ago
A few things here. 1. For the container to be a circle, you need to set the width and height to be the same. You can use aspect-ratio: 1 /1; to create a square (and then the border-radius you have to convert it into a circle) but this may be forced by the content so, at least in this case, is possibly not the best option. 2. Likewise for the padding on the container. Using a percentage is not the best option. A fixed value is generally better. You can use em if you want the padding to be relevant to the font size. 3. On the child element you have defined both a width and a height. You really don't need these. The width will automatically be 100% of the parent (taking into account the padding) and the height should really adjust to the value automatically defined by the content (see below). 4. The padding on the child element is really messing things up. Why have you set 70% on the bottom padding? I would suggest not setting any padding on this element, set the padding on the parent element. By default, elements will extend the height according to their content. However, if you define a fixed height, the content will overflow outside of the container (unless you define overflow:hidden/clip, in which case the "extra" content will be hidden).
This is obviously an issue when defining a circle as, as we have seen, the height has to be fixed to the width so that they remain the same. We therefore do have to be more careful about the positioning, sizing etc of the content so as not to overflow (as you are experiencing). To achieve this you will need to play around with the size of your icon, the font size and padding to get this to fit within the bounds of the circle. All this taking into account that you may have more than just one of these and the texts may be longer or shorter. In this case I would probably start by defining the exact size of the circle and adjust the content sizes (icon and font-size) to fit within the circle. Aside: It is best to use a descriptive title on the posts - something which summarises your issue. If you have a Codepen, as you indicate in your post, it would be helpful to link to it to help see what you currently have.
Chris Bolson
Chris Bolson•2w ago
5. Bear in mind that some elements, eg <p> have default margins. You may have removed/adjusted this elsewhere in your code but this may also be a factor when using it within your component. Based on your code I have made a Codepen where I have addressed some of the issues (I will delete this later). I may well do things differently but this has some quick fixes. https://codepen.io/cbolson/pen/yyLWZrE
Chris Bolson
CodePen
Untitled
...
edisa256
edisa256OP•2w ago
Thank you so much @Chris and @13eck ! Thank you! It's been very insightful

Did you find this page helpful?