I'm trying to implement a collapsable sidebar and I want to have a circle with the username initials (pretty standard nowadays).

Currently I'm getting this jagged 'circle':

And this is the desired result:

I've been reading old questions (like this one) and their answers but I didn't find any solution.

LIVE JSFIDDLE DEMO

I guess something is wrong here:

.userInitials {
  height: 32px;
  width: 32px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: white;
  color: #193D4C;
}

Any help will be appreciated

CodePudding user response：

Yes, your circle element is being shrinked by the flex display. Use flex-shrink:0. Also you can set a display:flex and justify-content:center;align-items:center; to your element. Something like this:

.userInitials {
  height: 38px; /* increase height */
  flex-shrink:0; /* add property, value 0 so no srhink */
  display:flex;align-items:center;justify-content:center; /*center the initials */
  width: 38px; /* increase width */
  text-align: center;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: white;
  color: #193D4C;
}

CodePudding user response：

Try to set min and max width to 32px for .userInitials

Also I'd recommend to make some changes:

• modify the next div (the one after span):

align-items: flex-start !important; 
width: 100%;
justify-content: space-between;

• modify the div that holds the staff-name and staff-position:

width: 100%;

• modify the chevron:

remove margin-left or set it to a value between 3 and 10 px

Here is modified demo

I've added .staff-nav-holder to make it easier to modify. Hope it helped.

CodePudding user response：

did you try to make the border radius a px value, it usually works by using half the pixels you set the square to be.

in this case use border-radius: 16px