Loading...
 

Helper icons, buttons and short labels should be kept on the same line as the setting widget being edited (don't do wrapping), to avoid looking broken and having uneven row heights

Status
Open
Subject
Helper icons, buttons and short labels should be kept on the same line as the setting widget being edited (don't do wrapping), to avoid looking broken and having uneven row heights
Version
25.x
Category
  • Usability
Feature
Trackers
Admin Interface (UI)
Inline edition for trackers
Resolution status
New
Submitted by
Jeff
Lastmod by
Jeff
Rating
(1)
Description

The current (as of 25.x) way the form UIs (whether for settings or trackers fields or whatever) lets the tiki help icons "after the setting widget" wrap onto the next line when the widget is full-width, is problematic for a number of reasons, including:

  • It creates visual confusion as the beginning of each line is different, and since all those elements are very colorful (ex: in the default theme both the checkboxes and the info icons are blue, which makes it harder to tell them apart quickly when scanning the page);
  • It causes row heights to vary needlessly, which is unpleasant;
  • It eats more precious vertical space than it should, which causes needless scrolling, with pages up to twice as long;
  • It looks and "feels" broken (or "dangling"), visually, which impacts the first impression people¹ get of the software.


My guess is that Tiki lets those things wrap when it shouldn't (maybe using some sort of non-breaking space character, or a div containing both the form field and the related things?)

The only exception I can envision is long explanation labels, those make sense to have on a separate line.

Please see the attached screenshots (and mockups), this will make the problem self-explanatory; compare image no1 vs no2, and particularly no3 vs no4 which illustrate very well the change in the "global feeling" and compactness of the layout when you do this for many fields.

Image Tiki Setting End Of Line Icons 1 Current Tiki Setting End Of Line Icons 1 Current

Image Tiki Setting End Of Line Icons 2 Proposed Tiki Setting End Of Line Icons 2 Proposed

Image Tiki Setting End Of Line Icons 3 Current Tiki Setting End Of Line Icons 3 Current

Image Tiki Setting End Of Line Icons 4 Proposed After Compaction Tiki Setting End Of Line Icons 4 Proposed After Compaction

Image no5 shows how this problem also affects Tiki Tracker list tables and such where there are editable cells with clickable icons/buttons in those cells. Those shouldn't wrap either, they should stay on the last line of the contents (or maybe vertically centered in the cell, or top-aligned?) :

Image Tiki Setting End Of Line Icons 5 Annotated Tiki Setting End Of Line Icons 5 Annotated



¹: Humans don't like things that are "dangling" in general... this is exactly why Batman asked Robin to hand him the shark-repellent bat-spray to get rid of a dangling shark.

Importance
5
Easy to solve?
7
Priority
35
Demonstrate Bug (Tiki 19+)
Please demonstrate your bug on show2.tiki.org
 About show2.tiki.org

To help developers solve the bug, we kindly request that you demonstrate your bug on a show2.tiki.org instance. To start, simply select a version and click on "Create show2.tiki.org instance". Once the instance is ready (in a minute or two), as indicated in the status window below, you can then access that instance, login (the initial admin username/password is "admin") and configure the Tiki to demonstrate your bug. Priority will be given to bugs that have been demonstrated on show2.tiki.org.

Version: Create show2.tiki.org instance
Demonstrate Bug (older Tiki versions)
 Show.tiki.org is currently unavailable

Unable to connect to show.tikiwiki.org. Please let us know of the problem so that we can do something about it. Thanks.

Ticket ID
8364
Created
Sunday 19 March, 2023 00:41:08 GMT-0000
by Jeff
LastModif
Sunday 19 March, 2023 01:30:46 GMT-0000

Attachments

 filenamecreatedhitscommentversionfiletype 
No attachments for this item


Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools