I have a dialog with some items ("tags") and a footer with a "done" button. When the items get populated enough, scroll is added and the footer is shown BENEATH all the items.
But I want to show the footer at all times, to be fixed, and make the scroll only work for the populated items.
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeWithoutSavingDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: false,
}}>
<div className={styles.tags}>
<div className={styles.tagsDialogCloud}>
{this.state.dialogTags.map((tag, index) => this.renderDialogTags(tag, index))}
</div>
</div>
<DialogFooter>
{this.state.showDialogButton == true ?
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>:null
};
</DialogFooter>
</Dialog>
</div>;
enter image description here
Picture shows an example of what I want to achieve. The "tags" part is scrollable, but the "Done" button is always shown.
This sounds more like a CSS problem than a React one.
The problem with your code is that the DialogFooter component should be absolute so it won't extend the parent's height and you should render the button without a condition.
Here's an example of how you can achieve it:
JSX:
<div className="popup-wrapper">
<div className="popup">
<div className="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="popup-footer" />
</div>
</div>
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
height: 300px;
width: 200px;
background: grey;
position: relative;
}
.popup-footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
background: silver;
}
.popup-content {
max-height: 260px;
overflow: auto;
}
And a sandbox can be found here
Try this HTML as your dialog code/you can modify the code as per your dialog this is a code to give you a hint.
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
Hope this helps...
Happy coding...
Related
I followed the steps here: Changing image size during mouse hover
However, when the image gets resized, the rest of the content moves around the page. How can I prevent this?
Just use transform: scale() in your CSS for the elements pseudo hover rule.
.imgclass:hover {
transform: scale(1.3);
}
#parent {
display: flex;
}
.main {
margin-left: 10px;
width: 200px;
}
.img {
height: 200px;
width: 200px;
background-color: red;
}
.img:hover {
transform: scale(1.3);
}
#cont {
margin-top: 10px;
height: 200px;
width: 400px;
background-color: green;
}
<div id="parent">
<img class="img" src="https://zoodegranby.com/content/images/_300xAUTO_fit_center-center/Panda_280x280.jpg">
<div class="main">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum."
</div>
</div>
</div>
<div id="cont"><div>
Another method is to wrap the image into container and set image's position to absolute:
.imgBox,
.imgBox > img
{
width: 50px;
height: 50px;
}
span.imgBox
{
display: inline-block;
}
.imgBox
{
position: relative;
}
.imgBox > img
{
position: absolute;
}
.imgBox:hover > img
{
width: 200px;
height: 200px;
}
<span>text before</span>
<span class="imgBox">
<img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>
</span>
<span>text after</span>
<div class="imgBox">
<img id="image2" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>
</div>
<span>text bottom</span>
I'm working on a react-app and I want the basic structure of (header, sidebar and content) using flex-box, so what I did is that I gave the body the height of 100%, overflow equal hidden and wrapped the three components in one component with the display of flex and direction to column, now the header is wrapped in a container and the sidebar and the content are wrapped in another, the header flex is 0 and the height is totally up to the padding needed, the sidebar and the content's parent's display is flex with the direction of row, same as the header the sidebar's flex is 0 and the content is 1 the basic view is alright but when the content's children overflow the height I'm not able to scroll even when adding the height of the parent to 100% and overflow-y to scroll or auto, what am I missing here ?
here is the page view
here is the component's structure
import React from 'react';
import Header from './components/header';
import Sidebar from './components/sidebar';
import Content from './components/content';
function App() {
return (<React.Fragment>
<div className="header-container">
<div className="header" style={{
backgroundColor: 'red',
color: 'white'
}}>
<h1>Header</h1>
</div>
</div>
<div className="content-container">
<div className="sidebar" style={{
backgroundColor: 'blue',
color: 'white'
}}>
<h1>Sidebar</h1>
</div>
<div className="content" style={{
backgroundColor: 'green',
color: 'white'
}}>
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</React.Fragment>);
}
export default App;
and here is the css
html, body {
margin: 0 !important;
padding: 0 !important;
}
body {
height: 100% !important;
overflow: hidden;
}
h1 {
margin: 0;
}
#root {
display: flex;
flex-direction: column;
}
p {
width: 30px;
}
.header-container {
display: flex;
flex: 0;
}
.content-container {
display: flex;
flex-direction: row;
flex: 1;
height: auto;
}
.header {
padding: 10px 0;
flex: 1;
width: 100%;
}
.sidebar {
flex: 0;
padding: 0 10px;
}
.content {
flex: 1;
flex-grow: 1;
}
I have given multiple backgrounds to a single div in a webpage. I wanted that as I scroll down that the background-image(Stickman), which is at the front, should remain of the same size, and the background-image(Landscape), which is behind it, should zoom.
I want to keep the size of stickman less than the container size.
But in my code both the background images are getting zoomed, kindly help me with it.
Below is the code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$(window).scroll(function(){
var up=$(document).scrollTop();
var upperl=10;
var lowerl=500;
var a=0;
var b=$("#body1").width();
if(up<=upperl)
{
a=b;
}
else if(up>=upperl)
{
a=b+up;
}
$("#backgroundslide").css("background-size", a+"px");
});
});
</script>
<style>
body{
color:white;
top:0;
margin:0;
}
#body1{
width:100%;
height:880px;
position:relative;
}
#backgroundslide{
background-image:url("http://www.downloadclipart.net/svg/18970-stickman-tired-svg.svg"),url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width:100%;
height:100%;
background-size: 200px,cover;
background-repeat:no-repeat;
background-position: bottom, top;
}
#a{
margin-top:100px;
}
</style>
</head>
<body>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
</body>
</html>
You've just forgot to set a value for the stickman.
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
See the snippet below:
$(document).ready(function() {
$(window).scroll(function() {
var up = $(document).scrollTop();
var upperl = 10;
var lowerl = 500;
var a = 0;
var b = $("#body1").width();
if (up <= upperl) {
a = b;
} else if (up >= upperl) {
a = b + up;
}
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
});
});
body {
color: white;
top: 0;
margin: 0;
}
#body1 {
width: 100%;
height: 880px;
position: relative;
}
#backgroundslide {
background-image: url("https://svgsilh.com/svg_v2/151822.svg"), url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width: 100%;
height: 100%;
background-size: 200px auto, cover;
background-repeat: no-repeat;
background-position: bottom, top;
}
#a {
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
I have been working on a Pop up but i'm unable to properly place it inside the container...
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
};
.container {
height: 30px;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: red;
}
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
bottom: 0;
width: 250px;
height: 60px;
overflow: hidden;
}
.maximized {
top: 0;
position: fixed;
display: block;
width: auto;
height: auto;
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<html>
<link href="./index.css" rel="stylesheet" type="text/css">
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">×</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
<div class="container">
text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="./index.js"></script>
</html>
I'm trying to insert the pop up into the container whenever the minimize button is clicked. Any help will be appreciated.
Change .popup container from position:fixed to position:absolute
Add below css in .minimized class
.minimized {
position: relative;
z-index: 1;
vertical-align: bottom;
}
bottom property works when position is specified to the container.
position:relative will come handy in this scenario.
Try to reduce the height (approzimately more then the red div).
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
var fatherDiv=elem.parentNode.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
fatherDiv.style.zIndex="2";
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false;
fatherDiv.style.zIndex="0";
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
};
.container {
height: 89px;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: red;
}
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
width: 100%;
height: auto;
overflow: auto;
z-index: 0;
top: 89px;
position: fixed;
}
.maximized {
top: 89px;
position: fixed;
display: block;
width: auto;
height: auto;
z-index: 2;
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<html>
<link href="./index.css" rel="stylesheet" type="text/css">
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;z-index:2;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">×</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
<div class="container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="./index.js"></script>
</html>
Log:
new var fatherDiv that is the container div "Popup";
add "fatherDiv.style.zIndex='2'" to set the Div in front of the red Div (z-index work like a layer,is like 2 layer of paper).zIndex work only on the main container of a thing (in this case the Popup Div,may doesn't work on the children in some case);
add the "top" and "position" rule in .minimized because you can't use top without the position rule (i balance the position only to show you this result,you may balance this value in your file)
Say me what you think about this.
I'm not quite sure how to ask this question. What I'm trying to do is have an element on the bottom of my page that will always stick to the bottom, but if the page is too short it will be pushed down by the other elements on the page.
Example:
The left side middle graphic and the right titles are all contained within #mainBodyContent. If the browser window is small enough that this div runs into the "Latest in Geek" flash box, I want the flash box to be pushed down. However if #mainBodyContent isn't running into the flash box, I want the flash box to stick to the bottom in the place where it's at currently. I'm rather confused as how to pull it off.
Any suggestions/help out there? Am I making sense?
You can use absolute positioning combined with padding. Example can be seen here:
Static Footer Example
<html>
<head>
<style type="text/css">
html, body { height:100%; }
/* layout */
#container {
width:800px; margin: 0px auto;
position: relative; min-height: 100%;
}
#top { height: 12px; } /* margin on header breaks liquid layout */
#header { position: relative; }
#content { padding-bottom: 72px; } /* 60px footer height plus 12px padding */
#footer {
clear: both;
position:absolute;
bottom: 0px;
width:100%;
height:60px;
text-transform: uppercase;
background-color: red;
}
.section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="header">
<h1>Title</h1>
</div><!-- end header div -->
<div id="content">
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end content div -->
<div id="footer">Footer content here</div>
</div><!-- end container div -->
</body>
Try using the CSS selector position:fixed
A quick stab gives you most of what you're looking for. The concern (for me) is that while the resulting footer is at the bottom of the page, the elements above will run underneath it. Some scripting could change that (and is likely how it's done in your example), but this is a start.
<html>
<head>
<style>
#footer {
position: fixed;
bottom: 0px;
background-color: Red;
height: 200px;
}
*html #footer {
position: absolute;
bottom: 0px;
background-color: Red;
height: 200px;
}
</style>
</head>
<body>
<div>A test</div>
<div id="footer">Here's my footer</div>
</body>
</html>
Compare the height of your content to the height of your window. If the window is larger than the height of your content, then set the footer to position: fixed; bottom: 0;.
css:
#footer
{
bottom: 0; /* this line does nothing until you set position: fixed; */
}
javascript:
function setFooterPosition()
{
var foot = document.getElementById("footer");
var docEl = document.documentElement;
foot.style.position = docEl.clientHeight < docEl.scrollHeight ? "" : "fixed";
}
window.onload = setFooterPosition;
window.onresize = setFooterPosition;