I would like to use a scrollbar on a div using the property overflow:auto and setting overflow:hidden on the body. It works well with Chrome but not with Firefox and IE.
Can anyone explain me why there is 2 different behavior with this code?
<html lang="en" class="fillScreen" dir="ltr"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="template4.css" type="text/css">
<style>
.fillScreen {
bottom:0px;
height:100%;
}
html, body {
margin: 0; padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body class="fillScreen">
<div class="fillScreen" style="display:table;width:100%">
<div class="fillScreen" style="display:table-row">
<div style="border: solid 2px red;overflow:auto;display:table-cell;overflow:auto" class="fillScreen" >
<div class="fillScreen" style="display:table;width:100%;overflow:auto">
<div class="fillScreen" style="border: solid 1px blue;" style="display:table-row">
<div class="fillScreen" style="display:table-cell">
<div class="fillScreen" style="position:relative">
<button width="142px" height="20px" style="position:absolute;top:99px;left:20px;">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It is possible to test it here http://jsfiddle.net/nMSvv/2/
Scrollbar apears in Chrome when resizing the window.
I add, that I absolutely need to display the button with absolute position and need to keep this structure of div
Thank you for any help
Solution is here : http://jsfiddle.net/nMSvv/3/
I needed to wrap the div where I want a scrollbar with :
<div class="fillScreen" style="position:relative;overflow:auto">
<div style="position:absolute;top:0px;left:0px">
</div>
</div>
Related
I will do set two images in inline, in the header of my website. But how I can do it?
https://imgur.com/0xnuqp5
I tried this... but (obviously) doesn't work.
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325">
Try this flexbox example:
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.image {
flex: 33.33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
</div>
</body>
</html>
<style>
.img{float:left;}
</style>
or
<style>
.img{display:inline;}
</style>
And then apply the class:
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350" class="img"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325" class="img">
I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.
I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.
Hi I got an issue with my page where I have used Flex and height:x% to achieve a very botched but working responsive height for two divs within a container.
The problem I have is that it works fine in FF but not Chrome. (Assume IE, edge etc) doesn't either.
Here is what it looks like in FF: http://prntscr.com/a712g6 (this is what it should be)
Here it is in Chrome: http://prntscr.com/a712q4
Below is the code: (excuse the mess its a hacked up copy and paste of source code)
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
</div>
<div class="logged_container">
You are Logged in as <span style='font-weight:bold;'>Ryan</span> (<a href='logoff.php'>Log Out</a>)
</div>
<div class="navigation_container">
<a href="main.php">
<img src="img/test.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Home
</a>
</div>
<div class='content'>
<div class='contentTableView' style="flex: 1; flex-direction: column; min-height:100%; height: 100%; position: relative;">
<span class="contentHeader">Title</span>
<div id="map" class="map" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:20px; border:1px solid #0a639d;"></div>
<div id="controls" class="controls" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:10%; border:1px solid rgb(204, 204, 204); background-image: url('img/bms47.png');"></div>
</div>
</div>
<div class="footer">
Footer Text
</div>
</div>
</body>
</html>
Anyone got any suggestions?
EDIT: ATTACHED CSS
http://pastebin.com/59rcgQwM
EDIT2: Issue Example
jsfiddle.net/vctbszc2/3 – Adam Buchanan Smith
I'm new to this community: I'm trying to use jQuery Mobile to create a simple GUI in Windows Phone style.
I want to create some tiles with images and then I must adjust them to the screen width: I tried to do this with the style rule " style="width: 100%;" " but the border of the image is too heavy.
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiles Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
<link rel="stylesheet" href="Framework\Theme\Metro.css" />
<link rel="stylesheet" href="Framework\JQM\S-1.3.0.css" />
<script src="Framework\JQ\1.10.1.js"></script>
<script src="Framework\JQM\1.3.0.js"></script>
</head>
<body>
<div data-role="page" id="Menu">
<div data-role="header" id="Menu\Header">
<h1>
Menu
</h1>
</div>
<div data-role="content" id="Menu\Content" style="padding: 2%">
<div class="ui-grid-a">
<div class="ui-block-a">
<img src="image.png" style="width: 100%;" />
</div>
<div class="ui-block-b">
<img src="image.png" style="width: 100%;" />
</div>
</div>
</div>
</div>
</body>
But the result is: http://img801.imageshack.us/img801/9474/6aoq.png
How can I fit the image to the screen size? (Something like this; http://img19.imageshack.us/img19/1305/f1y4.png)
I would try using css instead of jquery. You can accomplish what you're looking for with that. For example, you are using two images. You could set each one to a width of about 45% of the screen and add a border all in css. You can even have it dynamically scale based on screen size. It would probably be best to use div containers to organize it but this example should be enough to get you started.
I would try something like this:
<html>
<head>
<style>
<style type="text/css">
#images {
height: yourheightinpx;
}
#images img {
position: absolute;
max-width: 100%;
width: auto\9;
}
</style>
</head>
<body>
<div id="images">
<img src="yoursrc"><img scr="yoursrc">
</div>
</body>
</html>
I have gotten a weird problem with my columns using Twitter bootstrap. Setting up a test page that should behave like the example here: http://twitter.github.io/bootstrap/examples/hero.html . Here's the html:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" />
<script type="text/javascript" src="/assets/8b15478e/jquery.js"></script>
<script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4" style="border: 1px solid red;"></div>
<div class="span4" style="border: 1px solid red;"></div>
<div class="span4" style="border: 1px solid red;"></div>
</div>
</div>
</body>
Should produce the result shown in the link above, but i get the third span4 on the next line, it gets pushed under the two first. Apart from this the container behaves as expected, i.e. it is centered.
What am I missing here?
Border adds pixels to width so span4 is now increased to 302px (border-left: 1px + border-right: 1px) from 300px and hence comes to the next line. See here
border: 1px solid red;
You can give a background instead of border to test.
Check fiddle
Applying a border is breaking your layout by adding some width to your spans.
The native bootstrap solution for handling "column styles" are the .well elements.
HTML
<div class="row">
<div class="span4">
<div class="well well-with-my-style">
</div>
</div>
<div class="span4"></div>
<div class="span4"></div>
</div>
CSS
.well-with-my-style {
border: 1px solid red;
background: none;
/* whatever... */
}
That way, you will respect the native layout and take profit from the .well element, but remember that you'll have to override .well styles with your own (using .well-with-my-style class).