Gridstack: Change space between items - gridstack

Hopefully I'm just missing something simple, but there is a little too much space between the items ("grid-stack-item" divs). I would like a grid where the items are a little closer together. I was hoping maybe someone had a codepen or fiddle that showed how to decrease the space between the items (shrink the columns).
Relevant code:
<html>
<head>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Lodash-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
<!--Gridstack-->
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js'></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.css" />
<style>
.grid-stack-item{background-color: #00CED1;}
.red {border: 1px solid red;}
.blue {border: 3px solid blue;}
.red-dash {border: 3px dashed red;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-12">
<div class="grid-stack" style="margin-top: 20px;">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 1</div>
</div>
<div class="grid-stack-item"
data-gs-x="2" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 2</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var options = {
cellHeight: 80,
width: 4
};
$('.grid-stack').gridstack(options);
});
</script>
<!-- Scripts -->
</body>
</html>

You need to make the data-gs-x attribute of the second grid-stack-item 1 instead of 2 as the width of each grid-stack-item is only 1. At the moment you have a empty space there because you've told it to leave it empty.

Well this is a four years old quetions. But you can change that gap by adding the margin parameter to the grid options. Default margin value is 10.I can be an integer (px) or a string (ex: '2em', '20px', '2rem')
var options = {
cellHeight: 80,
width: 4,
margin: 5
};
source document

Related

AFRAME and AR.JS osm-way samples

I try this osm-way sample for a-frame and ar.js:
`
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>AR.js osm example</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
<script type='text/javascript' src='index.js'></script>
<script type='text/javascript' src='osm.js'></script>
<script type='text/javascript' src='osmway.js'></script>
<script type='text/javascript' src='gps-vector-ways.js'></script>
<style type='text/css'>
#status {
font-family: Roboto, sans-serif;
color: white;
position: absolute;
top:50%;
left:calc(50% - 100px);
font-size: 150%;
font-weight: bold;
}
</style>
</head>
<body style='margin: 0; overflow: hidden'>
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'>
<div id='status'></div>
<a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader position='0 20 0' wasd-controls='acceleration: 1300'></a-camera>
<a-entity id='osmElement' osm gps-vector-ways />
</a-scene>
</body>
</html>
`
This sample work fine even iof a change the properties simulateLatidude and simulateLongitude on gps-projected-camera.
How i can display the osm gps-vector-way based on the current user gps position without simulate it ? I search but i don't find results. Thanks in advances

Bootstrap5 - Conditional col & row depending on breakpoints

I want to align an image, a title and a text block responsively using the bootstrap layout classes.
For the sm/xs breakpoint the title is supposed to be aligned next to the image in the top left corner, the text in full width (12col) underneath.
For the md breakpoint the text should align beneath the title but next to the image.
Here's a example image of the desired layout.
I assigned a col for each element in one row.
if I assign more than 12 column widths and push down the third column (text) with an offset, it will be aligned in a second row, while I want it to share the height of the image.
My brain hurts, thanks a lot for help and hints in any directions!
This is one of the many html sceletons I tried
<div class="container">
<div class="row">
<div class="image col-sm-6 col-md-6"></div>
<div class="title col-sm-6 col-md-6"></div>
<div class="text col-sm-12 col-md-6 col-md-offset-6"></div>
</div>
</div>
Here you go...
I suggest you to make two text boxes (i.e., text_1 and text_2). Use Bootstrap classes to show/hide them depending on the viewport width. To do so, apply d-md-block d-none to the text_1 and d-md-none d-block to the text_2.
See the snippet below.
#image {
background-color: greenyellow;
height: 200px;
}
#title {
background-color: gold;
height: 30px;
}
#text_1,
#text_2 {
background-color: red;
}
#text_2 {
height: 200px;
}
<!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>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class='container-fluid'>
<div class='row d-flex justify-content-between mb-3'>
<div class='col-6' id='image'>Image</div>
<div class='col-6 pe-0'>
<div class='col-6 w-100 mb-3' id='title'>Title</div>
<div class='col-6 w-100 h-75 d-md-block d-none' id='text_1'>Text</div>
</div>
</div>
<div class='row'>
<div class='col-12 d-md-none d-block' id='text_2'>Text</div>
</div>
</div>
</body>
</html>

Why does the material-icons i element overlap the adjacent input element?

I am not sure if this is a material related code or not.
But if you see this code, you'll find that the width of the i element is wider than that displayed by the red border. You cannot navigate to the beginning of the text input as it still points to the material icon, help_circle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<style type="text/css">
div.tipped-small
{
margin-top:-10px;
margin-right:10px;
display:inline-block;
width:15px;
height:15px;
padding:5px;
border-radius:50%;
cursor:pointer;
position:relative;
overflow:none;
}
div.tipped-small i
{
width:15px;
color:#4857BA;
font-size:15px;
line-height:15px;
cursor:pointer;
position:absolute;
overflow:none;
}
</style>
</head>
<body>
<div id="container">
<div class="tipped-small">
<i class="material-icons" style="border:1px solid red">help_circle</i>
</div>
<input type="text" style="height:15px;border:1px solid red"/>
</div>
</body>
</html>
https://codepen.io/anjanesh/pen/LqYXZe
How do I get the i tag to be only 15px ?

Bootstrap Modal Windows in NodeJS

