solid-style-guide icon indicating copy to clipboard operation
solid-style-guide copied to clipboard

Published 20 hours ago • verified publisher icon inrupt

button and label alignment

Open michielbdejong opened this issue 6 years ago • 1 comments

I now have the following layout in https://github.com/inrupt/generator-solid-react/pull/249: Screenshot 2019-10-28 12 53 02

I would like to change a few things (e.g. put the 'URL:' and 'Share:' labels to the left of the corresponding input field) but can't really find any instructions on how. Vincent told me I could use an input-wrap but that just seems to make the alignment of buttons and labels worse.

Can you give some guidance on how the UI elements on this page could be organized better, in compliance with the style guide?

michielbdejong avatar Oct 28 '19 11:10 michielbdejong

Update: applying classes from https://design.inrupt.com/atomic-core/?cat=Atoms#Buttons to the buttons gave a slight improvement, and <div className="input-wrap"> was useful so that the Load and Save buttons are not underneath each other, but next to each other.

Screenshot 2019-10-28 13 04 12

But I'm still struggling with how to get the label+input besides each other horizontally.

michielbdejong avatar Oct 28 '19 12:10 michielbdejong