CSS Classes not working with Bootstrap 4

[nynhex]

I've started implementing Reportskit in a Rails 5.1.4 app and it's pretty awesome. The only problem I'm having is with the SASS/CSS which seems to be colliding with bootstrap's SCSS/CSS

I've created a simple chart filtering by date and a unit (ambulance). This is what my screen output looks like:

I tried to add the bootstrap form-control class to each filter input but it ended up disabling them. Is there something special I need to do with bootstrap to get the charts to look like the examples on the reportskit website? Also the chart displays very small, so I think this is also a CSS issue.

Thanks in advance!

[kirantpatil]

Hi,

I am having the issue but with "patternfly-sass 3.31.1".

Please find the below screenshot. How to resolve it ?

[kirantpatil]

Hi,

I added the report to empty (index.html.erb) page and now it is occupying the whole page as below which is 80% and if I zoom browser to 90% then I need to scroll down to view the CSV and Excel download buttons.

Edit: How to resize it to fit it in half page ?

[kirantpatil]

I used below code to make it resize. Thanks.

<div class="col-sm-6">
<%= render_report 'data_overview' %>
</div>

[nynhex]

I'm still having the same problems with bootstrap and reportskit sass. I'm considering writing my own SCSS to deal with the issues of the two libraries clobbering. Would a PR be accepted if so?

[valinaga]

this was my take on css with bootstrap4

.reports_kit_visualization {
  padding: 1px 3.5rem;
}

.reports_kit_report .reports_kit_actions>a {
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 6px 12px;
}

.reports_kit_report.form-inline {
  display: block !important;
}
.reports_kit_report .reports_kit_report_form {
  margin-bottom: 24px;
  display: block;
}

.pull-right {
  float: right !important;
}

.reports_kit_report .form-control {
  font-size: .8rem;
  line-height: 1;
  padding: 0.5rem;
}

.reports_kit_report .select2-search__field {
    font-size: .8rem;
    padding: 0;
}