Explanation
I want to line up three boxes in one line horizontally but the last one falls down.
When I remove the scrollbar, it lines up fine.
So, the problem is caused by the scrollbar width.
How can I ignore the scrollbar width in css?
Do I need to write JavaScript code to calculate the scrollbar width and adjust the width of the wrapper dom element?
DEMO & CODE
I posted html and css code in codePen.io.
http://codepen.io/anon/pen/kXAPap
HTML
<div id="main">
<ul id="window-list">
<li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li>
</ul>
</div>
CSS
body {
border-top: solid 1px #a3a1a3;
margin: 0;
padding: 20px;
background-color: #e7e7e7;
}
ul, li, p {
margin: 0;
padding: 0;
}
/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/
#main {
width: 572px;
}
#window-list {
background-color: #ffffff;
border: solid 1px #b8b8b8;
width: 510px;
height: 350px;
margin: 0 0 8px 0;
overflow: scroll; /*This line causes the problem*/
padding: 10px 30px;
list-style-type: none;
}
.window {
display: inline-block;
margin: 0 18px 18px 0;
}
.window:nth-child(3n) {
margin-right: 0;
}
.window-thumbnail {
margin: 0 0 8px 0;
height: 158px;
width: 158px;
border-radius: 8px;
cursor: pointer;
background-color: #e0e0e0;
}
One way to do it in pure CSS is to make the scroll bar invisible completely. This will still allow scrolling.
::-webkit-scrollbar {
display: none;
}
You can also use jQuery to achieve exactly what you wanted:
$(document).ready(function(){
var body = $('body');
var normalwidth = 0;
var scrollwidth = 0;
if(body.prop('scrollHeight')>body.height()){
normalwidth = window.innerWidth;
scrollwidth = normalwidth - body.width();
$('#main').css({marginRight:'-'+scrollwidth+'px'});
}
});
And you can hide the horizontal scroll using:
body {
overflow-x:hidden;
}
Here's a jsfiddle made by Lwym.
I suggest you check out his original answer too.
Here, http://codepen.io/bhshawon/pen/OXBjOg
Using negative value for margin-right of every 3rd child
.window:nth-child(3n) {
margin-right: -16px;
}
Unless it is a business requirement to give these boxes a fixed, I would strongly recommend you to give them a variable width using percentage units which will make your document more responsive to different viewport widths and screen sizes.
.container {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
.container .box {
display: inline-block;
background-color: #ddd;
width: 28%;
height: 80px;
margin: 20px 0 20px 4%;
border: 1px solid #ddd;
border-radius: 3px;
overflow: hidden;
}
<div class="container">
<div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div>
</div>
Things to note
1- This solution is 99% CSS2-compatible...some features will degrade gracefully such as the border-radius which is currently supported by all major browsers out there
2- you said it doesn't need to be responsive because it's a chrome extension. Well, it does because desktops come in a lot of screen sizes. So, it is responsive
3- I've given the boxes a fixed height to make them look uniform but if you want a variable height you can wrap the boxes in containers with a group of 3 boxes each
If these have to be fixed, I would highly recommend using flex for this. Here is your CSS using Flex:
body {
border-top: solid 1px #a3a1a3;
margin: 0;
padding: 20px;
background-color: #e7e7e7;
}
ul, li, p {
margin: 0;
padding: 0;
}
/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/
#main {
width: 572px;
}
#window-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #ffffff;
border: solid 1px #b8b8b8;
width: 510px;
height: 350px;
margin: 0 0 8px 0;
overflow: scroll; /*This line causes the problem*/
padding: 10px 30px;
list-style-type: none;
}
.window {
margin: 0 18px 18px 0;
}
.window:nth-child(3n) {
margin-right: 0;
}
.window-thumbnail {
margin: 0 -6px 8px 0;
height: 158px;
width: 158px;
border-radius: 8px;
cursor: pointer;
background-color: #e0e0e0;
}
Here is a working example: http://codepen.io/jsanatar/pen/xOyLWK
Related
I have one icon. When you hover over the icon with the cursor, the tooltip opens. But when the tooltip is opened, it appears in the input on the back.
Here is the problem;
How can I solve this problem?
html
<div className="installmentinfo__container">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px ;
}
}
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
So if you don't have any other z-indexes event 9 will do the job :
.installmentinfo__container {
z-index: 9; ..
This question already has answers here:
Click outside div to hide div in pure JavaScript
(10 answers)
Closed 1 year ago.
I'm a noobie at programing. I'm currently making a simple shop website for a project in class. I'm currently struggling with how to make it work.
This is my complete style sheet
<style>
.open{
cursor: pointer;
background-color: black;
text-align: center;
padding: 5px;
font-size: 40px;
}
.open i {
color: white;
height: 50px;
width: 50px;
}
#Sidenav {
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
transition: 0.5s;
}
.logo {
margin: 20px 0 0 0; /* top right down left */
width: 75%;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.logo img {
margin: 0;
height: 100px;
width: 100px;
}
.sidenav ul {
margin: 0 0 0 12.5%;/* top right down left */
padding: 0;
width: 75%;
list-style: none;
}
.sidenav ul li a {
text-decoration: none;
color: black;
position: relative;
}
.sidenav ul li{
margin: 10px 0 10px 0; /* top right down left */
background-color: white;
border-radius: 20px;
text-align: center;
line-height: 30px;
font-size: 20px;
}
</style>
All of HTML codes are working fine
<body>
<span class="open" onclick="OpenNav()"><i class="fas fa-bars"></i></span>/* My button */
<nav id="Sidenav" class="sidenav">
<center>
<div class="logo">
<<img src="#" alt="logo"/>
<div>
</center>
<ul>
<li>All Items</li>
<li>Smartphones</li>
<li>Appliances</li>
<li>PC Components</li>
<li>Software</li>
<li>My Cart</li>
<li>Account</li>
<li>Shop Inventory</li>
<li>Login</li>
</ul>
</nav>
<h1>Content
<div id="main">
</div>
The function OpenNav() work fine as well, but when I put the Closenav function I can't click on anything else.
<script>
function OpenNav() {
document.getElementById("Sidenav").style.width = "250px";
}
document.onclick = function(Closenav){
if(Closenav.target.id !== 'Sidenav'){
document.getElementById("Sidenav").style.width = "0px";
};
};
</script>
</body>
the idea is to wrap up your sidebar or the content of it in a div with a fixed position and width / height 100% and then you will listen to this wrapper's click.
This way is similar of how Bootstrap handles modals, and also it will help you if you want to add a blurry effect to the page when the sidebar is open.
I've looked around SO and Google, but I haven't found an answer for my question (though I do feel this might be a very commonly asked one, still no luck anyway). All those I found were on jQuery, but I don't want to start jQuery without grasping adequate knowledge of the main JS.
Basically, I have a simple website, and I'm now trying to make the frame of the navigation bar. The navigation bar will dropdown to display other options. My only question is how to make the dropdown STAY when I move out of the main element, that triggers the dropdown, and into the dropdown information.
I noticed it's easier and neater to use CSS's :hover instead of JS, but I prefer to use JS as I'm still starting to learn a little bit of JS, so it's just to gain more knowledge.
Please ignore all the colors and weird formatting in my code, it's just a frame for now that lets me see things better.
PS: SORRY I HAVEN'T OPTIMISED THE TEXT AND VISUALS FOR RESIZED VIEWING AND IFRAMES. SORRY!
Thanks in advance! :)
document.getElementById("server").onmouseover = function() {serverMouseOver()};
document.getElementById("server").onmouseout = function() {serverMouseOut()};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}
.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#gigalogomainbox
{
float: left;
width: 30vw;
height: 10vw;
overflow: hidden;
transform: skewX(20deg);
margin: 0 0 0 -4vw;
background-color: white;
}
#gigalogobox
{
margin: 0 3vw 0 2vw;
padding: 0 0 0 2vw;
width: 100%;
height: 8vw;
}
#gigalogo
{
width: 80%;
margin: 3vw 2vw 0 0;
height: 7vw;
}
#steamlogomainbox
{
width: 15vw;
height: 10vw;
float: right;
margin: 0 -4vw 0 0;
background-color: white; /*000c21*/
transform: skewX(-20deg);
overflow: hidden;
}
#steamlogobox
{
margin: 0 -2vw 0 3vw;
padding: 0;
width: 100%;
height: 20%;
}
#steamlogo
{
padding: 0 0 0 2vw;
margin: 3vw 0vw 0 0;
transform: skewX(20deg);
height: 7vw;
}
#placeholderbartop
{
float: left;
width: 60%;
margin: 0;
padding: 0;
height: 10vw;
}
#navbarbox
{
clear: both;
display: block;
width: 100%;
height: 5vw;
padding: 2vw 0 0 0;
margin: auto;
}
#navbar, #navbar ul
{
width: 100vw;
height: 5vw;
background-color: green;
margin: auto;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3vw 0 3vw;
color: red;
font-size:35px;
}
#serverdropdownbox
{
display: none;
color: white;
background-color: darkblue;
}
#serverdropdowncontent
{
list-style-type: none;
width: 15vw;
margin: 0 0 0 15vw;
transform: skewX(15deg);
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
.menugradient
{
backround: darkblue;
}
#server
{
background-color: blue;
}
#server:hover #serverdropdownbox
{
display: block;
}
#gigalogomainbox:hover
{
background-color: red
}
<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
</head>
<body>
<!--Giga logo, top left-->
<div id="gigalogomainbox" class="clearfix">
<div id="gigalogobox">
<img id="gigalogo" src="images/gigalogo.png">
</div>
</div>
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<div id="steamlogobox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li>Home</li>
<li id="server">Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
</ul>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li>Server List</li>
<li>GigaDB</li>
<li>CS:GO</li>
</ul>
</div>
</div>
<script src="scripts/frame.js"></script>
</body>
</html>
So, to fix this, it would be easy to fix this in jQuery. But the way to fix it in pure JS is to create multiple ids for the "Servers" content (li's,a tags). Then do the same thing you did with the "Servers" li in JS but with those id's that you created for the "Servers" content. Also, you should do that on id serverdropdowncontent.
Best of Luck,
Ben A.K.A BlackSky
How can I make the image overflow height responsive?
The images I have sometimes have long heights which make the window scroll bar visible.
So I want to make these heights responsive - to make the image being scaled down to fit the window height.
Is it possible?
CSS,
html, body {
height: 100%;
margin: 0;
padding: 0 0;
border: 4px solid black;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
border: 4px solid blue;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
border: 4px solid red;
}
.centering {
float: none;
margin: 0 auto;
}
HTML,
<div class="container-fluid">
<div class="row-fluid text-center">
<div>
<img src="images/xxx.jpg" class="img-responsive centering">
</div>
</div>
</div>
You can use height: 100% and vertical-align: top on img and on parent element use height: 100vh
body, html {
margin: 0;
padding: 0;
}
div {
display: inline-block;
height: 100vh;
width: 100%;
text-align: center;
}
img {
height: 100%;
vertical-align: top;
}
<div>
<img src="http://placehold.it/400x850">
</div>
Replace the .centering class by the built-in .center-block of bootstrap
Then add a new class .myimg
.myimg {
margin: 0 auto;
position: absolute;
height:100%;
top:0;
bottom:0;
}
Check this fiddle https://jsfiddle.net/wo2eysh8/3/
I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.
Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>
This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE
You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy