Skip to content
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.

Unable to display UI element in new Form #2983

Closed
beaker1977 opened this issue Jan 3, 2019 · 3 comments · Fixed by #2989
Closed

Unable to display UI element in new Form #2983

beaker1977 opened this issue Jan 3, 2019 · 3 comments · Fixed by #2989
Assignees

Comments

@beaker1977
Copy link

Describe the bug

I currently have an application that displays a Select element who's values are populated from entries in a backend database table. I'm trying to add either a button or '+' icon next to the Select element that would open a modal dialog box where the user can define a new entry in the Select list if necessary (and hence eventually be saved to the database). However I can't get a button or '+' icon to display next to the Select element.

I can display it if I place the the tag within the Label component but this is ugly. I am open to suggestions to alternate UX solutions if you can think of one that would provide this capability.

How to reproduce

Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.

Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/clarity-light-theme-v1-0-saaqif
  2. Load the page
  3. See the visible button displayed next to the label. The button should display immediately to the right of the Select element is invisible. See app.component.html file for page code.

Expected behavior

A UX element displays offering the user an option to add another element to a Select element.

Versions

App

  • Angular: 7.1.1
  • Node: [e.g. 8.10.0]
  • Clarity: 1.0.3 patch

Device:

  • Type:Win 7
  • OS: Win 7
  • Browser Firefox IE11, Chrome 70, Firefox 63
  • Version [e.g. 22]

Additional notes

Add any other notes about the problem here.

@gnomeontherun
Copy link
Contributor

This is related to #2970 and the fix I am working on should address this as well.

@gnomeontherun gnomeontherun self-assigned this Jan 3, 2019
gnomeontherun added a commit to gnomeontherun/clarity that referenced this issue Jan 3, 2019
This is actually a multipart bug. First, the datepicker didn't add `clr-row` to the container. Secondly, some places used `clr-col-xs-12` with the grid, which is actually not correct as it should be `clr-col-12`. Finally, the input buttons are now consistently sized (datepicker calendar icon, password eye).

fixes vmware-archive#2983 vmware-archive#2970

Signed-off-by: Jeremy Wilken <gnomation@gnomeontherun.com>
@beaker1977
Copy link
Author

If this is related to 2970 then you can close and I'll keep my fingers crossed your fix kills two birds with one stone.

gnomeontherun added a commit that referenced this issue Jan 7, 2019
* fix layout issues with datepicker and grid columns

This is actually a multipart bug. First, the datepicker didn't add `clr-row` to the container. Secondly, some places used `clr-col-xs-12` with the grid, which is actually not correct as it should be `clr-col-12`. Finally, the input buttons are now consistently sized (datepicker calendar icon, password eye).

fixes #2983 #2970 #2968

Signed-off-by: Jeremy Wilken <gnomation@gnomeontherun.com>
@github-actions
Copy link

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants