Possible to have a row of Divs each with different left starting positions and widths that fill to adjacent sibling?

Question

I'm trying to find a way to insert divs into a container and being able to define the left starting position in pixels of each one while each div automatically has a width that fills to the neighbor sibling's left. I will have an array of the start positions for each div and could therefore calculate the width for each div in the js. But I was hoping for a more elegant solution.

I've searched far and wide for a solution but so far the best I can find is the flex solution relying on calculating the widths:

 .s-container { height: 20px; background-color: red; min-width: 100%; display: flex; } .s-child { border-left: 1px solid black; background-color: yellow; height: 100%; } 

 <div class="s-container"> <div style="flex-basis:50px;" class="s-child">left: 0</div> <div style="flex-basis:100px;" class="s-child">left: 50px</div> <div style="flex-grow:1;" class="s-child">left: 150px</div> </div> 

Is it possible to give the left position on each div and have each one fill its own width to the neighbor on the right?

Answer 1

I suppose this is a few days late but I wrote a solution that basically looks to the next sibling's start position in order to calculate the current sibling's width while looping through them. I was hoping to avoid doing it this way but it actually turned out pretty nice.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class Slide  {
  px: number;    
}

@Component({
  selector: 'app-root',
  template: `
  <div class="s-container">
    <ng-container *ngFor="let s of slides; let i = index; let last = last">
      <div *ngIf="!last" [ngStyle]="{'flex-basis': getSlidePx(i + 1) - s.px + 'px'}" class="s-child">{{s.px}}</div>
      <div *ngIf="last" style="flex-grow:1;" class="s-child">{{s.px}}</div>
    </ng-container>
  </div>

  <form [formGroup]="newSlideForm" (ngSubmit)="onInsert()">

    <div class="form-group">
      <label>Pixels</label>
      <input type="number" class="form-control" required formControlName="Pixels" (change)="newSlide.px = $event.target.value" name="pixels">
    </div>

    <input type="submit" value="Insert" [disabled]="!newSlideForm.valid" />
  </form>
  `,
  styles: [`
    .s-container {
      height: 20px;
      background-color: red;
      min-width: 100%;
      display: flex;
    }

    .s-child {
      border-left: 1px solid black;
      background-color: yellow;
      height: 100%;
    }
  `]
})
export class AppComponent implements OnInit {
  newSlide: Slide;
  newSlideForm: FormGroup;
  slides: Array<Slide>;

  constructor(private _fb: FormBuilder){
    this.newSlide = new Slide();
    this.newSlideForm = this._fb.group({
      Pixels: [0, Validators.required]
    });
  }

  getSlidePx(n: number){
    if(n < this.slides.length)
      return this.slides[n].px;
  }

  onInsert(){
    this.slides.push(this.newSlide);
    this.slides.sort((a, b) => a.px - b.px);
    this.newSlide = new Slide();
  }

  ngOnInit(){
    let temp = [];

    let s1 = new Slide();
    s1.px = 0;
    temp.push(s1);

    let s2 = new Slide();
    s2.px = 100;
    temp.push(s2);

    let s3 = new Slide();
    s3.px = 210;
    temp.push(s3);

    let s4 = new Slide();
    s4.px = 300;
    temp.push(s4);

    let s5 = new Slide();
    s5.px = 499;
    temp.push(s5);

    let s6 = new Slide();
    s6.px = 650;
    temp.push(s6);

    this.slides = temp;
  }
}