Learn how to divide column layouts into precise measurements and create a container that cannot be scrolled using Angular Nebular

I am currently utilizing the nebular theme and have set a fixed header. I am attempting to split columns with specified width and height, but for some reason, my width and height properties in the local component scss are not affecting the column layouts correctly.

<nb-layout>
   <nb-layout-column>First</nb-layout-column>
   <nb-layout-column>Second</nb-layout-column>
</nb-layout>

Due to the fixed header, the body container starts from the top:0 position, causing the body container to scroll. I am looking for a way to prevent my body container from scrolling without using overflow:hidden.

You can access my stackblitz link here: https://stackblitz.com/edit/github-gv8sej

  1. I need assistance in setting the first column width to occupy 70% and the second one to be 30%, totaling 100% of the <nb-layout> container.
  2. How can I prevent my home component from being scrollable while maintaining a fixed header?
angularhtmlcsslayoutnebular

Answer №1

To achieve a nebular layout, utilize the Flex property instead of setting a fixed width.

nb-layout{
  width:100%;
  height:100%;
}
nb-layout-column:first-child {
  flex: 2 !important;
  background: #e3e6f9;
}
nb-layout-column:last-child {
  flex: 1 !important;
  background: #f4f4f7;
}

The issue with scrolling may originate from this CSS line:

.nb-theme-default nb-layout .layout {
   min-height: 100vh;
}

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

Repairing the collapsible side panel

I've successfully integrated the off-canvas sidebar template from Twitter Bootstrap into my project and have fixed it for small/medium views. However, I'm experiencing some difficulties when trying to make it work properly for extra-small devices ...

htmlcsstwitter-bootstrapcanvas

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

Error in Ruby on Rails: View cannot locate the path for Collection routes

I have included a collection route with POST method in my routes file. resources: curated_items do collection do post 'duplicate' end end However, I am unable to locate the path for the 'duplicate' prefix in my view.v ...

htmlruby-on-railsrubyruby-on-rails-3ruby-on-rails-4

The footer bar is not appearing at the bottom of the page as expected

I'm having trouble implementing the sticky footer from the bootstrap4 starter template. The footer is not sticking to the bottom of the page as expected, and I'm not sure why. Both CSS files (starter-template.css and sticky-footer.css) from the ...

htmlcssbootstrap-4footer

CSS accordion causing radio button to malfunction

I am encountering an issue with a radio button placed inside a css accordion. It seems like the styling from the accordion might be causing interference with the functionality of the radio button. Additionally, as the accordion is constructed using a check ...

javascripthtmlcssdojo

Tips for accessing the content within a DIV tag in a new browser tab

$('.menu div.profile-btn').on('click', function () { $('.mainservice-page').fadeIn(1200); } The script above effectively displays the contents of the .mainservice-page div, but I would like to open them in a new tab. Is ...

javascriptjqueryhtml

How can I make sure to wait for a subscribe call in Angular before proceeding?

Is there a way to pause the execution of my code until a subscribe function is complete? I have a subscribe function within another function, and I want to ensure that the outer function only finishes once the subscribe function has executed. Here is my ...

angulartypescript

"I am looking for a way to retrieve dynamic data from a (click) event in Angular. Can

Within my component, I have a video loaded in an i tag on a click event. The challenge is accessing the video ID from the video.component.ts file in order to dynamically load a new video. The solution has been elusive so far. <li *ngFor="let video of c ...

javascripthtmlangular

Creating an image from a webpage by utilizing JavaScript

Similar Question: Using HTML5/Canvas/Javascript to capture web page as an image I have a webpage where I fetch details from a database and display them in a table format. I would like to save this page as an image so that I can email it to the user. C ...

javascriptscreenshothtml

Blurred background images following the upgrade to Internet Explorer 11

This morning, I received an automatic update to IE 11 and noticed that some of my background images appeared blurry. After confirming that the images were not the issue, I opened Chrome and saw that they were crisp again. This left me completely puzzled. ...

cssbackground-imageinternet-explorer-11

Creating an XML file with Angular 2: Step-by-step guide

While attempting to create XML files using Angular 2, I encountered an issue when trying to include tags with a namespace using xml-Writers. The error message displayed was: XML Parsing Error: Prefix not bound to a namespace' at the IR name space: ...

xmlangular

What steps should I take to successfully implement a div ID selector in an HTML document?

<div id="nofries"> <h1 class="restaurant mt-5 ms-3">CRAZY GREEKS</h1> <h3 class="ms-5">GREEK FOOD, SUBS &amp; PIZZA</h3> </div> I'm having trouble with my div ID "nofries" not ...

htmlcssbootstrap-4

The CSS transition for changing the background image of a div upon hover is not functioning properly

I am attempting to add a transition effect on hover to a div element. Despite creating CSS code for the transition, it does not seem to be working properly in Chrome or Firefox. #header { border: 0.1px solid #666; background-image: linear-gradi ...

htmlcssbackground-imagecss-transitions

How to retrieve the image source from a block using jQuery

Currently, I am working on developing a slider for my webpage using jquery's "Cycle" plugin. However, I have encountered an issue with accessing the image sources used in the slider. To provide more context, here is a snippet of code from the 'he ...

javascriptjqueryhtmlcssjquery-cycle

Retrieve information from a MySQL database and integrate it into a different application

This php script is used to generate a table with a "book" button next to each row. The goal is to extract the values of "phase" and "site" from the specific row where the "book" button is clicked, and transfer them to another form (in "restricted.php") fo ...

javascriptphphtmlmysqlforms

Bootstrap Carousel with descriptions in a separate container without any display or hiding transitions

I have created a slider using Bootstrap and some JavaScript code that I modified from various sources. Everything is working well, but I want to remove the transition or animation that occurs when the caption changes. Currently, the captions seem to slide ...

javascripthtmlcssbootstrap-4carousel

Having trouble positioning a specific element at the top right of the header navbar in Laravel Bootstrap 5

Is there a way to create a top navbar with the project name and menu on the left, and user management on the right? Currently, both options are aligned to the left. Here is an example of what I have: top navbar This navbar is placed in the header, and her ...

htmlcsslaravelnavbarbootstrap-5

How can you achieve a seamless or infinite scrolling effect on a webpage?

My idea is as follows: Imagine a long web page where, instead of the scrolling coming to an abrupt stop when the user reaches the end, I want the page to reload from the bottom and allow the scrolling to continue seamlessly. Specifics Picture this - as ...

javascriptjqueryhtmlcss

Uncover the content of a base64 encoded string and convert it into

A JSON response has been linked on the user's request to retrieve an excel document. The structure of the response is as follows: { "format": // file extn ----only xls "docTitle": //file name "document" :// base 64 encoded data } The attem ...

javascriptangulartypescript

Can multiple print buttons in different modals be connected to individual divs within their respective modals?

I am currently developing a webpage using the Foundation 5 framework that features a table of information. Each row in the table contains a link that, when clicked, opens a specific modal displaying detailed information related to that row. I want to add a ...

javascriptjqueryhtmlcsszurb-foundation