Contrib.social

"Image button" input element is invisible

Open on Drupal.org →
Created on 16 May 2019, about 6 years ago
Updated 29 July 2024, 11 months ago

Problem/Motivation

Steps to reproduce:

  1. Enable the "Form API Example" module of this project
  2. Navigate to the "Common input elements" page on the "examples/form-api-example/input-demo/" URL path
  3. At the end of the demonstrated input element listing an <input type="image" ... > item should be seen.
  4. Although the markup is being generated in the DOM, but there's nothing to appear visually, only a big white area between the other buttons around. This happens even if you temporarily place the "Main page content" block into a region which has some non-white background-color:
    →

It's not an SVG-rendering issue of the client browser, because it happens both in Chrome and Firefox as well. Instead, the root cause of the issue is the referenced vector image file (see its code or as rendered image on Gitlab: images/100x30.svg) literally contains no visible elements.

Proposed resolution

We can still keep using vector graphic (as it gets widely supported), but need to use an other image file. This Examples project contains an other graphic file in its images/ folder: the logo of this project also being used for the Toolbar menu item. My suggestion is to use that for this purpose also.

However, that icon is colored fully white as needed for the Toolbar. To prevent similar misunderstandings in the future when user expects to see the image on white background, let's add a dark-colored version of this logo. Store them in separate sub-directories as Drupal core does. Also, the source code of the existing examples.svg file can be cleaned up with SVGO. If we go this way, then the old 100x30.svg file can be deleted.

After patch applied, these two areas needs to be tested:
→

Remaining tasks

Test, RTBC, commit.

User interface changes

Preventing confusion, improving overall visual appearance.

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

Original report by [username]

N/A

🐛 Bug report
Status

Fixed

Version

4.0

Component

Form API Example

Created by

🇭🇺Hungary Balu Ertl Budapest 🇪🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024