Joomla! Issue Tracker | Joomla! CMS #27226 - Form element classes don't honor class

Closed
9 Dec 2019
Medium
Build: staging
# 27226

N6REJ
8 Dec 2019

Steps to reproduce the issue

create the subform

<fieldset name = "acorn_TYPOGRAPHY">
                <field
                        name = "typography"
                        type = "subform"
                        label = "TPL_ACORN_TYPOGRAPHY_SUBFORM_LABEL"
                        description = "TPL_ACORN_TYPOGRAPHY_SUBFORM_DESC"
                        multiple = "true"
                        min = "1"
                        max = "6"
                        groupByFieldset = "true"
                        layout = "joomla.form.field.subform.repeatable"
                >
                    <form>
                        <fieldset name = "typography_H_element_section"
                                  label = "TPL_ACORN_TYPOGRAPHY_H_SUBFORM_SELECT"
                        >
                            <field
                                    name = "typographyElement"
                                    type = "headertag"
                                    class="tiny-input"
                                    default="h3"
                                    label = "TPL_ACORN_TYPOGRAPHY_SUBFORM_ELEMENT"
                                    description = "TPL_ACORN_NO_DESC"
                            >
                            </field>
                            <field
                                    name = "typographyFont"
                                    type = "text"
                                    class = "small-input"
                                    label = "TPL_ACORN_FONT_NAME_LABEL"
                                    description = "TPL_ACORN_FONT_NAME_DESC"
                            />
                            <field
                                    name = "typographyColor"
                                    type = "color"
                                    class = "small-input"
                                    label = "TPL_ACORN_TEXT_COLOR_LABEL"
                                    description = "TPL_ACORN_NO_DESC"
                            />
                            <field
                                    name = "typographyfontSize"
                                    type = "text"
                                    class = "tiny-input"
                                    label = "TPL_ACORN_FONT_SIZE"
                                    description = "TPL_ACORN_NO_DESC"
                            />
                            <field
                                    name = "typographyMargin"
                                    type = "text"
                                    class = "tiny-input"
                                    label = "TPL_ACORN_MARGIN_LABEL"
                                    description = "TPL_ACORN_NO_DESC"
                            />
                            <field
                                    name = "typographyPadding"
                                    type = "small"
                                    class = "tiny-input"
                                    label = "TPL_ACORN_PADDING_LABEL"
                                    description = "TPL_ACORN_NO_DESC"
                            />
                        </fieldset>
                    </form>
                </field>
            </fieldset>

change class on element and font from tiny-input to small-input and visa versa

Expected result

tiny class fields have tiny input boxes
small have slightly larger

Actual result

System information (as much as possible)

systeminfo-2019-12-08T00_05_55+00_00.txt

Additional comments

N6REJ - open - 8 Dec 2019

joomla-cms-bot - change - 8 Dec 2019

Labels

Added: ?

joomla-cms-bot - labeled - 8 Dec 2019

SharkyKZ - comment - 8 Dec 2019

tiny-input and small-input classes don't exist in J3. Can you test with default template?

Classes are applied to all mentioned field types. Only color field width can't be controlled because it has CSS for that in media/jui/css/jquery.minicolors.min.css. You can override this file in your template.

mbabker - comment - 8 Dec 2019

If you're going to include screenshots then the raw HTML would be something to include here. Showing the rendered page next to a Joomla form XML does nothing useful.

N6REJ - comment - 9 Dec 2019

@mbabker here you go, looks like a div is missing at subformT?

<div id="attrib-acorn_TYPOGRAPHY" class="tab-pane active">
<div class="control-group">
			<div class="control-label"><label id="jform_params_typography-lbl" for="jform_params_typography" class="hasPopover" title="" data-content="Any styling you wish can be put here, just let me know" data-original-title="Typography styling">
	Typography styling</label>
</div>
		<div class="controls"><input name="jform[params][typography]" type="hidden" value="">
