What causes the ellipsis icon to show up on a container's title?

What causes this to show up on a container title?

As you can see, I've customized the look of this header, but something about the style adjustments is causing this ellipsis to display.

image

hey @bstone! Are you using custom CSS to adjust those style properties? Or are you working with a custom component? I tested on my end and I wasn’t able to get the ellipsis to show up. Can you send over the style adjustments you applied?

hey again @bstone, I spoke with the team and it appears that this is a potential bug on our end. Resizing the container should get rid of the ellipsis. As far as repro steps, were there any specific steps or styles you applied to get that ellipsis?

I'll get this written up and sent over to our engineering team for prioritization! :slight_smile:

This is the CSS overrides I’m using:

/* BEGIN Sections */
.retool-widget[class*=' _retool-container-section']>.retool-container {
  background-color: #FAFAFA;
  border-radius: 2rem 2rem 0 0;
}
.retool-widget[class*=' _retool-container-section'] .retool-container-title-wrapper {
	font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  background-color: #0099CC;
  border: 0 solid #0099CC;
  border-radius: 5rem;
  color: #FFFFFF;
}
.retool-widget[class*=' _retool-container-section'] .retool-container-grid-wrapper.has-title {
  border: 0 solid #000000;
  border-radius: 0 0 0.35rem 0.35rem;
  background-color: #FAFAFA;
}
/* END Sections */

I also have these for global font/style that may also apply:

/* Root font size (what rem is based on) */
:root, body {
  font-size: 14px;
}

/* Root font family */
.retool-canvas {
	font-family: 'Source Sans Pro', sans-serif;
}
/* END Retool Global Styles