(Actually, I want the title “Eva’s Smartphone” to be a pop-up object, but that doesn’t seem to work; so I’ll delete the title and rename “Graph” to “Eva’s Smartphone”, but then it needs to be to the very left, right next to the network symbol)
I’m not familiar with CSS and tried text-align, horizontal-align but that didn’t work.
I think the problem here is the limitation of the oh specific list and label items. Every (nearly) oh component is just based off of the f7 library of widgets, but with many of the configuration options reduced or set to sensible defaults in order to greatly simplify the process of widget creation. The after slot in these components represents a specific subsection of the widget relative to some of the other subsections, so there’s only so much you can do about alignment within that small subsection. You’ll never get something in the after slot over to that part of the widget because that’s the title slot.
In the oh-list-item you really only have access to three or four of these subsections, but if you look at the f7 documentation for a list item you will see that there are a dozen or so.
At this point, if you want to be able to have that much control over the customization of the list item then you will need to graduate from the oh-list-item to the f7-list-item instead. It mostly just takes a little practice to go from the f7 help docs and the way they lay out properties and list the available slots back to the widget editor yaml. But, with the numerous examples on the forums here, and the work you’ve already done with the widget yaml, you should be able to make the jump.
Once you get comfortable with the more general f7 widgets, then the only practical limitation to what you can configure is the time you care to put into it.
While this might be solved easily (if one knows how), I tend to agree with you that getting familiar with f7 might be worth the effort for me.
The f7 documentation seems plausible enough. The biggest obstacle right now is the transformation from f7 to OH (as you indicated it would). I’ll try to tackle it and might be back with more stupid questions
I’ve played around with f7 a little bit now and made some progress. Using it, the above mentioned problem of vertical alignment doesn’t appear anymore.
However, for some reason it starts a new column:
component: oh-list-card
config:
title: This is just the card title not the list widget
accordionList: true
slots:
default:
- component: oh-list-item
config:
title: At least one list item must be visible for the list widget to be drawn
slots:
accordion:
- component: oh-list
config: {}
slots:
? default
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- align-items-left
slots:
default:
- component: f7-col
config:
class:
- align-items-left
slots: {}
- component: oh-list-item
config:
class:
- align-items-left
icon: oh:network
iconUseState: true
item: BennetPC_Online
- component: f7-col
config: {}
slots:
default:
- component: oh-list-item
config:
class:
- align-items-left
listButton: true
action: popup
title: Bennet-PC
actionModal: page:z_BennetPC_Online
- component: f7-col
config:
class:
- align-items-left
slots:
default:
- component: oh-label-item
config:
item: BennetPC_Zuletztgesehen
- component: oh-list-item
config:
title: B
- component: oh-list-item
config:
title: C
- component: oh-list
config:
accordionList: true
thisDoesNotWork: This list is not rendered because it has no child items and
there is nothing to show
- component: oh-list
config:
accordionList: true
slots:
default:
- component: oh-list-item
config:
title: But you can nest accordions lists as long as there are items to be drawn
slots:
accordion:
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
title: E
- component: oh-list-item
config:
title: F
- component: oh-list-item
config:
title: G
Do you have an explanation/solution for me (again )?
You have a lot of extra pieces between the oh-list and the f7-list-items. The list items should be direct children (directly in a slot) of the oh-list and then the magic you’re looking for can happen inside the f7-list-item.
Here’s a sample of the sort of things you can do with the f7-list-items
component: oh-list-card
config:
title: "This card uses f7-list-items in an oh-list: f7-list-items have many slots to choose"
slots:
default:
- component: f7-list-item
config:
accordionItem: true
slots:
content-start:
- component: Label
config:
text: CoSt
content:
- component: Label
config:
text: Co
inner-start:
- component: Label
config:
text: InSt
inner:
- component: Label
config:
text: In
media:
- component: Label
config:
text: M
before-title:
- component: Label
config:
text: BeTi
after-title:
- component: Label
config:
text: AfTi
subtitle:
- component: Label
config:
text: Subti
text:
- component: Label
config:
text: Text
header:
- component: Label
config:
text: Head
footer:
- component: Label
config:
text: Foot
after-start:
- component: Label
config:
text: AfSt
after:
- component: Label
config:
text: Af
title:
- component: Label
config:
text: Ti
- component: f7-list-item
slots:
content-start:
- component: Label
config:
text: Slots are flex aligned by default
content:
- component: Label
config:
text: So just two slots will appear left and right justified
- component: f7-list-item
slots:
header:
- component: f7-icon
config:
f7: wifi
- component: Label
config:
text: Flex spacing applies inside a slot
footer:
- component: f7-icon
config:
f7: checkmark_seal
- component: Label
config:
text: So 4 items in 2 slots are evenly spaced
- component: f7-list-item
slots:
header:
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: wifi
- component: Label
config:
text: Using f7-rows
footer:
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: checkmark_seal
- component: Label
config:
text: Will help keep items together in a single slot
- component: f7-list-item
config:
accordionItem: true
title: F7 Accordion items are a little different
slots:
default:
- component: f7-accordion-content
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
title: A
- component: oh-list-item
config:
title: B
- component: oh-list-item
config:
title: C
Note that getting the accordion to work with the f7-list-items is a little more involved because you need to explicitly define the extra layer of the f7-accordion-content component (which is done behind the scenes if you are using the ‘oh-list-items’).
Great, that was very helpful!
Now I’m almost there; it works fine within an accordion, too.
The last thing that bothers me is the wasted space when using rows:
And maybe another question, it’s not important for this example but I’m likely to need it later: I tried to make your example above sortable by setting sortable to true, which didn’t work out. Is it in the wrong position or what could I try? If it’s too complicated, don’t bother; I can live without that functionality
component: oh-list-card
config:
title: "This card uses f7-list-items in an oh-list: f7-list-items have many
slots to choose"
slots:
default:
- component: f7-list-item
config:
accordionItem: true
sortable: true
slots:
content-start:
- component: Label
config:
text: CoSt
I assume that space is a result of the fact that you are trying to pack oh-list-items inside the f7-list-item. Not everything inside the oh-list has to be a list item widget, just each initial child object. In fact, it’s better if you put more basic widgets inside the list items because they have fewer default setting so you have more control. The structure should look like this:
List
List Item Widget #1
Any basic widget you want #1.1
Any basic widget you want #1.2
List Item Widget #2
Any basic widget you want #2.1
Any basic widget you want #2.2
The oh-list-items have some formatting that I don’t think you can override. If you look through the components reference page, you’ll see that it’s subdivided into system widgets, card, list widgets, etc. Each of these groups have different intended uses. The system widgets at the top are the most basic with the least default formatting so you could use those to have more control or the f7 equivalent to have the most control.
So for your case, you could replace the first oh-list-item that you’re using for the network icon with an oh-icon widget or the f7 equivalent (f7 icons can be found here), the only difference for the f7 is instead of a simple iconUseState property that’s built into the oh-icon, you’d have to manually define the change icon color based on the item state.
You could replace the second oh-list-item with an oh-button widget. etc.
I’ve never tried to use the sortable option, but I don’t think you can have both the sortable and the accordion, I think you have to choose one or the other.
Should be very simple, but I just don’t get it to work: Just the last 3 lines are relevant; I changed the item to a very simple oh-icon but it doesn’t appear …
Strangely, if I change the icon-setting from “oh:network” to “network” the symbol is shown (not surprisingly the flexibility (on/off-colors) is lost). So it seems to have something to do with the icon-name? I don’t understand this behavior …
Use --f7-safe-area-right: 0 on the surrounding f7-list-item to get rid of the space
Some general informations to the already very good recommendations that @JustinG gave you.
Try to avoid using f7-row / f7-col components inside your f7-/oh-list-item components as they might mess up the intended structure of the component on some devices.
You can’t use action properties on the oh-icon component - so these shouldn’t work:
Be aware that these sorting won’t get saved out-of-the-box and will be lost after reloading the page (due to the fact, that you hardcoded the order of the components inside the YAML)
There should be ways to save the order as an item-state (and using the oh-repeater to dynamically build up the list from these saved informations), but this is a bit more advanced and currently does not seem to work as there is a bug in the oh/f7-list-item components, which makes sorting impossible in combination with the oh-repeater.
I don’t know where to put the proposed “–f7-safe-area-right: 0”. I tried to put it in line 8 which didn’t work and then a few others just to make sure, but no success either.
Don’t I need the f7-row/col components for alignment reasons? The symbol and name should be next to each other on the left, the date/time on the right. Before, I had the problem that they were evenly spaced.
Not sure if I understand you correctly, but the popup-window works fine:
sorting: that’s interesting and worked immediately (due to my lack of experience it usually takes me several tries to get something running in openhab …). However, I originally thought of an automatic sorting; e.g. click on a button and then the list would be sorted by date/time or alphabetically. But that’s not really important to me at the moment and probably quite difficult to achieve.
This is a css variable given from the underlying framework, so you have to put this inside the style: part of your component. As you want to remove the space of the right element, the second f7-list-item would be the right one (line 38 in your example).
You could do that but there a other ways to achieve your goal with less code and a bit more robust. For example, something like this should work (you have to put in your actions, item states and so on obviously):
The oh-icon component have no action slots - the behaviour you see is presumably coming from the oh-label-item below (starting at line 28) and not from the icon.
I took much longer than I had initially expected, but now I’m finally there Special thanks to @JustinG and @RGroll - you were very patient with me …
Here’s the result which looks quite nice:
It’s got drop-down fields, variable icons, well aligned objects within the drop-down field and opens graphs (nothing really spectacular for the OH-pros but for a beginner like me quite satisfactory).
Only one thing that’s a little strange: in the first line there’s a “-” and I can’t seem to get rid off it, but it’s hard to see anyway.
In case some other beginner is interested, here’s the code (ignore the end, it’s just repetitive with different items):