jsonforms icon indicating copy to clipboard operation
jsonforms copied to clipboard

identifying child nodes /elements for css

Open valtido opened this issue 3 years ago • 1 comments

Describe the bug

It is very difficult to target some css as we can't identify individual controls.

could we therefore by default change the line here https://github.com/eclipsesource/jsonforms/blob/988f282c0f5b51ca8f2bc5d306b24f9e56230abd/packages/vanilla/src/layouts/util.tsx#L51

where the path or combination of path and index can be used to concat a class name for className="vertical-layout-item" then becomes something like className="vertical-layout-item {{path}}" where path could be username for instance.

Expected behavior

see above step.

then change

<div className={className} key={${path}-${index}}> to <div className={${className} ${path}} key={${path}-${index}}>

Steps to reproduce the issue

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Screenshots

IMG_ED26A4C278D7-1

In which browser are you experiencing the issue?

n/a

Framework

React

RendererSet

Vanilla

Additional context

No response

valtido avatar Dec 16 '21 11:12 valtido

Hi @valtido! Thanks for the suggestion. Adding parts of the path to the classes of the respective rendered element could definitely make sense. We should probably strip all array indices from the path when doing this.

sdirix avatar Dec 22 '21 16:12 sdirix