Changed css class name, avoid clash with bootstrap

[sesenion]

I am using a bootstrap based admin theme (django-jazzmin). The css class name form-row is already used in bootstrap, so the tabular inline looks completely screwed up. I was able to fix this by renaming the css class.

[jrief]

Just to understand it right, Bootstrap-4's

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$form-grid-gutter-width / 2;
  margin-left: -$form-grid-gutter-width / 2;

  > .col,
  > [class*="col-"] {
    padding-right: $form-grid-gutter-width / 2;
    padding-left: $form-grid-gutter-width / 2;
  }
}

overrides some styles in div.inline-group table.ui-sortable tr.form-row.has_original td.drag. Since the latter binds stronger, that should win against Bootstrap.

However the class form-row is from Django itself and used in quite a bunch auf Javascript functions in Django. I'm therefore reluctant to change this.

How about re-adding the style properties, which Bootstrap-4 overrides into that CSS block? Just use the inherit property to reset that overriding.

Interesting problem though!

[sesenion]

Ok. I understand why you are reluctant to change the class name. But I don't really understand your suggestion. I am sorry, I suppose my css knowledge is too basic.

[jrief]

Ok. I understand why you are reluctant to change the class name.

Yes, because Django uses that class name in various selectors inside JavaScript code, for instance here. By changing that name you will probably break some functionality.

Please read this: https://css-tricks.com/almanac/properties/a/all/ This could give you essential hints on how to solve your problem.

[sesenion]

The key point was resetting the display:flex property to display:table-row for all tr elements within the tabular inline. Checked the layout on original Django admin and with jazzmin theme active. Appears fine in both cases.

[jrief]

This change makes more sense.