How do you use :last-child without defining the elements on the HTML page?

Question

I'm trying to define a group of buttons that are on top of each other with a black border and in order to have no overlapping borders I want to do something like this:

.myCustomButton {
  border: 1.5px solid black;
}

.myCustomButton:not(:last-child) {
  border-bottom: none;
}

I've tried a few variations of that and had no success. I assume (after some playing around with it) this is because the elements aren't a "group", so there is no actual last child.

I have tried using the "Field Group Ids" but that didn't change much. Also tried giving the "items" its own class and use :last-child on that but that also didn't work.

<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
    <items class="a">
        <Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
        <Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
        <Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
    </items>
</VBox>

To my understanding, using standard HTML and css where I define the buttons in the HTML file itself should work it out but as far as I know this is how you are supposed to do it:

<script>
    sap.ui.getCore().attachInit(function() {
        new sap.m.Shell({
            app: new sap.ui.core.ComponentContainer({
                height : "100%",
                name : "ExampleScreen2"
            })
        }).placeAt("content");
    });
</script>

So, generally speaking, am I wrong to use only one '.placeAt("content")' or am I missing another way to use :last-child correctly?

score 3 · Accepted Answer · answered Mar 13 '19 at 11:09

3

What happens is that sapui5 add a 'div' layer for each child of a VBox.

that means the generated html will look like

<div>              <-- VBox
  <div>            <-- item 1 container
    <button />
  </div>
  <div>            <-- item 2 container
    <button />
  </div>
  ...
</div>

thus your selector cannot target a class set on the item itself (because as you said, they are not sibling in the html tree)

to achieve your goal, set a class on the VBox, like 'myCustomButtonContainer' and then set your css as

.myCustomButtonContainer > .sapMFlexItem {
  border: 1.5px solid black;
}

.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
  border-bottom: none;
}

answered Mar 13 '19 at 11:09

Ji aSH

3,206
1
10
18

Brilliant, thank you very much. The extra explanation of how SAPUI5 adds the 'div' layer for each child made things much clearer for me. – Soraky Mar 13 '19 at 11:42
2

@Soraky With ``, the control won't add extra `
` around its items.
– Boghyon Hoffmann Mar 13 '19 at 12:36
this comments definitly sounds like a better solution. I wasnt aware of this property anf might be using it a lot in the future :D – Ji aSH Mar 13 '19 at 18:12

How do you use :last-child without defining the elements on the HTML page?

1 Answers1