<div class="row-fluid">
	<div class="subform-repeatable-wrapper subform-layout">
		<div class="subform-repeatable ui-sortable" data-bt-add="a.group-add-sr-0" data-bt-remove="a.group-remove-sr-0" data-bt-move="a.group-move-sr-0" data-repeatable-element="div.subform-repeatable-group-sr-0" data-minimum="1" data-maximum="6">

						<div class="btn-toolbar">
				<div class="btn-group">
					<a class="btn btn-mini button btn-success group-add group-add-sr-0" aria-label="Add">
						<span class="icon-plus" aria-hidden="true"></span>
					</a>
				</div>
			</div>
					
<div class="subform-repeatable-group subform-repeatable-group-sr-0" data-base-name="typography" data-group="typography0">
		<div class="btn-toolbar text-right">
		<div class="btn-group">
							<a class="btn btn-mini button btn-success group-add group-add-sr-0" aria-label="Add">
					<span class="icon-plus" aria-hidden="true"></span>
				</a>
										<a class="btn btn-mini button btn-danger group-remove group-remove-sr-0" aria-label="Remove">
					<span class="icon-minus" aria-hidden="true"></span>
				</a>
										<a class="btn btn-mini button btn-primary group-move group-move-sr-0" aria-label="Move">
					<span class="icon-move" aria-hidden="true"></span>
				</a>
					</div>
	</div>
		<div class="row-fluid">
<fieldset class="">
		<legend>Typography Elements</legend>
		<div class="control-group">
			<div class="control-label"><label id="jform_params__typography__typography0__typographyElement-lbl" for="jform_params__typography__typography0__typographyElement">
	Element:</label>
</div>
		<div class="controls"><select id="jform_params__typography__typography0__typographyElement" name="jform[params][typography][typography0][typographyElement]" class="small-input" style="display: none;">
	<option value="h1">h1</option>
	<option value="h2">h2</option>
	<option value="h3" selected="selected">h3</option>
	<option value="h4">h4</option>
	<option value="h5">h5</option>
	<option value="h6">h6</option>
	<option value="p">p</option>
	<option value="div">div</option>
</select><div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="jform_params__typography__typography0__typographyElement_chzn"><a class="chzn-single"><span>h3</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chzn-results"></ul></div></div>
</div>
</div>
	<div class="control-group">
			<div class="control-label"><label id="jform_params__typography__typography0__typographyClass-lbl" for="jform_params__typography__typography0__typographyClass">
	Class</label>
</div>
		<div class="controls"><input type="text" name="jform[params][typography][typography0][typographyClass]" id="jform_params__typography__typography0__typographyClass" value="" class="small-input">
</div>
</div>
	<div class="control-group">
			<div class="control-label"><label id="jform_params__typography__typography0__typographyFont-lbl" for="jform_params__typography__typography0__typographyFont" class="hasPopover" title="" data-content="Put the font family name as giving by google.<br> for example roboto or Sans Serif<br> this will be the font assigned to that element.<br>leave blank for theme default" data-original-title="Font family">
	Font family:</label>
</div>
		<div class="controls"><input type="text" name="jform[params][typography][typography0][typographyFont]" id="jform_params__typography__typography0__typographyFont" value="" class="small-input">
</div>
</div>
	<div class="control-group">
			<div class="control-label"><label id="jform_params__typography__typography0__typographyColor-lbl" for="jform_params__typography__typography0__typographyColor">
	Text Color</label>
</div>
		<div class="controls"><div class="minicolors minicolors-theme-bootstrap minicolors-position-default"><input type="text" name="jform[params][typography][typography0][typographyColor]" id="jform_params__typography__typography0__typographyColor" value="none" placeholder="#rrggbb" class="minicolors small-input hex minicolors-input" data-position="default" data-control="hue" data-format="hex" size="7"><span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span><div class="minicolors-panel minicolors-slider-hue"><div class="minicolors-slider minicolors-sprite"><div class="minicolors-picker" style="top: 0px;"></div></div><div class="minicolors-opacity-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-grid minicolors-sprite" style="background-color: rgb(255, 0, 0);"><div class="minicolors-grid-inner"></div><div class="minicolors-picker" style="top: 150px; left: 0px;"><div></div></div></div></div></div></div>
