Suggestions to add custom css in Bahmni

Software Bahmni
1

Problem Statement: We implemented auto-complete feature using app.json for some concepts but all the text-boxes for those fields had fixed width which was hiding major portion of the selected option.

Solution: In order to solve this problem and make it generic for Bahmni we thought of following solution.

Create custom_css.css for all Bahmni apps and refer them in index.html of that app. This will allow us to extend current Bahmni UI as per the client requirement.

  • custom_css.css file created at path: /opt/bahmni-web/etc/bahmniapps/clinical
  • Referred the file in: /opt/bahmni-web/etc/bahmniapps/clinical/index.html.

After this line in index.html <link rel="stylesheet" href="./clinical.min.ece504c1.css"/>

Add line before closing head tag (</head>) <link rel="stylesheet" href="./custom_css.css"/>

  • Added code in Custom CSS custom_css.css file:
.ui-autocomplete-input{
    width: 30em !important;
}

Do you see any issues in the approach taken?

Before CSS changes:

Screen Shot 2017-10-09 at 3.16.11 PM.png886×267 22.1 KB

After CSS Changes:

Screen Shot 2017-10-09 at 3.17.54 PM.png1000×271 27 KB

2

Hi @ajeenckya,

I would welcome the idea, but I think that this customizable CSS file should be part of the Bahmni config. Look here how some JS resources can be provided through the Bahmni config. You could do the same with one or multiple custom CSS files.

I’m not sure about the naming (custom_css.css). Perhaps something like override.css would be more appropriate.

3

That sounds good @mksd. Yeah override.css is more appropriate. I will work on it and send the PR.

4

This one’s been assigned to you:

  • BAH-316: ‘Enable custom CSS override through the Bahmni config’
5

Thanks. Will take a look at it and update.