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

k.joseph · September 4, 2016, 6:22pm

Whereas the HTML forms display well in our developer lovely interface, they don’t seem to display more better through the GitHub - openmrs/openmrs-module-htmlformentryui: Integration between the HTML Form Entry and UI Framework modules 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!

dkayiwa · September 4, 2016, 7:14pm

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

ball · September 4, 2016, 9:29pm

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

k.joseph · September 5, 2016, 2:22am

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!

ssmusoke · September 5, 2016, 1:30pm

For the radio buttons use answerSeparator="" to get them to behave
Rather than use td tags for the checkboxes, try using spans and divs as per the example to get the styling right

darius · September 6, 2016, 4:33am

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

k.joseph · September 8, 2016, 7:02pm

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

k.joseph · September 8, 2016, 8:57pm

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

k.joseph · September 18, 2016, 5:16pm

@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 https://issues.openmrs.org/browse/RA-1238 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

craigappl · September 19, 2016, 11:46pm

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.

k.joseph · September 20, 2016, 4:42pm

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

craigappl · September 23, 2016, 12:29am

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?

ssmusoke · October 1, 2016, 5:39pm

@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

smarthech · September 12, 2021, 10:07am

craigappl:

<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>

Thank you very much for this. it was really helpful