HTML Forms RefApp inputs can't span on the same line with their labels/units

Whereas the HTML forms display well in our developer lovely interface, they don’t seem to display more better through the http://github.com/openmrs/openmrs-module-htmlformentryui module. here is an example; Compare these two similar forms;

Legacy UI:

Ref App UI:

Has this been fixed? I mean has there been any recent cleaning of the rendering of these forms pages so as to resolve this as well as several mis-set labels and links!!! Or must i look into this and throw out a release that clears up things!

Is this of any value? [SOLVED] Styling HTML Form Entry Forms to match new Ref App UI Style Guide

Thanks @dkayiwa. Perfect answer as always.

You can see the vital form in the link that Daniel sent. Let me know if you want a screenshot.

Ellen

1 Like

from @dkayiwa’s link, i found https://github.com/PIH/openmrs-module-pihcore/blob/master/omod/src/main/webapp/resources/htmlforms/mentalHealth.xml whose style did no change for me, am i looking at the right page!

  1. For the radio buttons use answerSeparator="" to get them to behave

  2. Rather than use td tags for the checkboxes, try using spans and divs as per the example to get the styling right

Check out the vitals form in the reference application. I believe you can put class=“append-to-value” on the span for the units (which I think should go right after the span for the value).

-Darius

that doesn’t seem solve this issue for radio checkboxes/inputs

Forexample here is the final rendering by the reference application,

<span class="obs-field append-to-value"><input id="w6_0" name="w6" onclick=
    "radioClicked(this)" onmousedown="radioDown(this)" type="radio" value=
    "162930"><label for="w6_0">Vaudou</label>&nbsp;<input id="w6_1" name="w6"
    onclick="radioClicked(this)" onmousedown="radioDown(this)" type="radio"
    value="162931"><label for="w6_1">Catholique</label>&nbsp;<input id="w6_2"
    name="w6" onclick="radioClicked(this)" onmousedown="radioDown(this)" type=
    "radio" value="162932"><label for="w6_2">Baptiste</label>&nbsp;<input id=
    "w6_3" name="w6" onclick="radioClicked(this)" onmousedown="radioDown(this)"
    type="radio" value="162933"><label for=
    "w6_3">Musulman</label>&nbsp;<input id="w6_4" name="w6" onclick=
    "radioClicked(this)" onmousedown="radioDown(this)" type="radio" value=
    "162934"><label for="w6_4">Pentecôtiste</label>&nbsp;<input id="w6_5" name=
    "w6" onclick="radioClicked(this)" onmousedown="radioDown(this)" type=
    "radio" value="162935"><label for="w6_5">Adventiste</label>&nbsp;<input id=
    "w6_6" name="w6" onclick="radioClicked(this)" onmousedown="radioDown(this)"
    type="radio" value="162936"><label for="w6_6">Témoin de
    Jéhovah</label>&nbsp;<input id="w6_7" name="w6" onclick=
    "radioClicked(this)" onmousedown="radioDown(this)" type="radio" value=
    "163098"><label for="w6_7">Bouddhisme</label>&nbsp;<input id="w6_8" name=
    "w6" onclick="radioClicked(this)" onmousedown="radioDown(this)" type=
    "radio" value="163125"><label for="w6_8">Christianisme
    (non-catholique)</label>&nbsp;<input id="w6_9" name="w6" onclick=
    "radioClicked(this)" onmousedown="radioDown(this)" type="radio" value=
    "163124"><label for="w6_9">Hindouisme</label> <span class=
    "error field-error" id="w5" style="display: none"></span></span> 

hacking out a fix nw

looks like those &nbsp cause this slight deviation, tried to crack it but it did not come out as perfect as i wanted but somehow better with this; Include this js hack in the form

<script type="text/javascript">
	jQuery.fn.cleanWhitespace = function() {
    	textNodes = this.contents().filter(
        	function() { return (this.nodeType &#61;&#61; 3 &amp;&amp; !/\S/.test(this.nodeValue)); })
        	.remove();
    	return this;
	}

	jQuery(function() {
		jQuery(".section").cleanWhitespace();
	});
</script>

I just had to hack it from effect and not cause since i had no clue what causes it only for radio input types but am definitely writing a better sharable fix

@darius, am having my radio inputs generated by this line for-example; either class=“append-to-value” or answerSeparator="" can’t help

Groupe sanguin :<obs conceptId="CIEL:300" answerConceptIds="CIEL:690,CIEL:692,CIEL:694,CIEL:696,CIEL:699,CIEL:701,CIEL:1230,CIEL:1231,CIEL:1107" answerLabels="A+,A-,B+,B-,O+,O-,AB+,AB-,Inconnu" style="radio"/> 

which i want to look have everything on the same line like;

@craigappl mentioned something about this at

although tricking it from that perspective with something like;

input[type="radio"] ~ label {
     margin-top: -22px;
}

looks still problematic hate to hack it in a weird way rather than an accepted general throughout solution

Hi,

It has to do with a couple CSS attributes on both the form and the label. If you dig into the java console in Chrome, you can see the css attributes “float: left” and “display: block” This causes each question in the UI to display one row for each the radio button and the label.

Here’s the chrome console:

On the right side, you can see the CSS with “float:left” causing the input to align to the left.

Here’s the chrome console for the label:

You can see the “display:block” properties on the label causing it to jump down to the next line.

To fix it, you need to remove the “float:left” on the input and add/change the display to display:inline-block.

Fixed Input:

Fixed Label:

Screenshot of form:

I don’t know if you can add style=“display:inline-block;float:none;” in the HTML form or if it should be fixed in the referenceapplication.css file.

1 Like

thanks Craig, https://github.com/IsantePlus/openmrs-module-isantepluspatientdashboard/commit/a7f12bcc1d6320d37d2d9fb45853f9aa7795b218

Hi Everyone to close the loop, we added a style to the HTML form:

<style>
form input[type="checkbox"], form input[type="radio"], .form input[type="checkbox"], .form input[type="radio"] {
	float: none;
	display: inline-block;
	}
	
	form label, .form label {
		display: inline-block;
	}
</style>

Should this be incorporated into the Reference Application’s CSS file?

2 Likes

@craigappl is it possible to qualify a class for this horizontal flow, probably “inline”, for the inputs so that it is an option rather than the default? As some forms may need to have a combination of this and the current vertical display

Thank you very much for this. it was really helpful