I added this as a comment instead of an answer so here it is: I did a small test on my computer and see if removing ".col-md-12" from the %tr fixes the alignment issue.
Bootstrap 3 seems to justify table columns differently depending on the size of the field
-
16-07-2023 - |
Question
I have a simple table styled with bootstrap but for some reason it will use different justify depending on how long the fields are. There seems to be 2 different settings.
- If the line data is short, it will left justify right next to the first cell and keep both fields short.
- If the data is long, as in more than what would fit in one line, it will right block justify.
I wonder if there's a was to just chose #2 justify? I do have the entire table inside of a panel.
The code for just the panel-body looks like this, in HAML:
.panel-heading
%h3.panel-title Case Information
%table.panel-body.table
- unless current_user.one_user?
- unless current_user.another_user?
%tr.col-md-12
%th.col-md-3 Patient Name
%td.col-md-9= patient_full_name
%tr.col-md-12
%th.col-md-3 Patient Date of Birth
%td.col-md-9= patient_birthdate
%tr.col-md-12
%th.col-md-3 Patient Age
%td.col-md-9= patient_age
%tr.col-md-12
%th.col-md-3 Patient Gender
%td.col-md-9= patient_gender
-unless kase.medical_history.nil?
%tr.col-md-12
%th.col-md-3 Medical History
%td.col-md-9= simple_format medical_history
-unless kase.medications.nil?
%tr.col-md-12
%th.col-md-3 Medications
%td.col-md-9= simple_format medications
This is what it looks like with short data:
This is what it looks like with long data:
You notice that the long fields are in some sort of block justification? I would like the right table column to all line up as if they were all long data.
Any help would be appreciated.
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow