I'm trying to create a popup with 2 inner divs with responsive sizing.
I thought I could achieve this by setting their width and height as percentages of the parent div but it doesn't seem to work. If you resize your browser window, the leftArea div in my jsfiddle falls out of the popup div.
How can I fix this?
jsfiddle
Use box-sizing: border-box; property to set the padding and border inner the box width.
Check more docs here: box-sizing - CSS
body {
background-color: black;
}
.popup {
position: absolute;
margin: 0 auto;
width: 80vw;
height: 10vh;
left: 0%;
right: 0%;
top: 50%;
display: block;
background-color: orange;
border: 2px solid white;
border-radius: 15px;
}
.leftArea {
position: relative;
float: left;
width: 85%;
height: 98%;
margin: 0px;
background-color: red;
border-radius: 14px 0px 0px 14px;
border: 0px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box; /* Use this property to set the padding inner */
display: inline-block;
text-align: left;
}
.rightArea {
position: relative;
float: right;
width: 12.25%;
height: 100%;
background-color: #123456;
margin: 0px;
display: inline-block;
border-radius: 0px 14px 14px 0px;
border: 0px;
}
<div class="popup">
<div class="leftArea"></div>
<div class="rightArea"></div>
</div>
Related
enter image description here
Hi, I was working on a school project I needed to create a canvas that fills all the remaining width but upon creating the flex box container my chat div wont join/enter the flexbox.
#Right-Box-Wrapper{
display: flex;
position: fixed;
width: 320px;
min-width: 320px;
height: 100% !important;
right: 0px;
top: 0px;
border: 8px solid black;
border-radius: 10px;
background-color: #484848;
}
#Input-Wrapper{
display: flex;
justify-content: center;
}
#mwrap{
width: 100%;
display: flex;
justify-content: center;
}
#message-wrapper::-webkit-scrollbar{
width: 5px;
}
#message-wrapper::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#message-wrapper::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#message-wrapper{
top: 12px;
position: absolute;
height: 80%;
width: 95%;
background-color: #333333;
border: 3px solid black;
overflow: auto;
overflow-wrap: break-word;
}
#a{
position: fixed;
height: 100%;
width: 10px;
background-color: #262626;
top: 0px;
right: 0px;
}
#inpbox{
background-color: #333333;
position: absolute;
width: 95%;
height: 50%;
top: 80px;
text-align: left;
color: whitesmoke;
border: 3px black solid;
font-family: sans-serif;
font-size: 13px;
resize: none;
}
#inpbox::-webkit-scrollbar{
width: 5px;
}
#inpbox::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#inpbox::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#inpbox:focus{
outline: none;
}
#Chat-Wrapper{
position: absolute;
bottom: 0px;
right: 0px;
z-index: 50;
width: 100%;
height: 25%;
}
.Inputs{
color: whitesmoke;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.Tlc{
color:red;
font-weight: 1000;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.dice_roll{
color:greenyellow;
font-weight: 1250;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top:greenyellow solid 2px;
border-bottom: greenyellow solid 2px;
font-family: sans-serif;
}
#canvas-wrapper{
justify-content: center;
display: flex;
min-width: 350px;
height: 400px;
background-color: rgb(112, 112, 78);
}
#screen-wrap{
display: flex;
flex-direction: row;
}
body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
}
#flxt{
display: flex;
flex-direction: row;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id = "screen-wrap">
<div id = "canvas-wrapper">
<canvas id = "canv">
</canvas>
</div>
<div style="background-color: aqua;width: 100px;height: 100px;">
<canvas id = "canv">
</canvas>
</div>
<div id = "Right-Box-Wrapper">
<div id = "mwrap">
<div id = "message-wrapper">
</div>
</div>
<div id = "Chat-Wrapper">
<div id = "Input-Wrapper">
<textarea placeholder="Type here...." id = "inpbox"></textarea>
</div>
</div>
</div>
</div>
<div id = "flxt">
<div style="padding: 10px;background-color: aqua;">
asdasdasd
</div>
<div style="padding: 10px;background-color: aqua;">
asdasdasdasdasd
</div>
</div>
<script src="site.js"></script>
</body>
</html>
I have no idea what is wrong with this but this is my first time using flex box I couldn't find anyone else with a similar problem
From what I can see you have a lot of positioning going on that is somewhat unneeded when using flexbox. Ill give you a basic example. First I set all objects to box sizing border-box to help when using percentages. Position your container with position fixed and place it on the top right (you already have this done). Make it display flex and give it a flex direction of column so the objects stack on top of each other. Give it a height and width. I use vh(viewport height) and vw(viewport width). Next your message area will have a property called flex-grow that is set to 1. This allows it to take up all the remaining available space. Next set the height on your chat container I set mine to 25 viewport height. This means your message area will take up all but 25% of the viewport height. Then I just set the height and width of the chat textarea to 100% and since it now uses border-box box sizing it will just fill the container.
Flexbox and Grid are there to help you position objects while keeping them in the flow of the document so be careful when using position absolute when trying to move objects around. Here is a really good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here is more information on positioning. Take a good look at how absolute moves objects out of the normal flow of the document https://developer.mozilla.org/en-US/docs/Web/CSS/position
* {
box-sizing: border-box;
}
.chat-container {
position: fixed;
right: 0;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
width: 40vh;
}
.message {
flex-grow: 1;
background-color: #808080;
border: 4px solid #000;
border-bottom: 2px solid #000;
border-radius: 10px 10px 0 0;
}
.chat {
height: 25vh;
border: 4px solid #000;
border-top: 2px solid #000;
border-radius: 0 0 10px 10px;
}
.chat-area {
width: 100%;
height: 100%;
background-color: #808080;
border-radius: 0 0 5px 5px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #fff;
}
<div class="chat-container">
<div class="message"></div>
<div class="chat">
<textarea placeholder="input message here" class="chat-area"></textarea>
</div>
</div>
Incase the first answer does not help Ill give you an example on how to position objects using flexbox. This keeps objects in the flow of the document and manipulates their position using display flex, flex direction and flex grow.
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100vh;
width: 100vw;
}
.remaining-area {
flex-grow: 1;
background-color: #f2f2f2;
}
.chat-area {
width: 30vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.message {
flex-grow: 1;
background-color: #ccc;
}
.chat {
height: 25vh;
}
<div class="wrapper">
<div class="remaining-area">
<p>this area is left empty</p>
</div>
<div class="chat-area">
<div class="message">
<p>message area</p>
</div>
<div class="chat">
<p>chat area</p>
</div>
</div>
</div>
I'm trying to build a gallery website an i'm using the lightbox2 of this guy: https://lokeshdhakar.com/projects/lightbox2/
Can somebody tell me, where I can change the default image size? I want the picture in full screen size. The default image size is to small.
JS:
I can't post the whole JS Code because it's to big and i don't know which part it is. But you can find the JS code here: https://github.com/lokesh/lightbox2/blob/dev/dist/js/lightbox-plus-jquery.min.js
CSS:
.lb-loader,
.lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}
What if you change the options to fitImagesInViewport:true options are here
Or change the css to have responsive img based on the size of the container?
img{
width: 100%;
height: auto;
}
.image-container{
width: 100vw;
height: 100%;
}
html
<div class="image-container">
<img src="https://picsum.photos/id/1025/200/300" />
</div>
I really thought I knew how to do this, and I know there are a LOT of questions about this, but I haven't seen an answer that matches my ludicrously simple case.
Here's the html:
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div id="examined-evidence-close-button" class="button"></div>
<div class="clear"></div>
</div>
</div>
And here's the css:
#examined-evidence {
z-index: 1000;
display: none;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background-image: url('../assets/images/transparent_grey_tint.png');
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: center;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
...but, despite setting almost everything to inline-block, the close button div still displays BELOW the text div, in IE and in Chrome.
(And just FYI, the img src gets set from javascript, so please don't worry about that.)
If anyone has any ideas, I'm dying to show this web page who's boss. What did I screw up this time?
Drop your close button into an inline-span inside the p element, adjust your margins, and you should be all set:
#examined-evidence {
z-index: 1000;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background: dimGray;
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: justify;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
position: relative;
width: 100%;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
padding: 0px;
position: relative;
margin: 0px 15px 10px 10px;
}
.clear {
clear: both;
}
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p><span id="examined-evidence-close-button" class="button"></span>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div class="clear"></div>
</div>
</div>
This is the problematic Link. I have an element called tbox in CSS. It is an inline box having width:100%. On the homepage it adjusts its width according to its parent perfectly and is perfectly responsive, but when I enter into the post, its width changes according to the content inside. Here are some
screenshots
And this is the post, when I open it-
This is the code for tbox
.tbox{
display: inline-block;
width: 100%;
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
When I change the width to 850px, it works well on desktop but I can't override the width in responsive design. It always remains 850px.
So how to make it responsive, if the width is 850px? Or is there any other solution?
The problem is not with tbox search your code for .item .post.hentry and change width: 850px; to max-width: 850px;
.item .post.hentry {
max-width: 850px;
}
you can use media query for responsive as like and this code must write bellow main css as like first your main css
.tbox{
display: inline-block;
width: 90%; // change it as you want
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
then write above code bellow
#media (max-width:780px) {
.tbox{
display: inline-block;
width: 100%; // change it as you want
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
You need to add box-sizing property in .tbox class -
.tbox {
display: inline-block;
width: 100%;
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
box-sizing: border-box; // add this property in main css
}
try writing media queries like this ,then your div will be responsive
.tbox{
display: inline-block;
width: 100%;
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
#media(max-width:767px) {
.tbox{
display: inline-block;
width: 90%; //change percentage here
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
#media (max-width:1024px) and (min-width:768px) {
.tbox{
display: inline-block;
width: 100%; //change percentage here
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
#media (max-width:414px) and (min-width:100px) {
.tbox{
display: inline-block;
width: 70%; //change percentage here
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/
When I click the more options a popup comes, but when I reduce the width and height if the browser using mouse... The popup does not move along with more options div...
How do I fix the issue? Please help.
My code is here: http://jsfiddle.net/rajkumart08/8p2mZ/3/
.openme {
display: inline-block;
padding: 10px;
cursor: pointer;
padding: 0;
margin: 0 20px 0 0;
width: 200px;
height: 200px;
list-style-type: none;
background: white;
border: 1px solid #999;
line-height: 200px;
padding: 0;
}
#menu{
display: inline-block;
opacity: 0;
visibility: hidden;
position: absolute;
padding:0px;
border: solid 1px #000;
margin: 0 auto 0 auto;
background: white;
top: 350px;
left: 649px;
-webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
}
#menu.show {
opacity: 1;
visibility: visible;
}
#menu a{
float:left;
/*margin: 7px;*/
padding: 10px 20px;
font-weight: bold;
font-size: 10px;
text-align: center;
background: white;
color: black;
word-wrap: normal;
/*border: 1px solid red;*/
}
One way is to specify the position of the menu in terms of % of the windows size.
E.g.
Instead of
top: 350px;
left: 649px;
specify
top: 15%;
left: 15%;
This will ensure that the menu is always positioned w.r.t the width of the window upon resize.
First, thing is give a min-width to parent container - .app-home div and make it `position:relative'.
Next, use right position instead of left for menu div.