0

I'm basically trying to add a red border to all the layouts to try to figure out which layout is not setup as I expect. I see that it's possible as shown as the start of this video: https://www.youtube.com/watch?v=Efv_cPHEqdQ but when I try it doesn't work. I've also been referring to this video which seems to do it a bit differently: https://www.youtube.com/watch?v=Swki9XXs9SA I've also been looking through this documentation but it wasn't clear it didn't seem to work when I treated the layouts as components: https://vaadin.com/docs/latest/ds/customization/styling-components

I basically want to avoid adding a class to each layout in the code and have it go on globally. This way I can easily turn it on and off to debug layout issues.

Would it be possible in the answer to include an example. I tried to create a component css file as well as a layout/view css file but neither seemed to work. The css is as simple as border: 1px solid red; the only question is where is that located. Also I did create my own customTheme folder under frontend/themes/customTheme.

UPDATE As requested in the comments I'm adding what I attempted. At least what I can remember. I forgot all that I tried so this is just a sample of what I tried.

Added frontend/themes/myCustomTheme/components/vaadin-horizontal-layout.css which contained (based on documentation and what I did for textfields):

[part="horizontal-layout"] { 
    border: 1px solid red; 
}

Added frontend/themes/myCustomTheme/layouts/views/layouts-view.css with the contents (based on the YouTube video https://www.youtube.com/watch?v=Efv_cPHEqdQ):

vaadin-vertical-layout, vaadin-horizontal-layout {
    border: 1px solid red;
}

I then tried a number of permutations of the above along with a bunch of other things that I can't remember any more. Different file locations, naming conventions, etc. The links and videos seem to indicate different ways of doing things as well. I couldn't find instructions or examples online on how to do this for layouts as they seem and/or may be treated differently then components. For example I was able to make it work for other components using

frontend/themes/myCustomTheme/vaadin-text-field.css with the contents:

[part="input-field"] {
    background-color: white;
    border: 1px solid #c5c5c5;
}
Stephane Grenier
  • 15,527
  • 38
  • 117
  • 192
  • Please add the code you have tried and how it failed (e.g. errors, stacktraces, logs, ...) so we can improve on it. – cfrick Jul 30 '21 at 17:32
  • To be quite frank I don't remember all that I tried. After about 2-3 hours I gave up and decided to ask here instead since I wasn't getting anything and it was starting to feel like I was trying random things rather than using any documentation or logic. I also couldn't find any documentation that had examples or showed how to do this. Vaadin has great documentation the main issue I have is that it's not always obvious where to find it. That being said I'm adding a couple of attempts that I can remember. – Stephane Grenier Jul 30 '21 at 20:57
  • @cfrick I added more details as requested. At least what I could remember... – Stephane Grenier Jul 30 '21 at 21:13

1 Answers1

2

This solution requires an "application theme", which OP seems to already have in place. (This implies 14.6 on the current LTS line or the respective non-LTS-version).

Have a theme setup:

  • @Theme(themeFolder = "app-theme")
  • Folder in frontend (in your dev-root) or META-INF/resources in your classpath: themes/app-theme
  • Add a theme for your HorizontalLayout relative to above path: components/vaadin-horizontal-layout.css with the following content: 
    :host {
  border: 1px solid red;
}
cfrick
  • 35,203
  • 6
  • 56
  • 68