I made a page with Bootstrap 4, where I have an options-menu at the left and a container-div with a row and some cols.
To show the options-menu, the container-div is made smaller by changing the "left" value. The arrangement of the cols in the container
then should change - but it only changes, when the browser window changes its size.
Is there a way to make the cols rearrange when the size of the container changes (without changing the browser size)?
<!DOCTYPE html>
<html lang="de">
<head>
<title>Grid-Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
$("#tree-toggle").click(function(e) {
e.preventDefault();
treeMenu.toggle(); // options
});
//
var treeMenu = {
visible: true, // options
// show options
show: function() {
$('#divCustom').animate({left: '0'}, 500); // divCustom verschieben
this.visible = true;
},
// hide options
hide: function() {
var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
$('#divCustom').animate({left: px}, 500);
this.visible = false;
},
// toggle options
toggle: function() {
if(this.visible) {
this.hide();
} else
this.show();
},
};
});
</script>
</head>
<body>
<nav role="navigation" class="navbar navbar-expand-lg navbar-light bg-light fixed-top" style="margin-bottom:5px; padding:0 0.5rem 0 0">
<a id="tree-toggle" title="Anlagenauswahl" class="btn btn-outline-secondary" style="display:flex; align-content:flex-start" href="">Show options</a>
<div id="divCustom" style="position: fixed; top: 50px; left: 0; right: 0; bottom: 0; padding-top: 5px;">
<div id="divTree" class="bg-light resizable ui-resizable" style="opacity: 0.8 !important; position: absolute; overflow-x: hidden; top: 10px; bottom: 10px; left: 0; padding: 5px; border-width: 1px 1px 1px 0; border-color: #e0e0e0; border-style: solid; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); border-top-right-radius: 4px; border-bottom-right-radius: 4px; z-index: 1010; width:300px"></div>
<div id="client" style="position: absolute; overflow-y: auto; top: 0; bottom: 0; right: 5px; padding-top: 5px; left:305px">
<div id="clientContent" class="container-fluid pl-0 pr-0" style="margin:0; background-color:#f0f0f0">
<div class="row">
<div class="col-lg-6 col-xl-4">Col 1</div>
<div class="col-lg-6 col-xl-4">Col 2</div>
<div class="col-lg-6 col-xl-4">Col 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
The breakpoints in Bootstrap use #media queries which are based on viewport width, not parent/container width.
The only way to do this would be to conditionally add the appropriate col- class in the jQuery logic. For example,
// show options
show: function() {
$('#divCustom').find('.col-lg').removeClass('col');
$('#divCustom').animate({left: '0'}, 500); // divCustom verschieben
this.visible = true;
},
// hide options
hide: function() {
$('#divCustom').find('.col-lg').addClass('col');
var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
$('#divCustom').animate({left: px}, 500);
this.visible = false;
}
Demo: https://www.codeply.com/go/sMfAWKuX1T
Related
I'm trying make a drag and drop component, but when dragging an opacity gradient is automatically applied.
I performed several tests and I noticed that when the component less than 300px approximately, only an opacity is inserted, not perfect, but it'll do. However, when it exceeds this size (300px), a gradient is applied in addition opacity, making the user experience bad.
how to resolve this?
I'm trying remove opacity gradient with CSS and others.
I expected remove opacity gradient on drag.
**Sorry, i'm using google translate
const columns = document.querySelectorAll(".column");
document.addEventListener("dragstart", (e) => {
e.target.classList.add("dragging");
});
document.addEventListener("dragend", (e) => {
e.target.classList.remove("dragging");
});
columns.forEach((item) => {
item.addEventListener("dragover", (e) => {
const dragging = document.querySelector(".dragging");
const applyAfter = getNewPosition(item, e.clientY);
if (applyAfter) {
applyAfter.insertAdjacentElement("afterend", dragging);
} else {
item.prepend(dragging);
}
});
});
function getNewPosition(column, posY) {
const cards = column.querySelectorAll(".item:not(.dragging)");
let result;
for (let refer_card of cards) {
const box = refer_card.getBoundingClientRect();
const boxCenterY = box.y + box.height / 2;
if (posY >= boxCenterY) result = refer_card;
}
return result;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins';
font-size: 30px;
}
.kanban {
display: flex;
justify-content: center;
min-height: 400px;
gap: 10px;
padding: 10px;
}
.column {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
background-color: cadetblue;
min-width: 500px;
border-radius: 5px;
}
.item {
background-color: white;
padding: 10px;
border-radius: 5px;
}
<!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>Kanban</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="kanban">
<div class="column">
<div class="item" draggable="true">Card 01</div>
<div class="item" draggable="true">Card 02</div>
</div>
<div class="column">
<div class="item" draggable="true">Card 03</div>
<div class="item" draggable="true">Card 04</div>
</div>
<div class="column">
<div class="item" draggable="true">Card 05</div>
<div class="item" draggable="true">Card 06</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Is the each() method capable of incrementing upon each instance of the element?
In addition, how do I make it so that each element gets it's own background color corresponding with the array, with $('colorbox')[0] getting 'yellow', $('colorbox')[1] getting 'blue'..ect. I can't access the property with $('.colorbox')[k].css() or document.querySelector('.colorbox')[k].style.backgroundColor=""; because I get an error. Help would be appreciated.
let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
$('.colorbox').each(function () {
let k = 0;
$(this).css("background-color", `${test[k]}`);
k++;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="container-box">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.colorbox {
display: flex;
height: 200px;
width: 200px;
border: 1px solid black;
box-sizing: border-box;
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: transform 0.3s ease;
}
You are very close! You're resetting k each time the loop iterates, so you just need to put let k = 0 outside the .each(). But even better than using your own counter, use the internal index you get with the each method, like so:
let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
$('.colorbox').each(function (index) {
$(this).css("background-color", `${test[index]}`);
})
You mentioned using querySelector and you're right, you definitely don't need jquery for this:
const boxes = document.querySelectorAll('.colorbox')
boxes.forEach((box, i) => box.style.backgroundColor=test[i])
Here's a snippet showing that:
let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
/*
$('.colorbox').each(function (index) {
$(this).css("background-color", `${test[index]}`);
})
*/
const boxes = document.querySelectorAll('.colorbox')
boxes.forEach((box, i) => box.style.backgroundColor = test[i])
.colorbox {
display: flex;
height: 200px;
width: 200px;
border: 1px solid black;
box-sizing: border-box;
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: transform 0.3s ease;
}
<div class="container">
<div class="container-box">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
</div>
For the past week I have been trying to create a website which is 100vh & vw where the images swap when you move the cursor from left to right.
I have almost no prior coding skills but I managed to get it working using a script called swinger.js So far so good.
But now I want to add an image caption in the header that shows the right caption with the right image. But I can't seem to figure out how to do this...
Any help would be appreciated!
Thanks,
Here is the code so far
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
i have added an attribute title to your html (see string of image)
and I have lightly modified yout swinger code to select the right title and display in header
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$("header").text($(img).attr("title"));
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” title="image left"/>
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image center"/>
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image right"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
I can't get the scroll-bar to actually scroll on either axis
I've tried added the "overflow-y" property but that just makes the scroll bar appear, it doesn't actually let me scroll. I added the html file but removed all the content except what has to do with styling.
html
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div>...
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
css:
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
width: 100%
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
I want to be able to scroll if for example I make the browser small or if the browser is not big enough to show all of the content.
You need some content which is wider than the viewport in order to be able to scroll. I have added some in the code snippet below, without making any other changes to your code.
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div style="white-space: nowrap; color:white">This_is_a_reall_long_piece_of_text_which_will_be_wider_than_the_viewportttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
Basically, overflow will allow the page to scroll if the content larger than the screen.
Try this CSS: overflow: auto;.
Another way around if you still can't scroll is using this JavaScript:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
and call the function from the <body> tag or from a <button> tag, whatever the event you want to use.
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}