Fix form-horizontal for non-latin or long language strings #15689

denysdesign · 2017-04-30T01:25:38Z

Pull Request for Issue # .

Summary of Changes

Fix form-horizontal for non-latin or long language strings.

Please look for this languages specifies fix: @infograf768

Before fix:

After fix:

Optional width 200px:

max-width: 200px;
min-width: 200px;
width: 200px;

Testing latest version Firefox, Chrome and etc Chromius based brawsers.

CB9TOIIIA · 2017-04-30T02:54:17Z

Joomla pain :)

b2z · 2017-04-30T04:56:42Z

As a Russian language user I am definitely for it. Looking much better now.

Arkadiy-Sedelnikov · 2017-04-30T05:58:04Z

Agree

ghost · 2017-04-30T06:09:00Z

if 2 People test this PR successfully it could go in staging if Maintainers agree.

ot2sen · 2017-04-30T06:50:36Z

I have tested this item ✅ successfully on cc318d8

Tested with multiple languages and Russian in particular which had this issue.
Logic improvement on i18n to ensure any language looks good/correct in the interface for admin forms.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15689.}

brianteeman · 2017-04-30T08:00:05Z

Please do not edit the css file directly. That is not correct.

The correct way is to make the changes in the less file and then run generatecss.php from the build directory to create the css

infograf768 · 2017-05-01T07:37:24Z

Unhappily, we have multiple .form-horizontal .control-label in the less => css files.
Some have width: auto; depending on the screen width.

Therefore the less files to modify has to be chosen carefully
Also nothing is changed for rtl here.

infograf768 · 2017-05-01T09:44:07Z

@ciar4n
Can you have a look?

ciar4n · 2017-05-01T10:59:36Z

The Bootstrap default is for the control-label to wrap at 160px so if the intent is to allow the label to wrap then simply removing https://github.com/joomla/joomla-cms/blob/staging/administrator/templates/isis/less/blocks/_forms.less#L10 should give the same result. If you wish to increase the label width you will also need to increase the left margin on .form-horizontal .controls by the same amount. Not sure if there is a need for setting the min and max width.. maybe you have your reasons?

Test RTL however it should be ok. Media queries should also be fine as is.. smaller screen sizes have the label and control in columns.

As mentioned by @brianteeman you will need to edit the LESS files and then compile rather than editing the CSS directly (https://docs.joomla.org/Joomla_LESS).

Limit a control-label width in form-horizontal

Fedik · 2017-05-03T14:57:49Z

I have tested this item ✅ successfully on 6250e2f

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15689.}

Quy · 2017-05-03T16:45:29Z

It looks good. The only 1 display issue is under System > Global Configuration > Media that just needs markup change.

Before:

After:

brianteeman · 2017-05-03T16:52:15Z

@Quy that might happen in other places too especially with extensions

Fedik · 2017-05-03T17:00:59Z

it because a Spacer field displaying the text as a label, this is some very old legacy.
But even with this, it is looks better than on the screenshot from the pull description

Fedik · 2017-05-03T17:16:40Z

upd: In theory, for a Spacer field we can force class in "JFormFieldSpacer::renderField", something like field-spacer and then in css use .field-spacer>.control-label{width:auto;}
@Quy what do you think?

Quy · 2017-05-03T17:26:08Z

Sounds good to me in theory. but I am no css guru. :)

denysdesign · 2017-05-03T17:28:49Z

@Fedik it's nice idea!

Fedik · 2017-05-04T11:00:05Z

@joomla-ua you will update the PR?

infograf768 · 2017-05-05T10:04:38Z

@Fedik
Not sure where to add the class in the library.

Fedik · 2017-05-05T17:36:07Z

@infograf768
in JFormFieldSpacer field class, add method

public function renderField($options = array())
{
   $options['class'] = empty($options['class']) ? 'field-spacer' : $options['class'] .  ' field-spacer';
   
   return parent::renderField($options);
}

other solution can be, to add a layout (renderLayout) specially for a Spacer field instead of default joomla.form.renderfield

dgrammatiko · 2017-05-05T17:57:10Z

I like the layout approach more

Fedik · 2017-05-05T18:09:44Z

@DGT41 yeah, but how it should looks like? for not break current markup of the forms 😉

infograf768 · 2017-05-06T07:27:05Z

I can't get it to work here
we have to overwrite width: 160px; in

.form-horizontal .control-label {
    float: left;
    padding-top: 5px;
    width: 160px; 
}

and the code above does not.

Fedik · 2017-05-06T09:49:49Z

@infograf768 I have sent pull with updates to @joomla-ua
the configuration page render the fields without use of renderField, that why the code from my previous comment not worked 😉

@DGT41 I think here we can use the class, because the layout it is a "new feature" and cannot be accepted until j3.8, I guess. And people will have ugly backend another half of year 😉
We can do the layout for Spacer field anytime later.

infograf768 · 2017-05-06T09:53:19Z

Eager to test. We have multiple types of spacers and this should take into account all of them.
I would not consider this such a new feature that it could not go into a 3.7.2 (if no B/C impact on frontend).

Correction: just understood you meant the layout would be a new feature.

Fix control-label width for a spacer field

Quy · 2017-05-06T15:22:09Z

It works. I just noticed under System > Global Configuration > Templates, the following does not require the spacer pr because it is coded differently. Should System > Global Configuration > Media be changed to match?

Supported File Formats
Be careful before changing the file types. Read the tool tips before editing.

Fedik · 2017-05-06T15:40:48Z

@Quy that another field type note, that actually use a hack to be out of the ".control-label" 😄
https://github.com/joomla/joomla-cms/blob/staging/libraries/joomla/form/fields/note.php#L60

infograf768 · 2017-05-06T17:02:40Z

Will test tomorrow. 😺

infograf768 · 2017-05-06T17:04:52Z

administrator/components/com_config/view/component/tmpl/default.php

-							<?php $dataShowOn = ''; ?>
+							<?php
+								$dataShowOn = '';
+								$groupClass = $field->type === 'Spacer' ? ' field-spacer' : '';


Are you sure we need an uppercase for 'Spacer' ? We do not in the xmls.

yes, because it is the field "type" https://github.com/joomla/joomla-cms/blob/staging/libraries/joomla/form/fields/spacer.php#L26 😉

infograf768 · 2017-05-07T06:11:44Z

I have tested this item ✅ successfully on 21929d6

Thanks. Works great.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15689.}

infograf768 · 2017-05-07T06:54:06Z

@Fedik
We forgot something.
you should do the same for /layouts/joomla/content/options_default.php to cope with Global Configuration.

For example, I have added in /administrator/components/com_config/model/form/application.xml a new spacer field.

                <field name="spacer1"
			type="spacer"
			class="text"
			label="COM_CONFIG_FIELD_DEFAULT_CAPTCHA_DESC"
		/>

(I used an existing lang string).
And I get this

Should be easy

infograf768 · 2017-05-07T07:03:38Z

diff would be:

diff --git a/layouts/joomla/content/options_default.php b/layouts/joomla/content/options_default.php
index 9b42831..e36532c 100644
--- a/layouts/joomla/content/options_default.php
+++ b/layouts/joomla/content/options_default.php
@@ -26,4 +26,5 @@
 		{
 			$datashowon = '';
+			$groupClass = $field->type === 'Spacer' ? ' field-spacer' : '';
 
 			if ($field->showon)
@@ -34,5 +35,5 @@
 			}
 			?>
-			<div class="control-group"<?php echo $datashowon; ?>>
+			<div class="control-group<?php echo $groupClass; ?>"<?php echo $datashowon; ?>>
 				<?php if (!isset($displayData->showlabel) || $displayData->showlabel) : ?>
 					<div class="control-label"><?php echo $field->label; ?></div>

Fix control-label width for a spacer field 2

infograf768 · 2017-05-07T08:40:41Z

I have tested this item ✅ successfully on d0e5e57

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15689.}

infograf768 · 2017-05-07T08:42:54Z

@ot2sen
Please test again to get this one in.

AlexRed · 2017-05-07T10:24:24Z

I have tested this item ✅ successfully on d0e5e57

Patch ok for me

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15689.}

ot2sen · 2017-05-07T10:56:53Z

