[ZBX-10777] Consistent visual style for radios and checkboxes Created: 2016 May 11  Updated: 2017 May 30  Resolved: 2016 Nov 15

Status: Closed
Project: ZABBIX BUGS AND ISSUES
Component/s: Frontend (F)
Affects Version/s: 3.0.1, 3.0.2
Fix Version/s: 3.4.0alpha1

Type: Incident report Priority: Trivial
Reporter: Pavel Amosov (Inactive) Assignee: Unassigned
Resolution: Fixed Votes: 0
Labels: usability
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File chkboxnbtns.png     PNG File mass-update.png     PNG File pixels.png     PNG File table.png     PNG File text_in_button.png    

 Description   

Radio buttons and checkboxes should look the same across all browsers. Currently, each browser styles them differently.



 Comments   
Comment by Aleksandrs Saveljevs [ 2016 Jul 05 ]

Design available in development branch svn://svn.zabbix.com/branches/dev/ZBX-10777-trunk (originally svn://svn.zabbix.com/branches/dev/ZBX-10777).

Comment by Aleksandrs Saveljevs [ 2016 Jul 05 ]

(1) We have the following code in screen.scss:

%form-custom-check-radio-style {
	...
	clip: rect(1px, 1px, 1px, 1px);

According to https://developer.mozilla.org/en-US/docs/Web/CSS/clip, the usage of "clip" is deprecated in favor of "clip-path". See also https://css-tricks.com/clipping-masking-css/ . Shall we rewrite it using "clip-path"?

PavelA We should probably use something else instead, because: http://caniuse.com/#search=clip-path

PavelA I suggest we replace 'clip' with 'display: none'. RESOLVED in r60895

asaveljevs Thank you! CLOSED.

Comment by Aleksandrs Saveljevs [ 2016 Jul 19 ]

(2) Radio buttons done in r60990. Checkboxes seem to be a bit more complicated from the programming design perspective.

asaveljevs The solution offered in r61102 overrides CCheckBox->toString() method to generate a <label> element with a <span> in it after the <input>. It seems to work, but looks like a hack, because CCheckBox extends a CTag, so theoretically it should return one tag only.

asaveljevs Another point to think about is that after this change, if we go to host's "Encryption" tab, the "Connections from host" strings became a label for the first checkbox. This is because CFormList->addRow() now sees a CCheckBox instead of CLabel. One possible solution to this would be to check if checkbox has a non-empty label.

asaveljevs Made proper checkboxes all over frontend in r62833, r62837, r62838, r62962, r62963, and r62965.

asaveljevs The problem with CFormList fixed in r62966 by applying the suggestion above. RESOLVED.

iivs CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Jul 20 ]

(3) It seems that methods startToString(), bodyToString(), and endToString() should be protected, not public.

asaveljevs RESOLVED in r61123 (even though the commit message says a different thing).

iivs Looks good. Fixed minor typo in r62476

asaveljevs CLOSED

Comment by Ivo Kurzemnieks [ 2016 Sep 12 ]

(4) Are we no longer supporting Opera 12.x? More and more visual bugs appear.

Checkboxes are broken and those button texts are still not fixed. If we're no longer supporting and fixing bugs for Opera 12.x, at least it should be documented and marked as an outdated browser, otherwise, fix it.

PavelA Common, Opera 12 was released more then 3 years ago. The latest release number is 37

iivs Your argument is invalid. Some systems have 12.16 as latest version till today. Also if you would check once in a while older IE browsers, for example IE9 which we still support, you would notice that checkboxes there are also broken. Unfortunately we don't have any Opera 12.x usage statistics. Actually we don't have any statistics at all, but anyway for IE9 this sould be fixed regardless. Also you're wrong (again) - latest version is 39.

Dear iivs, IE9 issue should be RESOLVED in r62440

iivs This fixed Opera 12.16 for me as well. Thank you, dear PavelA.
CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Sep 27 ]

(5) Development was originally done in svn://svn.zabbix.com/branches/dev/ZBX-10777 , which was based on 3.0. Since the feature is now meant for 3.3, there is a need for a new branch based on the current trunk.

asaveljevs RESOLVED in svn://svn.zabbix.com/branches/dev/ZBX-10777-trunk in r62817 and r62819. There were conflicts, so please verify that it has been properly merged.

iivs Branch was a bit outdated and there were more conflicts in svn://svn.zabbix.com/branches/dev/ZBX-10777-trunk branch. Resolved conflicts in r63007. Please, review.
RESOLVED

asaveljevs Looks good. There was another conflict with (6) in ZBX-11209 updating to the (now) latest trunk. Please take a look. RESOLVED.

iivs Thanks! CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Sep 27 ]

(6) As pointed out by PavelA, radio buttons in host interfaces still use the old style, so the solution in (2) in r60990 is not complete.

asaveljevs RESOLVED in r62828 and r62833.

iivs CLOSED.

Comment by Aleksandrs Saveljevs [ 2016 Sep 28 ]

(7) There seems to be a problem in mass update forms:

asaveljevs RESOLVED in r62838 by using PavelA's suggestion: put the string (e.g., "Severity") into checkbox's label and put the checkbox's span into the same label after the string.

iivs CLOSED.

Comment by Gunars Pujats (Inactive) [ 2016 Oct 03 ]

(8) This subissue moved here from ZBX-11276

