Setting the height of the Angular UI modal relative to the height of the window

I am currently working on a modal that contains a significant amount of text. My main goal is to limit the height of the modal to the size of the window, while also adding a scrollbar to the content area positioned above the OK button.

Check out the Plunkr for more details.

<note>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
      <from>Jani</from>
      <to>Tove</to>
....
javascriptcssangularjs

Answer №1

Enhanced to utilize the window.innerHeight property and implement an attribute/directive named clientHeight. This directive accepts a numerical value, which is then used as a percentage to calculate the height of certain elements based on the window.innerHeight. It also adjusts the overflow-y property accordingly.

http://plnkr.co/edit/9eg3jH0vILntygMn3ieD?p=preview

app.directive('clientHeight', function(){
  return {
    link:function(scope, iElem, iAttrs){
      debugger;
      iElem.css('height', window.innerHeight*iAttrs.clientHeight/100+'px')
      iElem.css('overflow-y', 'scroll')
    }
  }
});

It may be possible to achieve the same effect using CSS alone, perhaps with the use of "calc" or other methods. However, the JavaScript solution provided above works effectively as well.

Answer №2

CSS alone can handle this task without the use of JavaScript.

.content-container {
    max-height: 600px; /* customize based on your requirements */
    overflow-y: scroll;
}

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 XMLHttpRequest onload() function is failing to pass an instance of the XMLHttpRequest object

I am facing an issue with a function that sends a basic AJAX request to my server. The JavaScript code in the browser is as follows: function testRequest() { var xhr = new XMLHttpRequest(); xhr.onload = () => { console.log("RESPONSE R ...

javascriptajaxexpresshttpxmlhttprequest

Using AngularJS API within a standalone function: Tips and tricks

I'm diving into the world of AngularJS and I want to make an HTTP GET request to a distant server without messing up my current view code. After some research, I discovered a way to execute a function right after the HTML is loaded by using a standalo ...

javascriptangularjshttp

Exploring the capabilities of utilizing filters within a ternary operator in AngularJS

Can a filter be applied to a variable in the template within a ternary operation? <img ng-src="{{ image_url && image_url|filter:"foo" || other_url }}"> In this scenario, the filter is custom-made and I prefer not to alter it to accommodate ...

javascriptangularjsternary-operator

Angular file upload component with customizable file size limits

I'm currently developing an upload file feature that will transmit the file via nodejs. However, I am encountering an issue related to file size. Whenever the file exceeds a few kilobytes, I encounter the following error: Error: request entity too la ...

javascriptnode.jsangularfile-upload

What is the best way to incorporate options using jQuery?

Currently, I am incorporating a jQuery plugin for modals into my website. The plugin/code offers the functionality to customize the background color of the modal. For more details on how to do this, you can visit the plugin's official website. Althou ...

javascriptjquery

Issues with implementing ng-show and ng-disabled functions in AngularJS

I am currently working on a simple demo HTML page that involves client side form validation. My goal is to incorporate Bootstrap, AngularJS, and jQuery into this project, even though I am relatively new to AngularJS. However, I am facing some issues with ...

angularjstwitter-bootstrap

Reloading content using AJAX

Index.php ... <form id="calculator_form" name="form" action="" method="get" > <input name="one" type="text"> <input name="two" type="text"> <input type="submit"> </form> ... <!-- reload area --> <?php if(isset( ...

javascriptphpjqueryajax

Pressing the non-responsive button automatically chooses the following item

This example demonstrates how to create a disabled button: import { Grid, IconButton } from "@material-ui/core"; import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; export default function App() { const handleClick = (e) ...

javascriptreactjsmaterial-ui

Error: The type of object is not defined as a constructor (evaluating 'angular.controller('myView')')

While conducting unit testing with karma/jasmine for my test cases, I encountered the following error. I made modifications to the controller by incorporating angular.controller in the spec file, but the issue persists. Is there a solution available? Typ ...

angularjskarma-jasminegulp-karma

What is the best way to align the navigation bar to the left using bootstrap?

I'm having trouble creating a navigation bar for my website using bootstrap 5. I tried to move the bar to the left by adding the class margin left auto (ml-auto), but it didn't work as expected. Can someone help me figure out why? Thank you in ad ...

htmlcssbootstrap-5navigationbar

The challenge lies in updating props using the `onchange` event in Vue.js 2

I am facing an issue with updating the data when using on-change from the select box. Initially, I can update the data by clicking a button or triggering the on-change event once. However, I encounter difficulties in updating the data multiple times throug ...

javascriptvue.jsvuejs2

Managing timestamps of creation and modification with Sequelize and Postgresql

As a newcomer to Sequelize, I find myself grappling with the intricacies of model timestamps management. Despite prior experience with another ORM in a different language, I'm struggling to wrap my head around how to automatically handle "createdAt" a ...

javascriptnode.jspostgresqlsequelize.js

Implementing auto-population of input field in Vue JS based on dropdown selection

I'm in search of a solution for automatically filling input fields in Vue.js. My form consists of various input types such as text, select dropdowns, and quantities. I want the vCPU, vRAM, and Storage Capacity fields to be filled with predefined value ...

javascriptvue.jsvuejs3

Accessing and manipulating web elements using either XPath or CSS selectors

Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...

pythonhtmlcssseleniumxpath

Can a blob file be transformed into base64Data using Javascript specifically in Ionic and Angular frameworks?

https://i.stack.imgur.com/3aMyx.png[ async FileZip() { const code = await fetch("./assets/input.txt") var blob = await downloadZip([code]).blob() console.log(blob); function blobToBase64(blob: Blob): Observable<string> { r ...

javascriptangulartypescriptionic-frameworkblob

Ways to assign the output of a function to a variable in JavaScript

I am looking to update the value of my function to a variable. As an example, I have the following: <input v-model="search.steering" @input="onChange('steering')"/> This means that I want to insert the steering every time I input text. ...

javascriptvue.jsvuejs2

Using Javascript and Node.js to send a JSON request

While browsing through this particular question, I came across a method in node.js to distinguish between html requests and json requests: app.get('/route', function (req, res) { if (req.is('json')) res.json(data); else if (req ...

javascriptjqueryjsonnode.js

Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...

htmlcssimagehover

When utilizing state in ReactJS to modify the color of my button, the change does not take effect on the first click. How can I troub

Whenever I click the button that routes to different locations via an API, the route works fine but the button color doesn't change on the first click. To address this issue, I implemented the useState hook and CSS to dynamically change the button co ...

cssreactjsbuttonreact-hooksbackground-color

Using Ajax to insert data into WordPress

Looking to incorporate data into the WordPress database using Ajax integration. functions.php function addDataToDB(){ global $wpdb, $count; $count = 25; $wpdb->insert( 'custom_table', array( 'slid ...

javascriptphpjqueryajaxwordpress