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

Overflow of dropdown menus in HTML CSS

Hello, I am new to both html and stack overflow. Please forgive me if this question has already been asked, as I couldn't find anything (but maybe I didn't search enough?). I have tried using overflow and clear properties, but I am struggling to ...

Position the right div to float to the right with a dynamic width ahead of the left div in HTML to achieve

This particular challenge has proven to be quite difficult for me, and I have a feeling that I am overlooking something simple. My goal is to create a layout with a fixed-width left sidebar and a responsive variable-width content section on the right. Th ...

Distinguishing Font Sizes in Safari Compared to UIWebView

When the page is loaded in Safari, everything looks perfect. However, when viewed in a UIWebView, all the fonts appear enlarged. I've done my research and tried various solutions like: - Setting WebView.scalesPageToFit = true - Applying default con ...

Include an additional Div tag in the existing row

I've been attempting to include an additional div, but it consistently appears as the second row.. I want all of them to be on the same row and aligned with each other. Here is the HTML code: <div class="content-grids"> <div clas ...

Aligning HTML headers in a horizontal manner

Can anyone help me out here? I have a div containing 4 elements that are currently stacked on top of each other. I want them to be aligned horizontally instead. The div's ID is #ninesixty. Thank you in advance! HTML <header> <div id="ni ...

conceal a div in Angular when the user is authenticated

One of my tasks involves managing the visibility of a div based on whether the user is logged in. This functionality is achieved by utilizing an authentication service in Angular and tokens from Django. Component.html <a *ngIf="authService.isLoggedIn( ...

When using IE6, images may momentarily appear stretched when set to height:auto

I have set the height to auto, however I am observing that small thumbnail images are being momentarily stretched vertically in Internet Explorer 6 before adjusting to their correct height. It is worth mentioning that the image tag in the HTML appears as ...

When the back button is pressed on android, the navbar does not immediately refresh the active class

When using a webapp on Chrome for Android, pressing the back button results in double active items in the navbar. Clicking outside of the navbar removes the old active item. I attempted to resolve the issue by adding [routerLinkActiveOptions]="{ exact: tr ...

Different methods for adjusting CSS properties that are dependent on other components

I'm currently working on a website using the React library. While I have made progress, I am stuck on how to adjust CSS properties that are interdependent. Specifically, I need help removing the blur filter from my text area .mirror-container which is ...

How to precisely position a div within a table cell using Firefox

Currently, I am developing a script that replaces ads. At times, advertisements show up inside of <td> tags like the following: <tr> <td align="right" width="40%"><a><img src="ad.jpg"></a></td> <td>123&l ...

Invoke a static method from within a class in Typescript (Angular HttpInterceptor)

Recently, I've been working on an http interceptor that was functioning smoothly until just yesterday. It consists of static methods, and for some reason, one of them is now causing issues. Here is the error message displayed in the console: my.c ...

How to make text transition between colors using CSS or jQuery

I'm looking to make a text blink with alternating colors: For instance: blinking a text with white, green, white, green, white, green I am open to either using jQuery or CSS. ...

Which particular files should be included such as CSS and JavaScript?

After downloading bootstrap4, I'm unsure which css, js, or other files are necessary to include in order to make my form Bootstrap ready. My current task involves creating a form in CakePHP 3. Click here for more information on how to create a form ...

Unable to bind input data with interface in Ionic 4 – issues persist

I am working with an interface in Ionic that looks like this: // mydata.model.ts export interface Mydata{ id: string; name: string; date: string } To add new data to the backend, I am binding my data within my component using <ion-input> a ...

Having excessive space within an H1 heading

Having an issue with a PHP file on my test server that is displaying extra white space, which is highlighted by a red box. This whitespace is also shown in the developer tools view. When the file is outputted, all of the content appears on one line. Code: ...

Angular implementation for dynamic data fetching in Charts.js

Having an issue with dynamically calling data from my API to populate a Chart.js. Chart.js requires JSON to function properly, and everything works fine when I use local JSON data. However, when trying to use JSON data from the API, I encounter difficultie ...

Aligned to the right, the ::before element stands out in the design

I have a button that already includes an ::after element below it, but I am looking to add a shape/element to the right side of the div. a { position: relative; display: inline-block; padding: 15px 10px; margin: 0 5px; color: #222; f ...

How to incorporate scope into the Transloco Translation API?

When using this.translocoService.translate('object.test');, how can I set the scope? My translation files are located in a folder named "MyFolder", so the scope will be MyFolder. The structure of my *.json files is as follows: { "demo": "te ...

Utilizing CSS to place an image on top of the upcoming <div> container

My goal is to create a layout similar to the one displayed in the linked image. https://i.stack.imgur.com/7DSE9.jpg Currently, I am using Bootstrap 3 and my HTML markup looks like this: <body class="gray-bg"> <section class="white-bg"> <d ...

The specified 'DOCUMENT' export could not be located within the '@angular/platform-browser' module

Encountered an issue while attempting to update my IONIC app from version 3 to 4 Tried updating all plugins and modules to the latest versions available, but no success. ERROR in ./node_modules/ionic-angular/components/app/app.js 24:35-43 "export 'D ...