Skip to content

[JENKINS-76266] help.html for an entry in f:dropdownDescriptorSelector breaks the layout #16838

@jenkins-infra-bot

Description

@jenkins-infra-bot

The f:helpIcon rendered for a f:dropdownDescriptorSelector inside a f:repeatableHeteroProperty intersects with the right-side border, see screenshot (to the right of "Domain specification").

Perhaps the width of the dropdown could be limited to leave space for the help?

(Screenshot from an unpublished WIP state of the plugin, so no use looking for the corresponding code yet.)

A similar situation can be triggered in design-library plugin (main branch as of this issue creation) with this change:

diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Select/Apple/help.html b/src/main/resources/io/jenkins/plugins/designlibrary/Select/Apple/help.html
new file mode 100644
index 0000000..d5df030
--- /dev/null
+++ b/src/main/resources/io/jenkins/plugins/designlibrary/Select/Apple/help.html
@@ -0,0 +1,3 @@
+<div>
+  It's an apple. <a href="https://en.wikipedia.org/wiki/Apple" target="_blank">Learn more.</a>
+</div>
diff --git a/src/main/resources/scss/components/_component-sample.scss b/src/main/resources/scss/components/_component-sample.scss
index 1c02a4e..180a0bc 100644
--- a/src/main/resources/scss/components/_component-sample.scss
+++ b/src/main/resources/scss/components/_component-sample.scss
@@ -1,7 +1,6 @@
 .jdl-component-sample {
   position: relative;
   display: flex;
-  align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 100%;
 
// Some comments here
public String getFoo()
{
    return foo;
}

Originally reported by danielbeck, imported from: help.html for an entry in f:dropdownDescriptorSelector breaks the layout
  • status: Open
  • priority: Minor
  • component(s): core
  • label(s): ux
  • resolution: Unresolved
  • votes: 0
  • watchers: 1
  • imported: 2025-11-24
Raw content of original issue

The f:helpIcon rendered for a f:dropdownDescriptorSelector inside a f:repeatableHeteroProperty intersects with the right-side border, see screenshot (to the right of "Domain specification").

Perhaps the width of the dropdown could be limited to leave space for the help?

(Screenshot from an unpublished WIP state of the plugin, so no use looking for the corresponding code yet.)

A similar situation can be triggered in design-library plugin (main branch as of this issue creation) with this change:

diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Select/Apple/help.html b/src/main/resources/io/jenkins/plugins/designlibrary/Select/Apple/help.html
new file mode 100644
index 0000000..d5df030
--- /dev/null
+++ b/src/main/resources/io/jenkins/plugins/designlibrary/Select/Apple/help.html
@@ -0,0 +1,3 @@
+<div>
+  It's an apple. <a href="https://en.wikipedia.org/wiki/Apple" target="_blank">Learn more.</a>
+</div>
diff --git a/src/main/resources/scss/components/_component-sample.scss b/src/main/resources/scss/components/_component-sample.scss
index 1c02a4e..180a0bc 100644
--- a/src/main/resources/scss/components/_component-sample.scss
+++ b/src/main/resources/scss/components/_component-sample.scss
@@ -1,7 +1,6 @@
 .jdl-component-sample {
   position: relative;
   display: flex;
-  align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 100%;
 
// Some comments here
public String getFoo()
{
    return foo;
}
2 attachments

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions