Does button_to add some y axis padding

[AppleII717]

I’ve been refactoring a Rails application that goes back 12+ years. I moved to Rail 7 and did a major revision a couple of years ago. I’m now in css hell. I’ve had css going back to Zurb foundation. That was removed but I still had a lot of W3-css and my own crap. I moved most of that to tailwind, but still have old css I’m trying to get rid of, or at least clean up.

I have all kind of buttons that I’m trying to make consistent - at least CRUD buttons. I finally figured out how to use tailwind components and added some simple buttons:

@layer components {
  .bg-green1 {
    @apply bg-green-400 hover:bg-green-700 hover:text-white  border-2 border-green-600   
  }
  .bg-orange1 {
    @apply bg-amber-400 hover:bg-amber-600 hover:text-white border-2 border-amber-600 
  }
  .bg-blue1 {
    @apply bg-blue-400 hover:bg-blue-700 hover:text-white border-2 border-blue-700 
  }
  .bg-red1 {
    @apply bg-red-500 border-2 border-red-600 hover:text-white  hover:bg-red-600   
  }

  .btn-link {
    @apply bg-green1 py-1 px-2 mr-1 rounded-md text-lg font-bold
  }
  .btn-send {
    @apply bg-blue1 py-1 px-2 mr-1 rounded-md text-lg font-bold
  }
  .btn-warn {
    @apply bg-orange1 py-1 px-2 mr-1 rounded-md text-lg font-bold
  }
  .btn-danger {
    @apply bg-red1 py-1 px-2 mr-1 rounded-md text-lg font-bold 
  }
}
 

That gave me consistent buttons than I could put in a menubar. (I use slim)

div.gap-4.m-1
  button[class="btn-link"] GreenComponent
  button[class="btn-send"] BlueComponent
  button[class="btn-warn"] OrangeComponent
  button[class="btn-danger"] RedComponent

Everything was fine except the hover colors were off. Took a day or so until I found some css where a button was classed:

button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
  filter: brightness(1.4);
  cursor: pointer;
}
 

Copied that from someplace and it was screwing up my buttons. Just commented it out. I also used span or mark instead of button. I then ran into my next problem: button_to

In had a destroyTag helper I added after they removed the ujs confirm tag. Rails 7 fixed that with adding a data attributes. So i replaced my destroyTag helper with a simple button_to that confirms.

button_to(icon("fas fa-trash","Destroy Incomplete Game"),
game_path(@game),
method: :delete,
form: { data: { turbo_confirm: "Are You Sure?"}},
form_class:"btn-danger inline-block ")

That almost worked! It rendered a btn-danger button but it had a larger y padding than the padding{py-1} I specified.

Another day of so trying to figure that out. I’ve come to the conclussion that button_to has some vertical padding added. It was easy to fix, just added py-0 to the end of the form class.

As you can probably tell, I’m not very proficient with css.

Anyone else run into this?

[Isikyus]

If button_to is adding extra vertical padding it’d have to add either inline CSS, or an extra class attribute, right?

Do you see either of those if you inspect the button in browser devtools?

[AppleII717]

It taken a while but I finally figured it out.

Your right, there is no extra css classes in the inspector but:

• button_to generates a form
• The form contains an html element button
• A button, at least on a mac using safari or firefox has a 5px vertical padding

I had used button a lot of my elements where I should of used a span or mark or some other element.

This stand-alone code (rails/slim)

div.gap-4.m-2
  div.font-bold button_to adds vertical padding of 5px because it contains a button
  - klass = " bg-red-500 hover:bg-red-400 hover:text-red-900 hover:opacity-90 border-2 border-red-700 py-1 px-2 mr-1 rounded-md text-lg font-bold cursor -pointer  "
  button.bg-red-400.mr-1 123456789
  span.bg-red-400.mr-1 123456789

  button[class="#{klass}"] test button
  span[class="#{klass}"] test button
  = button_to("test button_to","#",method: :delete,
    form_class:"#{klass} inline-block "  )
  = button_to("test button_to","#",method: :delete,
    form_class:"#{klass} inline-block py-0 "  )
  = button_to("btn-danger button_to","#",method: :delete,
    form_class:"btn-danger inline-block py-0 "  )

produces this screen shot

You can see that a button has more vertical padding than the span in the first four elements. The button_to helper always produces the extra padding.

Removing the py-1 gets the buttons size closer. Not sure why it didn’t work in my demo code for the next to last button. The last button uses my btn-danger component and gives me what I want.

Again, css is not one of my strong points!