Is it feasible for a series of Divs to be arranged in a row, each with varying starting positions and widths that seamlessly fill up to their

Question

Is it feasible for a series of Divs to be arranged in a row, each with varying starting positions and widths that seamlessly fill up to their

Seeking a method to incorporate divs into a container with the ability to specify the left starting position in pixels for each one, while also ensuring that each div automatically stretches to its neighbor sibling's left. I have an array of start positions for each div and could potentially calculate the width for each div in JavaScript. However, I am hoping for a more refined solution.

I have extensively searched for a resolution and thus far, the most viable option I have come across is the flex solution which involves computing 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 there a way to assign the left position for each div and ensure that each one fills its own width up to the neighboring element on the right?

javascript html css angular angular2-template

Answer 1

Answer №1

Although it may be a bit late, I came up with a solution that involves checking the next sibling's starting position to determine the width of the current sibling while iterating through them. Initially, I was hesitant to go down this route, but it ended up working quite nicely.

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;
  }
}

Answer 2

Although it may be a bit late, I came up with a solution that involves checking the next sibling's starting position to determine the width of the current sibling while iterating through them. Initially, I was hesitant to go down this route, but it ended up working quite nicely.

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;
  }
}

Is it feasible for a series of Divs to be arranged in a row, each with varying starting positions and widths that seamlessly fill up to their

Answer №1

Similar questions

Nested array in an object within ag-grid

Display the first item last in an *ngFor loop in Nativescript Angular

Tips for Connecting Jquery Ajax to the Parent Element

What is the best way to update the value of a PHP variable using AJAX or jQuery?

Issue with Charts.js not rendering properly during page load

Attempting to create a button cluster using Bootstrap and AngularJS for the purpose of navigating to various URLs

There is a noticeable absence of top padding

Ways to eliminate unnecessary items from a JavaScript object array and generate a fresh array

Code update results in a blank screen on Angular-NativeScript application

Show a brief description alongside multiple post thumbnails

Is it possible to utilize the base-tag in order to transmit parameters?

Facing a 'No provider for' error in my Angular 2.0.0 application

Crafting personalized objects from an array

Replace the <button> tag with an <input> tag that triggers an onclick event

Converting an ajax request from jQuery to pure JavaScript

Utilize Firestore's limit feature with variables

What is the best way to set conditions for document side script?

I am experiencing a peculiar issue where a string is properly displayed in HTML, but appears as "undefined"

Troubles with styling RadioButtons in jQuery Mobile

The property 'matCellDefTrackBy' cannot be bound to 'mat-cell' as it is not recognized as a valid property