activeadmin/activeadmin

Form tab menu items lack padding (4.0.0.beta7)

jaynetics opened this issue · 5 comments

jaynetics commented
Screenshot 2024-06-29 at 10 59 52

How to reproduce

form do |f|
  f.semantic_errors(*f.object.errors.attribute_names)
  tabs do
    tab('Tab 1') { f.input :title }
    tab('Tab 2') { f.input :title }
    tab('Tab 3') { f.input :title }
  end
  f.actions
end
javierjulio commented

@jaynetics sorry, the padding issue is not reproducible. While tabs do work within a form, I do not recommend using them there since it doesn't play too well in some cases like this one but instead of padding it gives the list style issue. Make sure your tabs are within a f.inputs do ... end block. Ideally, it would be best that you create your own tabs component for your specific needs. For now I intended to leave the Tabs component but I am considering removing it.

jaynetics commented

@javierjulio

thank you for your replies, and thumbs up for aiming to reduce the scope of the project!

i see you've already removed the section about tabs from the (future) forms documentation.

for anyone stumbling upon this, adding f.inputs at any level does not make a difference, but a quick workaround is:

tab 'My tab', { html_options: { style: 'margin: 0 16px 16px 0;' } } do
javierjulio commented

@jaynetics as I mentioned this isn't replicable. You haven't shown a way to reproduce this with our dev or demo app either. So it's more likely that you are encountering this only on your end. Are you sure you don't have some custom or cached CSS that is overriding the tab styles?

jaynetics commented

@javierjulio you're completely right. my css watch script didn't pick up the gem update from beta4 to beta7. sorry for the false alert. 🤦‍♂️

javierjulio commented

@jaynetics no worries. I knew it had to be that as I've had it happen to me before elsewhere. Sounded more plausible as the cause/reason.