I am developing a dashboard website in NodeJS and MongoDB. In one of the page, I have to open an image in the modal window. Following is the code of that page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tor Modal Check</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link rel="stylesheet" href="css/responsive-tables.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="js/responsive-tables.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style type="text/css">
body .modal {
width: 650px;
margin-left: -325px;
}
</style>
</head>
<body>
<div class="mainwrapper">
<div class="rightpanel">
<ul class="commentlist">
<% tor.forEach(function(t){ %>
<li>
<img src="images/screenshot/<%= t.screenshot %>" alt="" style="width: 60px;" class="pull-left" />
<div class="comment-info">
<h4><%= t.url %></h4>
<p><strong>Comments: </strong><%= t.comments %></p>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#<%= t.modalid %>">Show Screenshot</button>
<!-- Modal -->
<div class="modal fade" id="<%= t.modalid %>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><%= t.url %></h4>
</div>
<div class="modal-body">
<img src="images/screenshot/<%= t.screenshot %>" height="100%" width="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<% }) %>
</ul>
</div>
</div>
</body>
The problem that I am facing is that not all "View Screenshot" are clickable. After digging a lot, I figure it's because of "rightpanel" div class.
/*** MAIN PANEL ***/
.rightpanel { margin-left: 260px; background: #f7f7f7; }
.rightpanel:after { clear: both; content: ''; display: block; }
If I remove margin-left: 260px; everything works as expected.
Any idea why this is happening and how to overcome it?
PS. This is not the complete code. Only the code that is significant for this question.
EDIT 1:
It works perfectly fine when i change margin-left: 260px to margin-left: 150px.
Bootstrap modals are already centered and have three sizes (300px for .modal-sm, 600px (default) and 900px for .modal-lg). But, if you need the width to be exactly 650px, you should set the width of .modal-dialog, not .modal. For example:
#media (min-width: 768px)
.modal-dialog {
width: 650px;
}

Watir-Webdriver Can't access a element with id and class

I am having a trouble trying to access a nested div that has id and class, I don't know why but I only can see his parent.
This is the HTML code:
<html xml: lang="en" xmlns="http://www.w3.org/1999/xhtml" webdriver="true">
<head id="ctl00_Head1"></head>
<body onunload="deshabilitaHistoria();" onload="deshabilitaHistoria();">
<form id="aspnetForm" action="ConsultaReceptor.aspx" method="post">
<div class="aspNetHidden"></div>
<script type="text/javascript">
//<![CDATA[ var theForm = document.forms['aspnetF…
</script>
<script type="text/javascript" src="/WebResource.axd?d=w3hP2KgSK0z5QKKeYrfjOjGIUO1WTymINPb1PJaT2…AjAREgWLQ_9gOp19BJLQL03iwEhxTK_VlYMMLk1&t=635757173565717094"></script>
<script type="text/javascript" src="/ScriptResource.axd?d=JZxa8gqDBBrScXZMeyf5kBYrESwOlB3UypK5wa…sdGfW92qpYAba8RsL1xfZ_4qsx20HZ3gnR8gWNG81&t=ffffffff805766b3"></script>
<script type="text/javascript" src="/ScriptResource.axd?d=Z6KcuJ_OzxT6nvHmSunXcYkoXPPYk2iZ6iqqza…Mhq8K8bd09EWTYt8d-AfoMh3rrp75DWb5vMAI1wb0&t=ffffffff805766b3"></script>
<script type="text/javascript">
//<![CDATA[ var PageMethods = function() { PageMe…
</script>
<div class="aspNetHidden"></div>
<script type="text/javascript">
//<![CDATA[ Sys.WebForms.PageRequestManager._init…
</script>
<div id="cuerpo_principal">
<div id="encabezado"></div>
<div id="menucontainer"></div>
<div id="cuerpo" style="margin-top: 30px">
<h2 class="subtitle">
Consultar Facturas Recibidas
</h2>
<span></span>
<br></br>
<br></br>
<div id="ctl00_MainContent_PnlConsulta" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_MainContent_BtnBusqueda')">
<div id="ctl00_MainContent_UpnlBusqueda"></div>
<div id="ctl00_MainContent_UpnlResultados">
<div id="ctl00_MainContent_PnlResultados" class="pnlResultados" style="height:auto;display:inline;">
<div id="DivContenedor" class="resultados" style="width: 900px; margin-left: 40px; overflow-x: scroll; height: auto; float: left">
<div id="ContenedorDinamico" style="margin-left: 0px;">
<table class="encabezadoresultado"></table>
<div id="DivPaginas" style="height: auto;">
<div id="masivapg0" class="pgActual"></div>
The div that i am trying to access is
div id="masivapg0" class="pgActual"
I am trying to access the element by the following code, however i always get a false result:
print browser.form(id: 'aspnetForm').div(id: 'cuerpo_principal').div(id: 'cuerpo').div(id: 'ctl00_MainContent_PnlConsulta').div(id: 'ctl00_MainContent_UpnlResultados').div(id: 'ctl00_MainContent_PnlResultados').div(id: 'DivContenedor').div(id: 'ContenedorDinamico').div(id: 'DivPaginas').div(id: 'masivapg0').exist?
But if i search for his parent i always get a true response:
print browser.form(id: 'aspnetForm').div(id: 'cuerpo_principal').div(id: 'cuerpo').div(id: 'ctl00_MainContent_PnlConsulta').div(id: 'ctl00_MainContent_UpnlResultados').div(id: 'ctl00_MainContent_PnlResultados').div(id: 'DivContenedor').div(id: 'ContenedorDinamico').div(id: 'DivPaginas').exist?
Any idea of why could this be happening?
your help is appreciated!
I loaded your html into a file and ran it in watir and, while the browser didn't display anything likely due to the incomplete html code, it didn't have any problem returning true like so:
browser.div(:id => "masivapg0").exists?
#=> true
id tags are supposed to be unique, so you shouldn't have to provide any more selectors than this...

Resources