I have tested this item ✅ successfully on d0e5e57

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15689.}

ghost · 2017-05-07T11:39:22Z

RTC after two successful tests.

infograf768 · 2017-05-07T14:17:07Z

@rdeutz
No need to wait 3.7.2 for that one. Can be merged imho for 3.7.1

rdeutz · 2017-05-07T14:21:18Z

I will keep 3.7.1 as light as possible, so if it is not without any doubt a bugfix it has to wait for 3.7.2

infograf768 · 2017-05-07T14:22:14Z

OK, no p

Fix form-horizontal for non-latin or long language strings

cc318d8

joomla-cms-bot added the PR-staging label Apr 30, 2017

Fedik and others added 2 commits May 3, 2017 11:36

Limit a control-label width

e5af23c

Merge pull request #1 from Fedik/pull15689

6250e2f

Limit a control-label width in form-horizontal

Fix control-label width for a spacer field

bf01cf0

Merge pull request #2 from Fedik/pull15689

0e66f14

Fix control-label width for a spacer field

infograf768 reviewed May 6, 2017

View reviewed changes

fix the drone tests by removing a space that is to much

21929d6

Fedik and others added 2 commits May 7, 2017 11:11

Fix control-label width for a spacer field 2

fa1c40c

Merge pull request #3 from Fedik/pull15689

d0e5e57

Fix control-label width for a spacer field 2

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label May 7, 2017

infograf768 added this to the Joomla 3.7.1 milestone May 7, 2017

infograf768 assigned rdeutz May 7, 2017

rdeutz modified the milestones: Joomla 3.7.2, Joomla 3.7.1 May 9, 2017

rdeutz modified the milestones: Joomla 3.7.2, Joomla 3.7.3 May 18, 2017

rdeutz removed their assignment May 22, 2017

rdeutz merged commit 89230ad into joomla:staging May 22, 2017

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label May 22, 2017

Fix form-horizontal for non-latin or long language strings #15689

Fix form-horizontal for non-latin or long language strings #15689

Conversation

denysdesign commented Apr 30, 2017 • edited by joomla-cms-bot Loading

Summary of Changes

CB9TOIIIA commented Apr 30, 2017

b2z commented Apr 30, 2017

Arkadiy-Sedelnikov commented Apr 30, 2017

ghost commented Apr 30, 2017

ot2sen commented Apr 30, 2017

brianteeman commented Apr 30, 2017

infograf768 commented May 1, 2017 • edited Loading

infograf768 commented May 1, 2017

ciar4n commented May 1, 2017

Fedik commented May 3, 2017

Quy commented May 3, 2017

brianteeman commented May 3, 2017

Fedik commented May 3, 2017

Fedik commented May 3, 2017

Quy commented May 3, 2017

denysdesign commented May 3, 2017

Fedik commented May 4, 2017

infograf768 commented May 5, 2017

Fedik commented May 5, 2017 • edited Loading

dgrammatiko commented May 5, 2017

Fedik commented May 5, 2017

infograf768 commented May 6, 2017

Fedik commented May 6, 2017 • edited Loading

infograf768 commented May 6, 2017 • edited Loading

Quy commented May 6, 2017

Fedik commented May 6, 2017

infograf768 commented May 6, 2017

infograf768 May 6, 2017

Choose a reason for hiding this comment

Fedik May 6, 2017

Choose a reason for hiding this comment

infograf768 commented May 7, 2017

infograf768 commented May 7, 2017

infograf768 commented May 7, 2017

infograf768 commented May 7, 2017

infograf768 commented May 7, 2017 • edited Loading

AlexRed commented May 7, 2017

ot2sen commented May 7, 2017

ghost commented May 7, 2017

infograf768 commented May 7, 2017

rdeutz commented May 7, 2017

infograf768 commented May 7, 2017

denysdesign commented Apr 30, 2017 •

edited by joomla-cms-bot

Loading

infograf768 commented May 1, 2017 •

edited

Loading

Fedik commented May 5, 2017 •

edited

Loading

Fedik commented May 6, 2017 •

edited

Loading

infograf768 commented May 6, 2017 •

edited

Loading

infograf768 commented May 7, 2017 •

edited

Loading