I'm in the midst of developing a web application specifically for tablets. My goal is to display a modal dialog with a title bar and body that dynamically adjusts in height based on its content. If the content exceeds the viewport size, I want the dialog to have a scroll bar within the body and cap the maximum height at either the viewport's or parent's height. Is there a way to accomplish this using CSS/JS?
Just a little more effort
Check this out
I included overflow-y: hidden; to .dialog and it did the trick
.screen {
width: 800px;
height: 200px;
font-family: sans-serif;
display: grid;
place-items: center;
background-color: gray;
}
div.titlebar {
background-color: green;
height: 32px;
display: grid;
place-items: center;
}
div.body {
overflow-y: scroll;
background-color: purple;
/* setting height to 100% (of the parent) */
/* minus the 32px of the header */
height: calc(100% - 32px);
}
div.dialog {
width: 400px;
height: auto; /* auto size ... */
max-height: 100%; /* ... but dont grow bigger than screen */
display: flex;
flex-direction: column;
background-color: yellow;
overflow-y: hidden;
}<div class="screen">
<div class="dialog">
<div class="titlebar">Title</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error
praesentium aut laboriosam modi eius ex cum, ullam placeat, beatae,
nobis est quasi voluptate alias necessitatibus excepturi? Voluptas,
ut! Maxime consequuntur, quod? Ipsa ullam eveniet, dolore voluptas
eius obcaecati vero sint aut at sapiente! Vel iure distinctio pariatur
maxime, illo ab voluptate veritatis, porro delectus, earum molestiae
at ipsam ducimus dicta. Laboriosam perspiciatis molestias voluptatibus
modi dolorem ea asperiores assumenda alias minus, saepe facilis nam
consequuntur nulla ipsum delectus totam itaque consequatur molestiae.
Quibusdam nam, vero fugit mollitia minima dolor, eveniet obcaecati
sint iste inventore explicabo eligendi ratione harum, tempore quasi.
</div>
</div>
</div>One simple solution is to apply the CSS properties max-height: 100vh; and overflow-y: auto;.
If necessary, adjust the value of max-height or consider using calc(100vh - 30px) to account for any extra spacing in the modal height.
I am encountering an issue where, upon attempting to create a new page Object, it successfully sends the data to the backend but does not update the array. I have to refresh the page in order to view the entire array. Within the frontend, I am utilizing O ...
I'm trying to modify my code so that when it adds 1 to certain numbers, the result is always double the original number. For example, adding 1 to 1 should give me 11, not 2. fs.readFile(`${dir}/warns/${mentioned.id}.txt`, 'utf8', ...
I am currently working on a functionality that involves extracting an object from json and displaying its key-value pairs using 'ng-repeat' in AngularJS. The form includes checkboxes where the value can be either true or false, determining if the ...
Something seems off with MUI. I was working on my project yesterday and makeStyles was functioning properly, but now it's suddenly stopped working. I'm encountering an error when calling it here: https://i.sstatic.net/tBf1I.png I suspect the iss ...
I am currently learning Angular and experimenting with the Symfony2 + AngularJS combination. I am facing a specific issue that I need help with: Within my index.html file, I have the following script: <script> global = {}; $(document).ready ...
Currently, my focus is on creating a single-page website where the main content is displayed in large boxes arranged vertically down the page. If you have any suggestions or thoughts on using JavaScript to navigate to each content box more efficiently, I ...
In my current project, I am utilizing react styled components for styling. One issue that I have encountered is with the text placement within a box and the need to style it differently when checked. What have I attempted so far? I created an outer div a ...
I'm looking to center the heading text vertically within the div, but currently it is being pushed down with margin-top which is causing issues when the titles spill over onto a second line. For reference, please check out the example here: HTML ...
Hey everyone, I've run into a strange issue while trying to pass string parameters to a JavaScript function from the code behind. Here is the current code snippet that I believe is causing the problem: thumbnail = "<a href = 'javascript:Remov ...
On my WordPress options page, I am utilizing the Fluent Framework to create fields. This framework is quite similar to Meta Box, as both make use of the do_settings_fields function to generate code like the following: <table class="form-table"> < ...
I have successfully incorporated a code to add a blue underline to the company name. However, in mobile view, the blue line appears on the first line. How can I adjust it so that it starts from the second line? Below is my CSS code: label { margin: 0; ...
According to the documentation from Awesomium, the event WebView.LoadingFrameComplete is triggered when a frame finishes loading. This description seems somewhat ambiguous. Does this event coincide with the JavaScript load event of the window? Or perhap ...
I am faced with a challenge where I have 4 elements nested inside a container element. The height of the container should be set to 100% of the browser window. The inner elements need to stack vertically, with the first two and last elements having a natur ...
I would like to update the URL without refreshing the page as I am using an AJAX function to refresh a specific div. The issue I am encountering is that when the div is reloaded via AJAX, it does not recognize the URL parameter. Below is my code (I have a ...
Recently, I've been experimenting with perspective and 3D transformations, and I've realized why my div isn't displaying at full width despite setting it in the CSS. However, I'm interested in creating a responsive layout where the div ...
I'm currently exploring ways to customize the appearance of my website based on the viewer's screen resolution. I am interested in potentially optimizing the layout for vertical screens on mobile devices, and horizontal screens for laptops. Addit ...
I'm a beginner in semantic UI and I'm struggling to understand how to adjust the columns to fill in the blank space correctly. Can someone please explain how to do this? By the way, I am using the `<div class="ui grid"> <div class="fou ...
My current challenge involves fetching data from an API and utilizing it in various components through the Context API. The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data ...
I am currently using webdriver (), standalone selenium, and mocha for writing my test cases. These test cases are specifically designed for Chrome, so I rely on chromedriver for execution. However, when launching the browser, I need to ensure that the "to ...
I am facing an issue with a dropdown filter in my PHP code. I have 3 pages and the dropdown is working for one filter, but I am unable to make it work for both filters simultaneously. I suspect it's a syntax error since I am new to PHP. I have tried v ...