What can you do to prevent a div from taking up the entire page if its height is not specified?

Currently, I am experiencing an issue with my layout. I have a hidden div with a fixed position that becomes visible when a button on the page is clicked. Inside this div, there is a table of buttons for the user to choose from.

The problem arises when I do not specify a height for this div - it expands to full page height. This is problematic because the number of buttons may vary, making it difficult to set a fixed height for each one of them.

I have created a couple of fiddles to demonstrate the issue. The first fiddle shows the div with a specified height: http://jsfiddle.net/gbRzt/. The second fiddle does not have a height set: http://jsfiddle.net/gbRzt/1/.

On a side note, I am facing another issue where the buttons in the last row, specifically #7 and #8, are not centered like the rest. Is there a way to center them properly?

javascriptjquerycsshtml

Answer №1

To optimize your code, consider removing the top and bottom properties from the .bankingDialog class. Additionally, using position: absolute; instead of fixed may be a better choice in this scenario.

.bankingDialog {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    margin: auto;
    width: 800px;
    height: 500px;
    padding: 1em;
    z-index: 200;
    background-color: #fff;
    border-radius: 15px;
}

Here's a solution for a different question:

Take a look at this jsFiddle. You can achieve your desired layout using only div elements instead of paragraphs and a table.

HTML

<div class="bankingDialog" id="bankingWeaponsDialog">
    <div class="centerer">
        <div class="bankingbuttons">Lorem Ipsum</div>
        <div class="bankingbuttons">Bot #1</div>
        <div class="bankingbuttons">Bot #2</div>
        <div class="bankingbuttons">Bot #3</div>
        <div class="bankingbuttons">Bot #4</div>
        <div class="bankingbuttons">Bot #5</div>
        <div class="bankingbuttons">Bot #6</div>
        <div class="bankingbuttons">Bot #7</div>
        <div class="bankingbuttons">Bot #8</div>
    </div>
</div>

CSS

.bankingDialog {
    text-align: center;
}
.centerer {
    width: 600px;
    margin: 0px auto;
}
.bankingDialog .bankingbuttons:first-child {
    display: block;
}
.bankingDialog .bankingbuttons {
    display: inline-block;
}
.bankingDialog2 {
    margin: 0 auto;
    width: 500px;
}

Answer №2

Give this a shot:

Will result in the following:

Keep in mind, if you want both the div#rightCol and div.bankingDialog to be aligned to the left and prevent div.bankingDialog from overlapping div#rightCol, consider giving div.bankingDialog a margin-left equal to the width of div#rightCol. Alternatively, you can place the div#rightCol and div.bankingDialog at the same level and apply float: left to both.

UPDATE: If you need any container to be scrollable, you can achieve it like this:

http://jsbin.com/anixeq/1/

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

Place the cursor at the conclusion of the text box

I am working on creating a user input form for chat messaging and I need some help. Here is the HTML-code snippet that I am currently using: HTML-code Currently, when the user presses ENTER, I retrieve the text from the textbox and save it. If the user ...

angularhtmltypescripttextboxchat

Using QuerySelector with Angular Directive will throw an error as it is not a recognized

When creating a directive that integrates a jQuery carousel, I want to hide it at the beginning until it is fully ready. Here's the directive code snippet: return { restrict: 'E', replace: true, scope: true, templateUrl: ...

javascriptjqueryangularjsdirective

jquery combobox with overlapping autocomplete suggestions

Encountering an issue with the jquery autocomplete combobox where they overlap when positioned side by side. Referencing this link for guidance: http://jqueryui.com/autocomplete/#combobox <!doctype html> <html lang="en"> <head> <me ...

javascriptjqueryjquery-uiautocomplete

The Vue Router hooks are not being activated within the component when utilizing Typescript

I've been pondering this issue for quite some time. Despite my extensive search efforts, I am still unable to figure out why the route-hooks are not working in my component: 1. The component is being loaded from RouterView: <router-view class="z1 ...

javascripttypescriptvue.jsvue-componentvue-router

Retrieving a channel using its unique ID and then sending a message directly into it

