I have a Web application containing a simple pop menu implemented as a resizable div.
The application must support both LTR and RTL languages.
When using a LTR language (e.g. English), the small indication for the resize appears at the lower-right corner of the div and, when dragging it, the div expands following the movement of the mouse.
When the application is used with a RTL language, the small indication appears at the lower left corner of the div as expected.
The problem is that when dragging that corner (again, lower left), what moves is the lower-right corner.
The div is deployed at an absolute position.
How can I fix this and make the div behave in LTR and RTL as mirror images?
If your div is aligned on the left side of the page, it can't do anything but expand to the right. If you set float: right, you can drag the handle and expand it to the left.
I inserted a working example here:
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
direction: rtl;
float: right;
}
<html>
<head>
</head>
<body>
<h1>Resizing LTR text.</h1>
<div>
<p>Drag the handle to the left and the div will expand to the left..</p>
</div>
</body>
</html>
class mdiv extends HTMLDivElement {
constructor(){
super();
}
// connect component
connectedCallback() {
this.attachShadow({ mode: "open" })
this.shadowRoot.innerHTML = `<div style="direction: rtl"> <slot></slot></div>`;
}
}
customElements.define("rtl-div", mdiv,{extends:'div'});
.kuku {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
position: absolute;
left:50px;
top:50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="kuku" is="rtl-div">kuku</div>
<div>This is a regular DIV</div>
</body>
</html>
Related
I have a situation and I have to use different full screen sized, scrollable div, and in each div, there are enough content that we have to scroll to see that.
So, the problem is when I reach to end by scrolling in any div, then to scroll in next div or previous div I have to move cursor or click elsewhere to transfer control of scrolling.
and then I can scroll in other element.
so, in my webpage, I can't scroll at once and see all the content of all div.
please https://codepen.io/mayur_patel78/pen/MWVYjgX
so, I want to scroll at once without clicking anywhere or moving cursor and go through all div.'s content. it is a normal behavior of the scrolling, but I want to fix it like this way.
please suggest me or help me if you have faced this kind of problem or you have solution regarding this.
Thanks in advance for help!!
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="div1"><div style="height:5000px"></div></div>
<div class="div2"><div style="height:5000px"></div></div>
<div class="div3"><div style="height:5000px"></div></div>
</div>
</body>
</html>
style file
.container {
background-color: #000;
width: 100%;
/* can't put specific height of a webpage */
height: auto;
}
.div1, .div2, .div3 {
/* we will have enough content inside each fullscreen size div
so that we have to scroll inside each div to see all the content */
height: 100vh;
width: 100%;
overflow: auto;
}
.div1 {background-color: rgba(255, 0, 0, 0.5);}
.div2 {background-color: rgba(0, 255, 0, 0.5);}
.div3 {background-color: rgba(0, 0, 255, 0.5);}
You can do something like this:
const myDiv = document.querySelector('div')
myDiv.addEventListener('scroll', () => {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
myDiv.classList.add = "overflow-hidden"
}else{
myDiv.classList.remove = "overflow-hidden"
}
})
You can add class overflow-hidden when the div has reached the end and in else case you can remove the class.
Obviously you have to get all the div with a specific id maybe and run the above function, I leave that part to you. :)
I wrote a simple html file to see how collapsing margins in css work, but I didn't get expected answer. First I'll show you my code:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Collapsing Margins Testing</title>
<style type="text/css">
img {
width: 300px;
height: 300px;
}
.first {
margin-right: 10px;
}
.second {
margin-left: 20px;
}
</style>
</html>
<body>
<img src="http://cdn.shopify.com/s/files/1/0051/4802/products/mona-2_1024x1024.jpg?v=1447180277" alt="github cat" class="first">
<img src="http://cdn.shopify.com/s/files/1/0051/4802/products/mona-2_1024x1024.jpg?v=1447180277" alt="github cat" class="second">
</body>
I have set right margin of first image 10px and left margin of second image 20px respectively. I expect there to be 20px between the right of first image and left of second image as only bigger margin takes effect in collapsing margins. But when I inspect it in Google developer tools, the space between them are 30px(10px+20px). What's wrong with it? Or do I have a wrong understanding of collapsing margins?
Margin Collapsing works only on Block level elements.
Only top and bottom margins collapse, Right & Lefts don't.
An element's bottom margin and it's next elements top margins are collapsed.
It's very well explained here : https://css-tricks.com/what-you-should-know-about-collapsing-margins/
Just a tip : Google enough before posting questions!
Already pointed out by Sandip.
Margin collapsing works only on block level elements.
And also top and bottom margins collapse. Collapsing doesn't work for right and left margin.
Just for your clarity I edited your code snippet to replace img with block level elements and also replaced margin left and right with top and bottom so that you can see the margins collapse. The same will not happen for left and right margin.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Collapsing Margins Testing</title>
<style type="text/css">
.first, .second {
width: 300px;
height: 300px;
}
.first {
margin-bottom: 10px;
background: green;
}
.second {
margin-top: 20px;
background: yellow;
}
</style>
</html>
<body>
<div class="first">aaa</div>
<div class="second">bbb</div>
</body>
I have web page with centered content.When browser window is resized - it is possible to have window width small than page content. In this case page content is not centered - it is left aligned. Is there a way to right align it if no space to show it centered?
UPDATE:
Main goal is to keep right part of page visible when don't have enought width of window.
Something like: scrolled to right, but without code. Code make some nasty jumps when resize.
I'd set a min-width on the container, and use a media query to kick in when the window gets smaller...
#my_div { margin: 0 auto; text-align: center; min-width: 900px; background: #999; }
#media all and (max-width: 899px){
#my_div { text-align: right; background: red; min-width: auto; }
#my_div #tableWrapper { overflow: auto; }
}
You shouldn't need the text-align on the body tag with this code. If you don't want the content to resize when the window gats smaller, remove min-width: auto from the #my_div rules inside the media query.
Example: http://jsfiddle.net/NXdYk/2/
EDIT:
You can wrap a table in another div, and set overflow: auto to allow scrolling if the window gets too narrow:
http://jsfiddle.net/NXdYk/6/
But if the table is your primary layout, and it has widths set explicitly (i.e. inline CSS) then this is a sub-optimal solution. Bottom line: you can't control how people will interact with your site, all you can do is try and plan accordingly.
Quick example if this is what you're looking for, js script makes it work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).resize(function() {
if($(window).width() < $('#content').width()) {
$('#content').addClass('fr');
} else {
$('#content').removeClass('fr');
}
});
</script>
<style type="text/css">
#content{
text-align: center;
min-width: 500px ;
margin: auto;
border: 1px solid #000;
}
.fl{
float: right;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">something</div>
</body>
</html>
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height
I have to write markup and CSS so that a background image doesn't produce a scrollbar. Only if the viewport is more narrow than the inner content wrapper, a scrollbar is created:
http://www.mcm.unisg.ch/
Doesn't work for me: Absolutely positioned div on right causing scrollbar when the left doesn't.
One of may vain attempts in a fixed layout:
#background {
width: auto;
margin-left: -75px;
margin-right: -75px;
}
An area that hang out of the containing block to the left (because of a negative margin) isn't reachable by scrolling to the left. Yes! But a negative margin-right creates a scrollbar in
case of a narrow viewport. How can I prevent the scrollbar as long as the viewpart is wider than the containing block?
The markup:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title> </title>
<link rel="stylesheet" type="text/css" href="css/general.css" media="screen, projection"/>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/general-ie.css" media="screen"/>
<![endif]-->
</head>
<body>
<div id="page">
<img id="background" src="images/visual.jpg" alt="" />
<div id="head"><h1>Page title</h1></div><!-- /#head -->
<div id="mainpart">
<ul id="zones">
<li>
<ul>
<li class="module">Modul #1</li><!-- /#module -->
</ul>
</li>
</ul><!-- /#zones -->
<hr />
</div><!-- /#mainpart -->
<div id="foot"><h1>Footer</h1></div><!-- /#foot -->
</div><!-- /#page -->
</body>
</html>
The CSS rules:
body {
background: #000;
color: #000;
}
#page, #mainpart {
background: #fff;
}
#page {
width: 1024px;
margin: 0 auto;
position: relative;
}
#background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: auto;
margin-left: -75px;
margin-right: -75px;
}
Can anybody give me some good adivce? Thank you.
To prevent scrollbars appearing use:
mySelector
{
overflow: hidden;
}
You can see it in all its glory here: jsFiddle example.
This quite an old post, but for all the Googlers out there:
This question (https://stackoverflow.com/questions/13326111/element-outside-container-without-creating-scrollbars) has some really good answers for this. If I understand your requirements.
You can do this with either a "fake body" element, or using breakpoints to just hide the content when the viewport is too small.
Both are straightforward options. If the content in you "hanging" panel only makes sense when you can see all/most of it, then the breakpoint option can save you some bandwidth, and possibly save the user some frustration.
To elaborate on the "fake body" option hinted on by mediaashley, it means to wrap your content including the overflowing element in an element like this:
#fakeBody {
width: 100%;
min-width: 1000px; // needs to match the main content’s width
overflow: hidden;
}
The width:100% means it will match the window’s width, but when the window gets smaller than min-width its overflow:hidden attribute will cut off the hanging-out content.