Content is concealed by overflow

The issue lies within the "container main" div, where overflow-y is applied. As the height of the <form> increases and the overflow starts to take effect in the "container div", it causes the top part of the form to be hidden and inaccessible

This behavior seems abnormal to me, as I have spent several hours trying to solve this problem without success, especially when attempting to keep the form centered using flexbox in the "container main"

.form-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  ...
...
... more CSS code here ... ... 
</footer>
</section>

htmlcss

Answer №1

The part of your CSS code that may be causing issues is this:

.main.container {
  flex-grow: 3;
  height: auto;
  padding: 0 50px;
  overflow-y: scroll;
  margin: 50px auto 50px auto;
  display: flex;
  align-items: center;
}

The margin: 50px auto 50px auto; is forcing the main.container element to be squeezed between the header and footer, but the content inside the form is not adjusting its height accordingly.

You have two options:

  • Remove the overflow-y: scroll from .main.container to allow the <form> to expand the height of its parent without a scrollbar inside .main.container.
  • Alternatively, set the <form> height: 100% to make it match the height of its parent, which will still show a scrollbar in .main.container (as the form's content cannot be compressed), but the top of the <form> will align with the top of .main.container.

Answer №2

When it comes to 'display: flex;', remember that a flexbox is more than just one property - it's a whole module. If you're interested in learning more about flexbox, check out this article: guide to use flex-box.

If you remove the 'display: flex;' from your main container, it should resolve the issue.

.form-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
  backdrop-filter: brightness(125%) hue-rotate(180deg) blur(10px);
  background-color: rgba(0, 0, 0, .5)
}
/*
body {
  background-image: url(https://images.pexels.com/photos/1624600/pexels-photo-1624600.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}*/

section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto!important
}

.container.main {
  flex-grow: 3;
  height: auto;
  padding: 0 50px;
  overflow-y: scroll;
  margin: 50px auto 50px auto;
}

form {
  width: 100%;
}

.edit {
  width: 50%;
  display: inline-block
}

.edit .input-file {
  cursor: pointer
}

.edit.middle,
.edit.middle input {
  width: 100%
}

.edit.custom-input {
  width: 100%;
  display: flex
}

.edit.right {
  padding-left: 5px
}

.edit.left {
  padding-right: 5px
}

.clickin {
  margin: 15px 0
}

form>.box:nth-child(n+2) {
  margin-top: 70px
}

.current-templates,
.mob {
  display: none;
  margin-top: 20px;
}

.current-templates .file {
  padding: 10px;
  font-size: 1.2rem
}

.current-templates .file:not(:first-child) {
  margin-top: 20px
}

.current-templates .file,
.current-templates .options {
  display: flex;
  align-items: center
}

...
<footer>Copyright 2021 © João Webber</footer>
</section>

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

Is it secure to allow a specified group of harmless HTML tags from a request?

From my experience as a web developer, I've learned to be cautious when accepting HTML from clients. In my work, I rely on a WYSIWYG editor like TinyMCE for generating HTML content. While I've only used it on admin pages so far, I'm now cons ...

htmltagstinymcesecurity

The NPM package manager is unable to locate jquery.js and jquery.keyframes.js

I've encountered an issue while working with jquery and jquery.keyframes. My project structure involves storing NPM js files in the node_modules folder and html files in the public folder. However, when I use the following code, the html file is unabl ...

javascripthtmlnode.jsnode-modules

Tips for adding radio buttons within an alert box

When a table is generated based on user input, I want to find the cell index when it is clicked. My goal is to create an alert with radio buttons that appears when a cell is clicked. However, my attempt to implement this feature has encountered an issue. ...

javascriptjqueryhtml

Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

I have a fixed header at the top of my page. When it scrolls, I want to ensure that it does not cover or hide any of my content, especially the top portion of the section. // This code enables smooth scrolling (source: css-tricks) $('a[href*="#"]:no ...

jqueryhtmlcss

Tips for transferring a variable from a hyperlink to a Flask application

Here is a snippet of my Python Flask code: @app.route('/ques/<string:idd>',methods=['GET', 'POST']) def ques(idd): print(id) And here is the accompanying Javascript code: var counts = {{ test|tojson }}; var text = ...

javascriptpythonhtmlflask

What is causing this error to appear in Next.js? The <link rel=preload> is showing an invalid value for `imagesrcset`

