I'm trying to annotate specific funtionality in an app, and the annotations appear to the side of a column of content. The column is a fixed height with custom scrollers, so I need overflow y to be auto or scroll - and overflow-x to be visible, so the annotation is visible.
I know this isn't possible by setting auto/visible on the same element, but I have seen solutions on SO where the column is set to overflow-y auto, and the wrapper is set to overflow visible - but I can't get it working.
I have a JSBin set up with my current implementation - https://jsbin.com/woduciv/edit?html,css,output
Essentially:
.wrapper {
position: absolute;
height: 100%;
width: 100%;
}
.column {
position: fixed;
left: 0;
height: 100%;
width: 25%;
overflow: visible;
}
.column__content {
position: static;
overflow-y: scroll;
height: 100%;
width: 100%;
}
Does anyone know a solution to have the x axis visibly, and y scroll enabled?
Thank you :)
Try this:
body {
height: 100%;
margin: 0;
font-family: 'Unica One', sans-serif;
background: #fff;
}
.custom-panel {
border-radius: 0;
height: 300px;
overflow: scroll;
padding: 15px;
width: 400px;
}
.custom-panel p {
min-width: 500px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="col-sm-6">
<div class="panel custom-panel">
<p> "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. "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 "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</p>
</div>
</div>
</div>
Hope this will help you!!
Related
Here's a sample:
div {
height: 0;
overflow: hidden;
padding: 12px;
background: tan;
}
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Is there a way to prevent padding from increasing the size of the div? Some threads suggest using box-sizing: border-box, but it doesn't seem to work in this case.
Replace it with margin by adding an extra div
div.box {
height: 0;
overflow: hidden;
background: tan;
}
div.box div {
margin: 12px;
}
<div class="box">
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Or consider some hack with pseudo element:
div.box {
height: 0;
overflow: hidden;
background: tan;
padding: 0 15px; /* horizontal padding */
}
div.box:before,
div.box:after {
content: "";
display: block;
height: 12px; /* vertical padding */
}
<div class="box">
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>
If you are there for extra space, you can use {margin} instead which will only add space outside of the ““ box. Also if you want spacing between the text, you can use css property {line-height}.
I have a modal I created using ReactDOM.createPortal();. It works well except I can't seem to style the modal in a way that works on both Chrome and Safari.
html:
<body>
<div id="main">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
</div>
<div id="portal">
<div>
<div class="modal-wrapper">
<div class="modal-card">
<div class="row">
</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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
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.
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 class="background-overlay"></div>
</div>
</div>
</div>
</body>
scss:
#portal {
.modal-wrapper {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
overflow: hidden;
max-height: 100%;
.modal-card {
background: white;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 10;
max-width: 800px;
margin-top: 10px;
width: 50%;
overflow: auto;
padding: 10px;
max-height: 90%;
}
.close-button {
position: relative;
}
.background-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
}
}
}
Please see https://jsfiddle.net/alisonmtague/am5jfr37/26/ using both safari and chrome.
On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal (background page scrolls instead). I expect the contents of the modal I'm creating to be pretty large so I need the modal to be scrollable. Ideally I would also like the #main div to not scroll when the modal is open.
Changing the z-index does not solve things
When you open the modal, apply a class to your <body> (i.e. fixed) and:
body.fixed {
overflow: hidden;
position: fixed;
}
Obviously, you need to remove it when closing the modal.
Additionally, your modal scroll container should have:
{
-webkit-overflow-scrolling: touch;
}
..., besides overflow-y: auto; and a fixed height, smaller than 100vh. That's about it.
Note: Depending on device, Safari version and iOS version you might not need both (second one being the real important one), but with both you get max compatibility.
Ref: "On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal":
Assuming adding position: relative; to .modal-card wouldn't work: what is stopping you from placing .background-overlay as first child of .modal-wrapper and .modal-card as second?
I need layout with 3 columns with an image spanning across 2 in top right corner. Found several solutions, best one here:
Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?
But: Both don't work with Chrome. The negative top-margin makes the text disappear behind a non discoverable something.
I used the solution with the absolute positioning of the floater, as in the other solution the left margin of the floater would be a reason why the text becomes invisible...
I used div#floater to represent the image, has same effect.
HTML:
<div id="outer">
<div id="floater">
</div>
<div id="inner">
<h1>Title1</h1>
<p>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.</p>
<h1>Title2</h1>
<p>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.</p>
<h1>Title3</h1>
<p>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.</p>
</div>
</div>
And the CSS code:
#outer{
position: relative;
font-size: 10pt;
width: 100vw;
min-height: 88vh;
column-count: 3;
column-gap: 1vw;
padding-top: 54vw;
background-color: red;
}
#outer #floater{
position: absolute;
right: 0;
top: 0;
width: 66vw;
height: 50vw;
margin-bottom: 2vw;
display: block;
border: 2px solid blue;
}
#outer #inner{
max-width: 100vw;
background-color: green;
margin-top: -11vw;
}
I made a fiddle, in Chrome 'Title 1' diappears, in Safari and Firefox no problem. Any suggestions?
https://jsfiddle.net/20drzb3k/5/
You can give a try to backface-visibilty to cure that visual bug.
#outer #inner > *{
backface-visibility:hidden;
}
https://jsfiddle.net/20drzb3k/7/
For infos, Here is another example with a different approach (a pseudo element is pulling up first col content. https://codepen.io/gc-nomade/pen/boZaVJ
I've done my share of css, and think I know all the usual tricks, but this one stumped me. I'm trying to absolutely position a caption box over an image (implemented as background-image) with a list of requirements:
Should be centered
Should have max-width and max-height as percentages of the image.
Should have bottom 10% from parent, and resize up with more content
Text content over maximum size should be hidden, but the background with it's rounded border-radius corners should remain visible.
The following is the closest I've come - it fails at centering:
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
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.
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>
I know lots of ways to center of course, but none I try maintain the other requirements.
I don't mind wrapping one or more extra elements around .caption if it achieves all my aims. Anyone able to help? Thanks in advance.
Wrap the caption in another div with the dimensions and positioning you require.
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
margin: 1em auto;
}
.wrap {
width: 75%;
max-height: 80%;
position: absolute;
transform: translateX(-50%);
bottom: 10%;
border-radius: 5px;
left: 50%;
overflow: hidden;
}
.caption {
box-sizing: border-box;
background-color: rgba(75, 75, 75, 0.4);
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="wrap">
<div class="caption">
<p>
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 </p>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="caption">
<p>
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. 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.</p>
</div>
</div>
</div>
add left:0px and right:0px to .caption
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
left: 0px;
right: 0px;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
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.
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>
I am having a problem setting up the css properly
Here is my small code that I play with:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { margin: 0; padding:0; }
html, body { width: 100%; height: 100%; background: #abc; }
#container { background: #eee; width: 100%; height:100%;}
#sidebar { background: #a0f; width: 200px; height: 500px; position: absolute; left: 0px; top: 0px; }
#content { background: #777; margin-left: 200px; width: auto; height: 100%; }
#wrapper { background: #357; height: auto; padding: 10px;}
#column1 { background: #0f0; width: 66%; float: left; }
#column2 { background: #f00; width: 33%; float: right; }
#text1 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
#text2 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
</div><!-- end sidebar -->
<div id="content">
<div id="column1">
<div id="text1">
<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 column1 -->
<div id="column2">
<div id="text2">
<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>
<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>
<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>
<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 column2 -->
</div><!-- end content -->
</div><!-- end container -->
</body>
</html>
This is supposed to be a page with fixed sidebar on left and fluid content area on the right. In short pages I want the background color of #content extend to the bottom of screen (this works). On long pages I want that background to extend to the end of page (this does not).
I've added colors to all elements to see what's going where, but eventually the #content background will be white with 0.9 transparency, and there will be a background image on body.
How to fix that?
Update: see working example here: http://jsbin.com/AXUmALU/1/edit?html,output - just scroll the output up to see the break in colors.
I think I have what you want here. In the css I have added some selectors for a clearfix class, which is very common. It looks like this:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
And I added that class to the #content This css is from HTML5 Boilerplate, which you can google. I also changed
#content { height: 100%; } to #content { min-height: 100%; }
so that the content can expand beyond the size of the screen if it needs to.