A div is expanding the width of the page - javascript

I have a one-page site. It is basically a list of sections. One of the section has a button which overlays a dialog when clicked. This dialog ends up expanding the width of the page and a sideways scroll bar is introduced.
This really spoils the look and I'm looking to make the dialog not expand the page.
For reference, it is the same kind of layout as here:
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
I tried setting max-width: 100% and overflow-x: hidden on the problematic section but to no avail.
Here's the problematic section's markup:
<section id="music-section">
<div class="music-container">
<h1> About Us </h1>
<h2> The following is our mission statement on campus. </h2>
<div class="music-row">
<music-demo></music-demo>
</div>
<div class="music-row">
<music-demo-duplicate></music-demo-duplicate>
</div>
</div>
</section>
And the CSS:
.music-row {
width: 100%;
height: 330px;
}
.music-container {
background: rgb(236, 183, 9);
padding-top: 1%;
max-width: 100%;
}

are you using "position:absolute" in your div?
your elements wouldn't align to your div with position:absolute, other cause may be the size of the div, are using % in the values width and height.

Unfortunately the CSS you provided doesn't correspond to your HTML. If you've got a fluid layout (resizes based on screen/browser size) and the parent container of music-section is width: 100%; or in this case max-width, this can cause problems I've discovered. Often times the child element will expand beyond the parent. What worked for me is this:
.music-row {
width: auto;
height: 330px;
}
Set your child to auto rather than 100%. I hope it works for you.

Related

How do I fit header and img in div with set width and height with flex?

I have an assignment where I need to fit an image and header into a div with a fixed width that changes heights every time. It needs to look like the screenshot below, but I have no idea how to get that look.
The sections are where the flexbox starts and I organized the child elements to appear like they should, but everything inside of that, I can't get to work.
HTML
<main class="card-grid">
<section class="row-grid"></section>
<section class="col-grid">
<div class="card" style="width: 200px; height: 280px;">
<img src="littlecolorado.jpg">
<h2>Another card</h2></div>
</section>
</main>
CSS
.col-grid {
display: flex;
flex-flow: column wrap;
gap: 20px;
height: 2000px;
}
.col-grid div img {
width: 200px;
}
.col-grid div h2 {
display: block;
}
My file:
What it should look like:
Just setting the height of the image to 100% should do it. That means the image will take up 100% of the available space. If you want more direct control of the growth and shrinking of the children use flex-shrink and flex-grow.
https://codepen.io/gallagher7788/pen/bGLRGLx
https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/
Note: height:100%;width:100% will distort your image, but thats how the example you included did it. You could create a div with a background image and use background-size:cover to crop the image.

React JS: How to implement scroll bar in one particular div?

I am creating a movie app. I am facing some problem on implementing the scroll bar.
While scrolling I want the header div to remain where it is. I don't want it to disappear while scrolling down. But the div located vertically bottom to the header must be scrollable.
This can be found in amazon.in
On searching Harry Potter, this page loads
On scrolling down, you can see that the header remains fixed.
How can I implement this in React?? Please share the necessary code/documentation. Thanks!
This actually has nothing to do with React. This has to do with basic HTML and CSS knowledge.
Here is my preferred method:
<div id="navbar">...</div>
<div id="content">...</div>
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#content {
margin-top: /* size of navbar */ 50px;
}
You can add scroll bar in a div by using overflow property with some height.
CSS:
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
HTML:
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>

How to set 100 % height without having a vertical scrollbar?

Context
I have a navbar with a fixed height. I want the space underneath to fill the rest of the screen vertically. I also need to have a fixed height because I have a container inside the page that has a list that is scrollable but without scrolling the whole page overflow: hidden
The Problem
When I set a height on all parent elements of 100% I get a vertical scrollbar. I found some answers on SO about "margin collapse" but nothing that could solve my problem.
100vh also won't work without having a scrollbar.
Here is the css for setup the height (#__next is just a div where next.js renders the page):
html,
body,
#__next {
height: 100%;
width: 100%;
}
The navbar is just a fixed pixel height, and the space below has height: 100%
Here is a screenshot that shows the vertical scrollbar:
I can't find any problems on the chrome inspector.
This is how it should look (design file):
Do you know how to solve this? I need to have both containers from screen "SippetPanel" and "SnippetContent" to take the remaining height without adding a scrollbar. It should also work to have a inner scrollbar with overflow hidden (later on when there are many items in the list like from design file)
Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:
#__next{
height: calc(100% - navbarpx);
...
}
calc()
For the padding issue you can look into border-box.
I usually just try different vh values, that means 90vh, 95.5vh etc. so it all sits perfectly. You can try to meddle with body position: absolute etc., but that would push everything into the navbar, so then you would need to fix it with additional margin-top.
So the best solution I see is to try different vh values for the height and find the sweet spot. You will need to do the same for different phone types as well with media queries, but it shoudn't really be hard.
One of the ways is to use flex-box, it allows you to explicitly say(take all available height.
.body {
display: flex;
flex-direction: column;
}
.navbar {
flex: 30px 0 0;
/* 30px height and do not grow or shint */
background: red;
}
.content {
flex-grow: 1;
/* take all available space */
background: blue;
}
.body, html, body {
width: 100%;
height: 100%;
}
<div class="body">
<div class="navbar"></div>
<div class="content"></div>
</div>

stick scrollable div to bottom of screen

I've got a cordova app using jquery, jquery-mobile, iscroll and iscrollview
I'm not exactly committed to any of these tools.
I've got the jquery-mobile header/footer stuck to the top and bottom of the screen just fine.
I have a scrollable div between the header and footer. It will contain variable amounts of data. Sometimes the data will be less than the height of the div and sometimes it will be greater (hence the scrolling)
Here's the tricky part. I want to stick the bottom of the scrollable div to the top of the footer. When I add stuff to the div i want the most recently added closest to the top of the footer so the top of the scrollable div looks like its growing upwards towards the bottom of the header as data is added.
Once the top of the scrollable div is fille by its content then i want to be able to scroll it.
Has anyone been able to achieve something like this?
Here's a neat little trick for you.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Now the CSS
div {
width: 100%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
}
/* the magic */
.content {
position: absolute;
top: 50px; /* matches height of header */
bottom: 100px; /* matches height of footer */
left: 0px;
overflow: scroll;
}
The neat thing about forcing .content to have both a top and a bottom is that it stretches the div so that it's always the proper height. IF you specified height on it, it wouldn't work, but because the height is determined by the top/bottom property, it's dynamic. I think this gets you to where you want to be.
Here's a fiddle
Edit: Here's what it looks like with content
Edit 2 - forcing content to grow from the bottom.
I'm not sure this is a good idea, and I'm not sure I would ever seriously recommend doing things this way. However, using vertical-align it's possible to force content to grow from the bottom. I suspect that it would be better to just set a margin with javascript that shrunk as content grew, but... maybe not. With all that said, here's one way to do things with CSS.
This requires a little bit of restructuring of the content div.
<div class="content">
<span class="margin"></span>
<span class="inner"></span>
</div>
And a little bit more CSS
span.left-margin {
height: 98%;
width: 0px;
display: inline-block;
}
span.inner {
width: 99%;
background-color: white;
display: inline-block;
vertical-align: bottom;
}
It looks like this with a little content
It looks like this with a lot of content
If you want the scroll bar to stick to the bottom as content comes in, you'll need to do some javascript (easy to google it).
I'm not completely happy with doing things this way because if you set height 100% or width 100%, the content div gets a scrollbar automatically from the beginning. However... it looks pretty good and should work in most (if not all) browsers.

Scrolling div without fixed height

I need to build a dynamically-resizing scrolling div.
The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.
I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto.
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
<!--Put loads of text in here-->
</div>
</div>
The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.
I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.
So my question is: Can this be done using just html, or- failing that- javascript?
You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).
Given this HTML:
<div id="gridcontainer"></div>
the CSS should be something like:
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
Live Demo
Since IE9 you can use viewport units.
Let's say that the height of your container is dynamic, unless its size is greater than the window height. In that case we stop the expansion & activate the scroll.
#container{
background: #eaeaea;
max-height: 100vh;
overflow-y: scroll;
}
div{
outline: 1px solid orange;
width: 200px;
height: 200px;
}
<div id='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
If you are trying to make element fit the screen then you can set the value of hight and width of the element to 100%.
You will also need to set the height of html and body
html, body {height: 100%}
#gridcontaine {
height: 100%;
width: 100%;
}

Categories

Resources