CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jerrythomas38
jerrythomas38

Reputation: 769

HTML CSS: Button- Wrap Container Directly Around it

How do I wrap these boxes directly around the button? Right now I getting these horizontal long boxes spacing. I want to wrap directly around the bell button. This way user cannot utilize button without directly touching it. Using Chrome inspector, ctrl-shift-i

Currently using text-align center, display:flex, align-items: center, justify-content: center, and its still not working. Red box below is ideal around

enter image description here

.grid-container.toolsetbutton {
    display: grid;
    grid-template-columns: repeat(1, 100px);
    grid-template-rows: repeat(2, 100px);
    grid-gap: 1px;
    padding: 0px;
    align-items: center;
}


.mdc-button.toolsetbutton {
    background:transparent;
    border:none;
}


.material-icons.mdc-button__icon.toolsetbutton {
    text-align: center;
    background:transparent;
    border:none;
    display:flex;
    border:none;
    align-items: center;
    justify-content: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="grid-container toolsetbutton">
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">notifications</i>
  </button>
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">delete</i>
  </button>
</div>

Upvotes: 0

Views: 1216

Answers (1)

Chris W.
Chris W.

Reputation: 23280

So if I'm understanding your intent correctly, just need to override the left/right margins with auto as shown. However, I'd advise you to not use your selectors in such a way as you do with all the .blah.blah.toolsetbutton stuff as the order of inception you're currently implementing will only become less performant and more difficult to maintain the more the it's propagated within a project.

Anyway, hope this helps, cheers!

.grid-container.toolsetbutton {
    display: grid;
    grid-template-columns: repeat(1, 100px);
    grid-template-rows: repeat(2, 100px);
    grid-gap: 1px;
    padding: 0px;
    align-items: center;
}


.mdc-button.toolsetbutton {
    background:transparent;    
    /*border:none; - removed so there's a visual aid of hit area */
        
    margin: 0 auto;
    padding: 0;
}


.material-icons.mdc-button__icon.toolsetbutton {
    text-align: center;
    background:transparent;
    border:none;
    display:flex;
    border:none;
    align-items: center;
    justify-content: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="grid-container toolsetbutton">
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">notifications</i>
  </button>
  <button class="mdc-button toolsetbutton">
    <i class="material-icons mdc-button__icon toolsetbutton">delete</i>
  </button>
</div>

So as requested, here's another approach more aligned with how I'd probably accomplish the same personally. Reasoning being that since HTML doesn't minify; well I'd rather write a tiny bit more CSS, and far less HTML over and over. This helps a lot with rendering speed and file sizes for less traffic on the wire. Anyway, a quick PoC learning example since we've all been there is below. Feel free to remove the tooltips and tinker obviously. Also I wouldn't use grid at all in this scenario in lieu of good 'ol box model instead. Have a great weekend!

.btn-grid-container {
  display: grid;
  grid-template-columns: repeat(1, 100px);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 1px;
}

.btn-grid-container > button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: 2rem;
  margin: auto;
  padding: 0;
}

.btn-grid-container > button:before {
  font-family: 'Material Icons';
  content: attr(data-icon);
  border-radius: 6px;
  border: transparent 1px solid;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.btn-grid-container button:hover:before, .btn-grid-container button:focus:before {
  color: green;
  border-color: green;
  background-color: rgba(0,255,0,.1);  
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="btn-grid-container">
  <button data-icon="&#xe7f4;" title="Notifications"></button>
  <button data-icon="&#xe872;" title="Delete"></button>
</div>

Upvotes: 3

Related Questions