We've moved discussions to Discord We've moved discussions to Discord!

Issue Positioning Buttons, Some with Outline, Some Not

Jason Ackerman • October 15, 2020 6:08pm

I am having a strange issue with these buttons. Whenever I apply the outline class to the button it shifts it up by a pixel or two and it doesn't line up with the other non-outline buttons, as seen here (the border is just there to make this issue clear):

Screen Shot 2020-10-15 at 2.05.03 PM.png 16.1 KB

Here's the code:

<div id="entities-table-header-button-container" class="border border-black">
  <%= link_to 'New Entity', new_entity_path, class: "btn btn-primary" %>
  <button class="btn btn-danger outline" data-action="click->checkbox#destroyMultiple" >Batch Delete</button>
   <button class="btn btn-primary" data-action="click->checkbox#toggleTagInputField" >Add/Remove Tags</button>
</div>

Anyone have any ideas on this? Adding mt-1, -mt-1, mb-1, and -mb-1 doesn't help, it just moves all three buttons up or down. Thanks!

Note - it definitely seems related to the outline class, because when I remove it they all line up fine.

Even stranger, it actually lines up correctly in production (on Heroku). Maybe I should just ignore it?

Chris Oliver • October 22, 2020 9:23pm

Good question. I will have to play with that.

I guess the outline should not affect the size of the element according to this:

Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Jason Ackerman • October 27, 2020 9:30pm

Thanks Chris!

My Discussions Participating All Discussions

Notifications

You’re not receiving notifications from this thread.