concealing all content with a hidden overflow

I'm currently working on a project and have this pen which is just a snippet of it. In this snippet, I am trying to hide a div when it gets transformed off to the left. The elements involved are .fixed-strip for hiding overflowed content and .strip as the element to be hidden. However, whenever I apply overflow: hidden; or overflow-x: hidden; to .fixed-strip, it hides all content instead of just the transformed one.

.fixed-strip{
    max-width: 20rem;
    padding-left:  1.5rem;
    padding-right: 1.5rem;
    margin-left:  auto;
    margin-right: auto;
    position: relative;
}

.strip {
    display: block;
     background-color: fade_out(rgba(122, 116, 97, 1),0.6);
    left: 0;
    top: 1rem;
    width:300px;
    height:80px;
    position: absolute;
    transition: transform .5s ease-in-out;
    z-index: 1000;
}

The entire header needs to be within a container with position:fixed; for other reasons. Could this possibly be causing the problem?

css

Answer №1

To ensure the content displays properly, simply include height: 100%; in the .fixed-strip CSS:

.fixed-strip {
    max-width: 20rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    height: 100%;
}

The reason for this is that .fixed-strip does not initially have a set height, causing overflow to be displayed by default. Without a specified height, elements with position: absolute; do not fill the container correctly. By adding overflow: hidden, everything is now contained within the desired height.

I hope this explanation clarifies things for you.

Answer №2

After testing out your writing utensil, it seems like the issue could possibly be resolved by adjusting the height of the fixed-strip component.

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

Update the font style of the navigation bar

Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...

htmlcssnavbar

Ways to shut down a pop-up

Can someone assist me with how to close the bio-info popup and implement it in the code provided below? The HTML file: <ul class="ch-grid"> <li> <div class="bioinfo"> <h2>tooltips</h2> /div> The CSS file: .bioinfo { ...

jqueryhtmlcss

Chakra UI: Trouble with Styling Multi-part Components - StyleProvider Missing

Attempting to style multipart components as outlined in this documentation is proving to be challenging. Despite my efforts, I keep encountering the following error: ContextError: useStyles: styles is undefined. It appears that I may have forgotten to wr ...

cssreactjsnext.jschakra-ui

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs

Adding a border-top overlay to vertical navigation

I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle): <style> ul{ list-style-type: none; } li{ display: block; margin: 0; padding: 10; border-top: 1px d ...

htmlcss

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen. Below is the code I have: <style> /* default height */ #ad { height: 660px; width: 100%; } @media o ...

jqueryhtmlcss

Maximizing the Potential of Bootstrap 5's Grid System

I'm struggling a bit with the Bootstrap grid system. I want to create 6 divs or containers that span the full width on smaller devices like mobiles, use 25% of the width on medium devices like tablets, and display all 6 in a single row on large deskto ...

csstwitter-bootstrap

Is there a way to link to a specific section within a webpage using its ID, landing halfway down the page instead of at the top?

Can someone help me out with this issue? The header on my page is fixed at the top and has a height of 75px. When I click on a link (<a href="/company/#contact/">contact</a>), it takes me to the right section but the top part is hidden behind t ...

javascriptjqueryhtmlcss

Using Angular ngClass with a conditional statement

Incorporating data from a JSON file instead of a database, my goal is to assign a color to the icon based on the status value in the JSON. For instance, [if green? class1:class2]. Here is the code snippet I am working with: My HTML file <ng-containe ...

htmlcssangular

My Ionic app displays a blank nested view

Below are the route configurations in app.js: .state('signup', { url: '/signup', templateUrl: 'templates/signup.html', controller: 'signupCtrl' }) .state('profile', { url: ' ...

javascriptcssangularjsionic-frameworkangular-ui-router

Dynamically modifying the styling of elements within an iframe

In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...

javascripthtmlcssdomiframe

HTML / CSS: Ellipsis is Failing to Show

I'm trying to implement ellipsis on my website but the following HTML / CSS code isn't working as expected. CSS: .oneline { text-overflow:ellipsis; white-space: nowrap; width: 50px; overflow: hidden; } HTML: <div class="oneline">Testing ...

htmlcsstextoverflowellipsis

What is the best way to ensure that a Flex div and its child images stay confined within the boundaries of its parent container?

I'm struggling to create a responsive grid of images. I can't get the images to be both responsive with max-height and max-width, while also making sure the parent div takes up their full width. On the other hand, if I make the parent div the cor ...

htmlcssflexbox

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

htmlcss

How can a div fill the remaining vertical space, despite the dynamic height of the div above it?

Check out my code snippet on JSFiddle: http://jsfiddle.net/nom4mxLt/ <div id="wrapper"> <div id="yellow">variable height (I put 200px but can change in realtime)</div> <div id="red">This one should fill all remaining space ...

css

Can Anyone Provide Assistance with CSS for Customizing the Bootstrap 4 Navbar Burger Icon

I am working on implementing a bootstrap 4 navbar into my Angular code base. When the screen size of the browser becomes smaller, I want to hide the navbar and instead display a hamburger icon with a side menu. I have tried a few solutions, but have not b ...

cssangularbootstrap-4navbarhamburger-menu

Utilizing JQuery for Redirection

I need help with a specific issue on my website. Visit this link On the webpage, there is a button labeled "get a quote". When users click on this button, I want them to be redirected to google.com. I attempted to achieve this using the following JavaSc ...

htmlcss

Connecting CSS styles and images to my EJS templates on a distant Express server using Node.js (Ubuntu 18.04)

I have been hunting for a solution here extensively, but every attempt has failed. So, here's the issue I'm facing: I have created a basic Express server locally to display a static page until I finish full integration. The structure of my site ...

cssnode.jsexpressejsbad-gateway

"Font Awesome icons are only visible online on the -dev website, not visible anywhere

I followed the recommended steps on Fontawesome's official site to install the fontawesome library. I used the following command: npm install --save-dev @fortawesome/fontawesome-free For production purposes, I included the following code in my index ...

cssangularfont-awesome

Is it possible to accomplish this straightforward task using PHP?

Essentially, my goal is to have the content inside the h1 tag duplicated in the h2 tag as well. Take a look at the example provided below. <!DOCTYPE html> <html> <body> <h1>The content here should also appear in the H2 tag.</h1 ...

phphtmlcss