I've got a carousel displaying images: <Image src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`} className={styles.carouselImage} layout="responsive" width={865} ...

javascriptcssnext.js

Guide to highlighting input field text using Angular

I've set up an angular page that includes an input field within its template. My goal is to highlight the text in the input field when a specific function is triggered. When I refer to "highlighting the text," I mean (check out the image below) https ...

htmlangulartypescriptinput

How can I make a div collapse in the same way as the Facebook chat

I am working on creating a chat feature similar to Facebook chat for personal use. Everything is functioning correctly, except for some issues with the CSS. I attempted using position absolute to arrange the div, which worked fine, but encountered problem ...

jquerycss

Customized height for vertical Slick slider based on content length

I am facing an issue with my vertical slick slider: $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true }); .slider { bac ...

jqueryhtmlcssslick.js

Looking for an effective method to implement CSS styling within a list cell in JavaFX?

As a beginner in JavaFX with limited knowledge of CSS, I struggled to conduct proper research and provide relevant information here. I apologize for any confusion or duplication. I am seeking a solution to apply CSS to JavaFX controls, specifically in a Li ...

javacssjavafx

The image is not displaying the rounded border as intended

It seems that the border is missing from the corners (red one) when I try to make it 1px thin. If I increase the thickness to 4+ px, then it looks okay. Is this behavior by design? The HTML <div class="win" > <img class="rounded" src='re ...

htmlcssrounded-corners

Issue with Bootstrap navigation bar extending webpage length beyond desired size

I recently constructed a website using the latest version of Bootstrap, commencing with the cover template. After swapping the navbar with one from the documentation, I noticed that the webpage now extends beyond the screen's length. At the end of the ...

cssbootstrap-4

Is it necessary for all elements of a web application to exist as React components?

It's been more than 2 years since I last worked with React, and revisiting my old code has left me feeling a bit confused. If I were to create an Instagram clone, would it be best to use HTML templates and inject JavaScript like this: <div id="rea ...

htmlreactjsreact-fullstack

Utilizing Bootstrap's nav-pills component within Vue.js 2 framework

The link to the jsfiddle is located here: https://jsfiddle.net/r6o9h6zm/2/ In my project, I have implemented bootstrap nav pills in vue js 2 to show data based on the selected tab. However, I am encountering an issue where all three rooms are being displa ...

htmltwitter-bootstrapvue.jsvuejs2nav-pills

Create a concise shorthand representation for margins when styling with jss using Material-UI's theme object

When styling the component, I found a way to apply the margin in a specific manner. style.js const styles = theme => ({ button: { margin: '12px 18px', } }) However, I wanted to utilize material-ui's theme.spacing.unit f ...

cssmaterial-uijss

WebSlides experiencing toolbar misalignment issues while embedding Bokeh visualizations

My goal is to integrate Bokeh plots into portable html slideshows using WebSlides (unlike Reveal.js, which doesn't meet my requirements). Below is a visual representation of the issue I am encountering, with the toolbar appearing misaligned: https:/ ...

htmlcssbokeh

A guide on redirecting a page using PHP

I am facing an issue with an AJAX function that loads content from list.php into a div on home.php. The list.php page includes a function to check if the session has expired, and if so, it should redirect to index.php. However, using header('Location: ...

phphtmlajaxhttp-redirectheader

How can I achieve text truncation in a React input using Tailwind CSS, ensuring that the input container maintains its original size?

Utilizing Tailwind CSS in conjunction with React, I have implemented the following input component: <input type="text" id="username" name="username" className="rounded-md ml-3 pl-1 outline-0" /> When t ...

cssreactjsformsinputtailwind-css

Issue with cross-origin security when applying HTML5 video tag to a webGL texture

I am trying to link a remote video to a texture in WebGL. To allow the video source to be different from the document source, I added Access-Control-Allow-Origin:* to the http headers of the video source. Additionally, I set an anonymous origin for the vid ...

javascripthtmlthree.jswebglcors

Retrieve data from multiple groups of dynamically generated list boxes

I've implemented a form on my website that dynamically adds rows with form fields. Each row consists of a textbox and a multiple select list. I found a helpful tutorial on this topic at: Here is the code for the textbox: <input type="textbox" nam ...

phpjavascripthtmlforms