[examiner] Column for 'Instrument' in certification menu appears narrow

[SantiagoTG]

Describe the bug
In the 'Certification' page for a given examiner, the 'Instrument' column is very narrow and bundles the display of the instrument name, making the display of the information not optimal.

To Reproduce
Steps to reproduce the behavior (attach screenshots if applicable):

1. Go to the examiner module
2. Select an examiner to access the 'Certification' page
3. Text in 'Instrument' column is bundled as column width is too narrow.

What did you expect to happen?
An adequate column width would improve display of the table.

Browser Environment (please complete the following information):

• Chrome

[ridz1208]

@miladheshmati play with the CSS to make it readable

[miladheshmati]

This can be fixed by adding this class to bootstrap.min.css or main.css which are two CSS files used on that page. ( I didn’t know where to add it and I couldn't find any of those CSS files in the repository).

    @media (min-width: 992px) {
        form#edit_examiner .col-md-1 {
            width: 22%;
        }
    }

@ridz1208, I will be thankful if you can guide me with that.

[ridz1208]

@miladheshmati that is funny because I just might be the WORST person to ask for help when it comes to CSS.

That being said. Here is where I would start.

1. I would look first at what class is currently dictating the column width and where it is defined
2. I would see if that same class is being used for other forms, if yes, then modifying it might have undesired side effects, if not then you can just edit that to get it to work like you want it
3. if you need to create custom more specific css code, the bestplace to put it is in the module itself under a css directory (see example) and make sure to add the necessary getCSSDependencies to import the file when the module is loaded (example)

Anything beyond that, I might do more harm than good being involved with. @laemtl @zaliqarosli @CamilleBeau anyone of them might be more help than me

[zaliqarosli]

@miladheshmati the page is a smarty template so you can actually just tweak the div's class directly

Loris/modules/examiner/templates/form_editExaminer.tpl

Line 15 in 9286da1

<div class="col-md-1">

it uses the bootstrap grid system, you can widen the column by changing the col-md value

[laemtl]

@miladheshmati it's better to not modify bootstrap.min.css directly, since it is not maintained/authored by our team. The file htdocs/bootstrap/css/custom-css.css is where LORIS custom css rules are defined.
That being said, Zaliqa's suggestion is the best approach. Changing the class from col-md-1 to col-md-3 should solve this issue. Thanks for looking into this!

[miladheshmati]

Thank you all, @ridz1208, @laemtl, and @zaliqarosli.