"for" attribute is not required since <input> is already inside the <label> tag. It can be removed in the following locations:

  • Configuration -> Maintenance -> Periods -> Weekly/monthly;
  • Administration -> User edit/Profile -> Popup media;
  • Profile -> messaging;
  • Administration -> General -> GUI -> Remember selected;
  • Administration -> General -> Trigger displaying options;
  • Configuration -> Element copy;
  • Configuration -> Host massupdate;
  • Login -> Remember me for 30 days;
  • Configuration -> Discovery -> Device uniqueness criteria;
  • Monitoring -> Maps -> Edit -> Mass update elements;
  • Monitoring -> Dashboard configuration;
  • Reports -> Triggers top 100;
  • Configuration -> Items -> Trigger wizard.

asaveljevs We have tried to take <input> elements outside of <label> elements during this development. It seems that we have taken them out in all pages listed above. Please check if there is anything more to be done.

iivs CLOSED.

Comment by Aleksandrs Saveljevs [ 2016 Oct 04 ]

(9) No translation string changes.

iivs CLOSED.

Comment by Ivo Kurzemnieks [ 2016 Oct 06 ]

(10) Please, add PHP doc and describe the newly added functions and parameters:

  • CVisibilityBox::setLabel();
  • CCheckBox::setLabel();
  • CCheckBox::getLabel();
  • CCheckBox::setLabelPosition();

asaveljevs RESOLVED in r63083.

iivs I added @return to new functions in r63129. Please, review.

asaveljevs CLOSED

Comment by Ivo Kurzemnieks [ 2016 Oct 06 ]

(11) CVisibilityBox:45 PHP dev team came to conclusion that parent must be replaced with $this.

asaveljevs RESOLVED in r63061.

iivs CLOSED

Comment by Ivo Kurzemnieks [ 2016 Oct 06 ]

(12) CFormList:25 seems like cipbox is unused. I couldn't find usage in any previous Zabbix versions. Probaly can be removed.

asaveljevs According to svn log, CIpBox first appeared in r6784, existed for a little while, and got removed in r16195.

asaveljevs Removed from CFormList in r63063. RESOLVED.

iivs CLOSED

Comment by Ivo Kurzemnieks [ 2016 Oct 06 ]

(13) configuration.host.edit.js.php:14 uses only one class checkbox-radio but configuration.host.edit.js.php:372 and configuration.services.edit.js.php:60 uses all 4 classes input checkbox checkbox-radio pointer. I think one class is enough.

asaveljevs RESOLVED in r63064.

iivs CLOSED

Comment by Ivo Kurzemnieks [ 2016 Oct 06 ]

(14) In Host edit form -> SNMP interfaces, it feels like it needs more space between the input text field and checkbox. is several other places like media popup, encryption tab the spacing feels off and indeed it is off by 1px. The line hight is fluid. It could be solved by using floats, clears and line-height, but are we're going to fix that, is a different question. See attached image.

PavelA There's a "list-check-radio" class for vertical check/radio lists that sets the proper vertical spacing and text wrapping. Looks like it's not present. Please check forms.html. Current html markup differs from the prototype

asaveljevs Added "list-hor-check-radio" to SNMP bulk checkbox in r63067 to synchronize it with the prototype mentioned above. Added "list-check-radio" to other checkbox lists in r63074. RESOLVED.

iivs Now that's more like it. I slightly changed coding style, because it was hard to differentiate to which class methods belong. See r63130

asaveljevs Looks good. CLOSED.

Comment by Ivo Kurzemnieks [ 2016 Oct 12 ]

TESTED,

but please review my changes before merging.

Comment by Natalja Romancaka [ 2016 Oct 14 ]

(15) In Monitoring -> Latest data in Firefox can't uncheck checkbox, in other browsers can't check and uncheck checkbox. Work only check/uncheck all checkboxes

asaveljevs RESOLVED in r63224.

iivs CLOSED

Comment by Natalja Romancaka [ 2016 Oct 17 ]

(16) Internet Explorer 9+ text in buttons is not centred in Configuration->Hosts->Zabbix server->Discovery (two templated discovery rules)

PavelA I couldn't reproduce such behavior. Looks like it's already fixed.

asaveljevs I assume that discussing this with natalja.zabbix did not find any evidence to the contrary. Therefore, closing this sub-issue as CANNOT REPRODUCE.

Comment by Aleksandrs Saveljevs [ 2016 Oct 31 ]

Available in pre-3.3.0 (trunk) r63444.

Comment by Martins Valkovskis [ 2016 Nov 01 ]

*(17)* Documentation:

Updating all relevant frontend screenshots will have to be done over time.

RESOLVED

asaveljevs Perfect! CLOSED.

Comment by Alexander Vladishev [ 2016 Nov 02 ]

(18) increased height of the tables with check boxes

PavelA Should be RESOLVED in r63482

gunarspujats CLOSED

Available in pre-3.3.0 (trunk) r63524.

Comment by Alexander Vladishev [ 2016 Nov 10 ]

(19) Broken multiple selection of table rows with "shift" key

PavelA RESOLVED in r63777

asaveljevs Looks great! CLOSED.

Fixed in pre-3.3.0 (trunk) r63779.

Generated at Mon Aug 04 08:54:52 EEST 2025 using Jira 9.12.4#9120004-sha1:625303b708afdb767e17cb2838290c41888e9ff0.