Dealing with a section that won't stay in place but the rest of the webpage is

I recently came across the angular-split library while trying to address a specific need. It partially solved my problem, but I still have some remaining challenges.

In my setup, I have divided my content into 2 sections using angular-split. The goal is for the second section to overlap the first after reaching a width of 70%. Essentially, the first section should remain fixed while the second can be dragged over it.

For example, if the minimum width of the first section is set at 70%, dragging the second section beyond 30% width should cause it to override the first section.

To see an example of what I'm trying to achieve, you can check out this live demo: https://plnkr.co/edit/tlO2b85xXGIUdga6J9o8?p=preview

The right section should have a minimum width of 30% and a maximum width of 50%. Is there a way to implement this functionality?

Answer №1

Your app.ts has been successfully updated and I have also forked your plunker project. You can access the link below to see the changes made. It should now meet your requirements.

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AngularSplitModule} from 'angular-split';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div style="width: 100%; height: 500px; background: rgba(0,0,10, .4); border: 4px solid rgba(15, 15,211, .4);">
        <split direction="horizontal" style="border:2px solid black;position:relative;">
            <split-area size="70" >
                <p style="position:absolute;top:0;left:0;width:50%;z-index:-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </split-area>
            <split-area size="30">
                <p style="background:red;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
            </split-area>
        </split>
</div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule, AngularSplitModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

https://plnkr.co/edit/w8O2I3bD4bdXp0QsL35L?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Street View feature on Google Maps API is now showcasing a cool,

I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality s ...

Tips for changing a created Word file with Docxtemplater into a PDF format

Hey there! I am currently in the process of building a website with Angular.js and have successfully managed to generate a word document from user input. Everything was working fine until I encountered an issue. I now need to provide a way for users to pr ...

Enhance your Angular experience by adding two new columns to your JSONArray table

I am faced with a JSON-Array dilemma. Array(8) 0: (3) ["Test", "1", "222"] 1: (3) ["Test", "2", "333"] 2: (3) ["Test", "3", "444"] 3: (3) ["Test", "4", "555"] 4: (3) ["Test", "5", "666"] 5: (3) ["Test", "6", "777"] 6: (3) ["Test", "7", "888"] I want to t ...

Reach out to the property via phone if it is listed in the JSON

When receiving JSON data from the server, I come across two different structures: JSON 1: { [{ name : 'sample1', code:'sample code 1', data : { display :'test' } ...

Is there a way to modify the style within a TS-File?

I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color. Here's my code: color-variatio ...

Tips for showcasing a lineup horizontally with HTML and CSS

I'm currently working on creating a menu using HTML. I've included my links in an unordered list (ul) as shown below. In my CSS, I added a display:inline; property to the links to make them appear side by side like a menu. However, for some reaso ...

NGXS Alert: Unable to resolve parameters for TranslationEditorState: (?)

I'm currently implementing NGXS for state management within my Angular 9 application. I've encountered a specific issue where any attempt at dependency injection in one of the state classes results in an error message stating "Error: Can't r ...

Issues arising with the functionality of CSS media queries when used in conjunction with the

I created a webpage that is functioning well and responsive on its own. However, when I integrate the same files with the Spring framework, the responsiveness of the webpage seems to be lost. To ensure the responsiveness of the Spring webpage, I tested it ...

Automated Integration with Visual Studio Team Services: Empowering ASP.NET Core and Angular 4 Collaboration

I am currently working on an ASP.NET Core web app using Visual Studio 2017, and I am developing an Angular 4 front-end project in Visual Studio Code. The goal is for the Angular 4 project to be integrated with the Core web app, and I need to set up continu ...

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

Transform a collection of objects into instances of a class

I have a scenario where I am fetching an array of objects from PHP and my goal is to transform this data into instances of a class called ContentData. The current solution that I have seems to work fine, but deep down I sense that there might be a more el ...

Manipulating text alignment and positioning in CSS

Can someone help me achieve this CSS result? img1 This is what I have so far: img2 I'm struggling to center the elements and add a line in CSS. Any advice? I thought about using margin: auto, but I'm not sure if that's the best approach ...

Angular: Automatically close the side navigation menu when a user clicks anywhere outside of it in the screen

My current issue involves using a sidenav library where I need to close the sidenav when the user clicks anywhere on the screen. Despite several attempts, I have been unable to make it work successfully. Below is the code snippet in question: html < ...

Leverage Angular2 components within Angular4 framework

Would it be possible to utilize angular2 components in angular4 projects? Specifically, I am interested in using a chart generation library from . However, it seems that the dependencies of this library are not compatible with my application. Are angular2 ...

Merging double borders in a div using CSS is essential for creating

Upon examining this sample, it's evident that the borders do not blend together. css: div{ float:left; background-color:moccasin; width:100px; height:100px; border:1px solid tomato; } The number of divs is arbitrary, and only on ...

Unable to generate a file on Firebase platform

I've made updates to my firestore rules, and while the simulator is working correctly, I'm encountering an insufficient permissions error when creating a new document. Below are the firebase rules in question: match /users/{usersid} { a ...

Tips for personalizing the FileField in wtforms to function as an image button

I'm attempting to display an image from my project's directory as an icon instead of the standard "choose file" button. Unfortunately, my attempts thus far have been unsuccessful. Not only is the image not loading, but the original button is only ...

Keep a consistent square proportion within a horizontal adaptable design

I am currently working on creating a responsive material list view that consists of cards with images, text details, and user actions. The challenge I'm facing is that the height of the cards can vary due to the different textual details, and the widt ...

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

I am looking to access a public method from a different component in Angular 2

Trying to access the headerExpand property from app.component is causing an error message in the console: metadata_resolver.js:559 Uncaught Error: Invalid providers for "Page1" - only instances of Provider and Type are allowed, got: [?undefined?] page1 ...