I am attempting to retrieve a channel by its ID and then send a message to it, but I keep encountering an error when running the code. ERROR: Error sending message to welcome channel.: TypeError: Cannot read properties of undefined (reading 'send&apos ...

javascriptnode.jsdiscord.js

Mastering the art of manipulating arrays with jquery

Trying to implement a dynamic search bar feature using jQuery. Here is the code snippet: Fiddle : https://jsfiddle.net/fpLf1to4/ var inputSearch = $('.searchInput').hide(); var searchArray = ['s','e','a',& ...

javascriptjqueryarrays

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

htmljquerycss

Having trouble getting padding to work inside a pre block, even when using a wrapper div?

Snippet of HTML Code: <div class="prewrap"> <pre> stepsize = .01 samplestimes = 30 universex = seq(-1, 1, stepsize) universey = sin(pi * universex) </pre> </div> Sample CSS Styles: #prewrap { background-color: #e3e3e3; pa ...

htmlcssweb

Locate every item that has a value that is not defined

My data is stored in indexeddb, with an index on a text property of the objects. I am trying to retrieve all objects where this property's value is undefined. I have been experimenting with IDBKeyRange.only(key), but when I use null, undefined, or an ...

javascriptindexeddb

Combining model with a string in an expression in AngularJS version 1

Can this text be transformed into an expression using ecmaScript 2015? The || operator seems to be causing issues. {{ ::$ctrl.realEstateProjectCurrentProduct.housingTax + ' €' || $ctrl.noDataMessage }} ...

javascriptangularjsecmascript-6

What is the process for uploading an image using fetch?

After just starting to learn react, I decided to create a gallery App. However, I am facing an issue when trying to post pictures to the API. Whenever I click on the ADD button, nothing happens except for an error 500 being logged in the console. Below is ...

javascriptreactjspostfetch-api

The automatic refresh feature of the DataTable every 30 seconds is malfunctioning

Currently, I am implementing an application that retrieves records from a database and populates them into a dataTable using JSON. Although my app is functioning correctly, I want to refresh the table every 30 seconds and update any added or modified rows ...

javascriptjquerydatatables

Firefox does not support CSS transitions

I've put in a lot of effort and even tried searching on Google, but I'm unable to find a solution to my problem: To help you understand my issue better, I have created a jsfiddle with my source code: Click here to view my Source Code Although e ...

htmlcssfirefoxtransition

A vibrant loading animation within a pop-up window

I have implemented an ajax spinner on my page using the following code: $(document) .ajaxStart(function () { $loading.show(); }) .ajaxStop(function () { $loading.hide(); }); Now, I want to display the spinner ...

jqueryajax

The outcomes may vary even with identical fonts, character spacing, and line-height

When I first learned about @font-face in CSS3, I was excited about the prospect of using consistent fonts across all browsers. However, after experimenting with it using the code below on jsFiddle, my expectations were challenged: HTML: <div> T ...

htmlcss

Error in jQuery sortable function occurs when dragging multiple elements

When using the sortable() function on multiple lists, I encountered a persistent bug. To drag more than one item, I added the following code to the start function: e.item.siblings(".selected").appendTo(e.item); However, a new issue arose where the plac ...

javascriptjqueryjquery-uijquery-ui-sortablejquery-ui-droppable

Display custom modals in React that showcase content for a brief moment before the page refreshes

I recently developed a custom modal in React. When the Open button is clicked, showModal is set to true and the modal display changes to block. Conversely, clicking the Close button sets the display to none. However, I noticed a bug where upon refreshing ...

javascriptcssreactjsmodal-dialogreact-modal

When the value in a required input field is empty, the border is activated and the color is styled

Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...

htmlcssinputborderrequired

Exploring JavaScript capabilities with Google - managing and updating object names with numbers

After importing JSON data into Google Scripts, I am able to access various objects using the code snippet below: var doc = Utilities.jsonParse(txt); For most objects, I can easily retrieve specific properties like this... var date = doc.data1.dateTime; ...

javascriptjson

Move the text to the following line if a horizontal scroll bar is visible using JavaScript/JQuery and CSS styling

I have a section with multiple div elements...how can I ensure that when there is horizontal scrolling in the section, the hidden divs shift to the next line? HTML <section id="a"> <div class="num"> <div class="num"> <div class="num" ...

javascriptjqueryhtmlcss