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...
Related
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>
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;
}
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
Hello i have something very simple:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap-responsive.min.css">
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="{{adminUrl}}/assets/js/vendors/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{{adminUrl}}/assets/js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 20px; background: #fafafa; border-bottom: solid 1px #eee">
users list/no paging
create new user
</div>
<h1>List data:</h1>
<ol>
{{#each data}}
<li>
<div><b>{{username}} - {{id}}</b></div>
{{email}}
<div> </div>
</li>
{{/each}}
</ol>
</body>
</html>
This is an expressjs view that uses handlebars. 'adminUrl' is in app.locals.
app.locals({
adminUrl: _config.rootUrl
});
In the css, js and a href links outside the {{#each works just fine, but in the {{#each... does not. How can i fix it to work?
try {{../adminUrl}} within your {{#each}} block as I believe handlebars will change the context to be the current member of data and thus you need .. to access the parent context.
I'm using the following code:
<html>
<body bgcolor="black">
<center>
<div style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div>
</center>
</html>
It works in Chrome but not in IE or Firefox. My goal with this is to overlay cover.png over declined.png so people cannot directly save the image, but instead save a transparent png. I prefer to do this without using external CSS. Thanks for your help. :)
The standard method in css is to use margin: 0 auto, so:
<div style="width: 1080px; height: 288px; margin: 0 auto; position: relative">
<img ... >
<img ... >
</div>
Note the addition of position: relative. Without that, your images would position themselves absolutely relative to the <body> element. Also note that these sorts of overlays are trivial to bypass by anyone with the slightest knowledge of HTML and/or access to basic browser developer tools.
-Avoid using old tags such as instead use CSS.
-Use appropriate DOCTYPE (example below shows doctype for html5)
-Always close your tags, your code does not have closing tags for body.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div><!-- end div main -->
</body>
</html>
CSS:
#main{
margin: 0 auto;
width:1080px;
height:288px;
}