</div>
	<div class="control-group">
			<div class="control-label"><label id="jform_params__typography__typography0__typographyfontSize-lbl" for="jform_params__typography__typography0__typographyfontSize">
	Font Size</label>
</div>
		<div class="controls"><input type="text" name="jform[params][typography][typography0][typographyfontSize]" id="jform_params__typography__typography0__typographyfontSize" value="" class="tiny-input">
</div>
</div>
	<div class="control-group">
			<div class="control-label"><label id="jform_params__typography__typography0__typographyMargin-lbl" for="jform_params__typography__typography0__typographyMargin">
	Margin</label>
</div>
		<div class="controls"><input type="text" name="jform[params][typography][typography0][typographyMargin]" id="jform_params__typography__typography0__typographyMargin" value="" class="tiny-input">
</div>
</div>
	<div class="control-group">
			<div class="control-label"><label id="jform_params__typography__typography0__typographyPadding-lbl" for="jform_params__typography__typography0__typographyPadding">
	Padding</label>
</div>
		<div class="controls"><input type="text" name="jform[params][typography][typography0][typographyPadding]" id="jform_params__typography__typography0__typographyPadding" value="" class="tiny-input">
</div>
</div>
</fieldset>
	</div>
</div>
					<template class="subform-repeatable-template-section" style="display: none;">SUBFORMLTdiv
	class="subform-repeatable-group subform-repeatable-group-sr-0"
	data-base-name="typography"
	data-group="typographyX"
SUBFORMGT
		SUBFORMLTdiv class="btn-toolbar text-right"SUBFORMGT
		SUBFORMLTdiv class="btn-group"SUBFORMGT
							SUBFORMLTa class="btn btn-mini button btn-success group-add group-add-sr-0" aria-label="Add"SUBFORMGT
					SUBFORMLTspan class="icon-plus" aria-hidden="true"SUBFORMGTSUBFORMLT/spanSUBFORMGT
				SUBFORMLT/aSUBFORMGT
										SUBFORMLTa class="btn btn-mini button btn-danger group-remove group-remove-sr-0" aria-label="Remove"SUBFORMGT
					SUBFORMLTspan class="icon-minus" aria-hidden="true"SUBFORMGTSUBFORMLT/spanSUBFORMGT
				SUBFORMLT/aSUBFORMGT
										SUBFORMLTa class="btn btn-mini button btn-primary group-move group-move-sr-0" aria-label="Move"SUBFORMGT
					SUBFORMLTspan class="icon-move" aria-hidden="true"SUBFORMGTSUBFORMLT/spanSUBFORMGT
				SUBFORMLT/aSUBFORMGT
					SUBFORMLT/divSUBFORMGT
	SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="row-fluid"SUBFORMGT
SUBFORMLTfieldset class=""SUBFORMGT
		SUBFORMLTlegendSUBFORMGTTypography ElementsSUBFORMLT/legendSUBFORMGT
		SUBFORMLTdiv class="control-group"SUBFORMGT
			SUBFORMLTdiv class="control-label"SUBFORMGTSUBFORMLTlabel id="jform_params__typography__typographyX__typographyElement-lbl" for="jform_params__typography__typographyX__typographyElement"SUBFORMGT
	Element:SUBFORMLT/labelSUBFORMGT
SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="controls"SUBFORMGTSUBFORMLTselect id="jform_params__typography__typographyX__typographyElement" name="jform[params][typography][typographyX][typographyElement]" class="small-input"SUBFORMGT
	SUBFORMLToption value="h1"SUBFORMGTh1SUBFORMLT/optionSUBFORMGT
	SUBFORMLToption value="h2"SUBFORMGTh2SUBFORMLT/optionSUBFORMGT
	SUBFORMLToption value="h3" selected="selected"SUBFORMGTh3SUBFORMLT/optionSUBFORMGT
	SUBFORMLToption value="h4"SUBFORMGTh4SUBFORMLT/optionSUBFORMGT
	SUBFORMLToption value="h5"SUBFORMGTh5SUBFORMLT/optionSUBFORMGT
	SUBFORMLToption value="h6"SUBFORMGTh6SUBFORMLT/optionSUBFORMGT
	SUBFORMLToption value="p"SUBFORMGTpSUBFORMLT/optionSUBFORMGT
	SUBFORMLToption value="div"SUBFORMGTdivSUBFORMLT/optionSUBFORMGT
SUBFORMLT/selectSUBFORMGT
SUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT
	SUBFORMLTdiv class="control-group"SUBFORMGT
			SUBFORMLTdiv class="control-label"SUBFORMGTSUBFORMLTlabel id="jform_params__typography__typographyX__typographyClass-lbl" for="jform_params__typography__typographyX__typographyClass"SUBFORMGT
	ClassSUBFORMLT/labelSUBFORMGT
SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="controls"SUBFORMGTSUBFORMLTinput type="text" name="jform[params][typography][typographyX][typographyClass]" id="jform_params__typography__typographyX__typographyClass"  value="" class="small-input"              /SUBFORMGT
SUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT
	SUBFORMLTdiv class="control-group"SUBFORMGT
			SUBFORMLTdiv class="control-label"SUBFORMGTSUBFORMLTlabel id="jform_params__typography__typographyX__typographyFont-lbl" for="jform_params__typography__typographyX__typographyFont" class="hasPopover" title="Font family" data-content="Put the font family name as giving by google.&lt;br&gt; for example roboto or Sans Serif&lt;br&gt; this will be the font assigned to that element.&lt;br&gt;leave blank for theme default"SUBFORMGT
	Font family:SUBFORMLT/labelSUBFORMGT
SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="controls"SUBFORMGTSUBFORMLTinput type="text" name="jform[params][typography][typographyX][typographyFont]" id="jform_params__typography__typographyX__typographyFont"  value="" class="small-input"              /SUBFORMGT
SUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT
	SUBFORMLTdiv class="control-group"SUBFORMGT
			SUBFORMLTdiv class="control-label"SUBFORMGTSUBFORMLTlabel id="jform_params__typography__typographyX__typographyColor-lbl" for="jform_params__typography__typographyX__typographyColor"SUBFORMGT
	Text ColorSUBFORMLT/labelSUBFORMGT
SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="controls"SUBFORMGTSUBFORMLTinput type="text" name="jform[params][typography][typographyX][typographyColor]" id="jform_params__typography__typographyX__typographyColor" value="none" placeholder="#rrggbb" class="minicolors small-input hex" data-position="default" data-control="hue" data-format="hex"/SUBFORMGTSUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT
	SUBFORMLTdiv class="control-group"SUBFORMGT
			SUBFORMLTdiv class="control-label"SUBFORMGTSUBFORMLTlabel id="jform_params__typography__typographyX__typographyfontSize-lbl" for="jform_params__typography__typographyX__typographyfontSize"SUBFORMGT
	Font SizeSUBFORMLT/labelSUBFORMGT
SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="controls"SUBFORMGTSUBFORMLTinput type="text" name="jform[params][typography][typographyX][typographyfontSize]" id="jform_params__typography__typographyX__typographyfontSize"  value="" class="tiny-input"              /SUBFORMGT
SUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT
	SUBFORMLTdiv class="control-group"SUBFORMGT
			SUBFORMLTdiv class="control-label"SUBFORMGTSUBFORMLTlabel id="jform_params__typography__typographyX__typographyMargin-lbl" for="jform_params__typography__typographyX__typographyMargin"SUBFORMGT
	MarginSUBFORMLT/labelSUBFORMGT
SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="controls"SUBFORMGTSUBFORMLTinput type="text" name="jform[params][typography][typographyX][typographyMargin]" id="jform_params__typography__typographyX__typographyMargin"  value="" class="tiny-input"              /SUBFORMGT
SUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT
	SUBFORMLTdiv class="control-group"SUBFORMGT
			SUBFORMLTdiv class="control-label"SUBFORMGTSUBFORMLTlabel id="jform_params__typography__typographyX__typographyPadding-lbl" for="jform_params__typography__typographyX__typographyPadding"SUBFORMGT
	PaddingSUBFORMLT/labelSUBFORMGT
SUBFORMLT/divSUBFORMGT
		SUBFORMLTdiv class="controls"SUBFORMGTSUBFORMLTinput type="text" name="jform[params][typography][typographyX][typographyPadding]" id="jform_params__typography__typographyX__typographyPadding"  value="" class="tiny-input"              /SUBFORMGT
SUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT
SUBFORMLT/fieldsetSUBFORMGT
	SUBFORMLT/divSUBFORMGT
SUBFORMLT/divSUBFORMGT</template>
				</div>
	</div>
</div>
</div>
</div>

</div>

N6REJ - comment - 9 Dec 2019

idky its cropping the code. Here's the code in a text file
output.txt

brianteeman - comment - 9 Dec 2019

The text file is the same

N6REJ - comment - 9 Dec 2019

frock

N6REJ - comment - 9 Dec 2019

@brianteeman yeah, it's cropping it in FF
This is one from view page
output.txt

N6REJ - comment - 9 Dec 2019

here's the css maybe the layout class's in j! have changed or I've simply blown it.

/* limits the width of the modal table */
.modal table.adminlist .tiny-input, .tiny-input, .modal table.adminlist td input.tiny-input {
	max-width: 40px !important;
	}

.modal table.adminlist td select.small-input, select.small-input, .modal table.adminlist td input.small-input {
	max-width: 80px !important;
	}

.modal table.adminlist .medium-input, .modal table.adminlist td input.medium-input {
	max-width: 120px !important;
	}

.modal table.adminlist .large-input,
.modal table.adminlist td input.large-input {
	max-width: 160px !important;
	}

brianteeman - comment - 9 Dec 2019

That css is nothing to do with the code you shared

brianteeman - comment - 9 Dec 2019

and the code in your output file is nothing to do with the code in the original post

SharkyKZ - comment - 9 Dec 2019

Classes appear in HTML output correctly. So it's most likely to do with your CSS.

brianteeman - comment - 9 Dec 2019

I can confirm that the code is correct and that your css is obviously wrong (assuming you pasted the correct css)

With the correct css

Please close this as it is not a core issue. If you still need help then use the forum

N6REJ - comment - 9 Dec 2019

@SharkyKZ seems I had it specifically for a given form. Perhaps this is more generic?

/* limits the width of the modal table */
.tiny-input + [id*="jform_params"], [id*="jform_params"].tiny-input {
	max-width: 60px !important;
	}

.small-input + [id*="jform_params"], [id*="jform_params"].small-input {
	max-width: 90px !important;
	}

.medium-input + [id*="jform_params"], [id*="jform_params"].medium-input {
	max-width: 120px !important;
	}

.large-input + [id*="jform_params"], [id*="jform_params"].large-input {
	max-width: 150px !important;
	}

This does work for that form.

N6REJ - change - 9 Dec 2019

Status	New	⇒	Closed
Closed_Date	0000-00-00 00:00:00	⇒	2019-12-09 17:54:18
Closed_By		⇒	N6REJ

N6REJ - close - 9 Dec 2019

Add a Comment

Older
Newer

Joomla! Issue Tracker - CMS

[#27226] - Form element classes don't honor class

Steps to reproduce the issue

Expected result

Actual result

System information (as much as possible)

Additional comments

Add a Comment