I am using JQM table in my html and included all neccesary jQuery file. Please find below my code.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jqueryMobile/jquery.mobile-1.4.2.min.css">
<link type="text/css" href="jqueryMobile/jquery.mobile.inline-svg-1.4.2.min.css" rel="stylesheet">
<script src="jqueryMobile/jquery-1.10.2.min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageten">
<div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
<h2>My Services</h2>
</div>
<div>
<input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
<input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
</div>
<br>
<div data-role="content">
<div>
<table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;">
<thead>
<tr style="font-size: 15px; text-align: center">
<th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
<th data-priority="1" style="text-align: center">Available Activation</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 15px; text-align: center">
<th style="text-align: center">0</th>
<th style="text-align: center">25</th>
</tr>
<tr style="font-size: 15px; text-align: center">
<th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
</tr>
</tbody>
</table>
</div>
</div>
<div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">
<div class="ui-block-a">
<input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
<span>Current Services</span>
</div>
<div class="ui-block-b">
<input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
<span>Add Services</span>
</div>
<div class="ui-block-c">
<input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
<span>Remove Services</span>
</div>
</div>
</div>
Please Find Image attachment, it displayed deformed table on UI Screen of simulator with red Rectangular bracket whereas it should be like in green rectangle. I am not getting reason of Why its getting distorted. Please help me with it
you need to use data-mode="none" on your table,
this will keep the high priority columns intact. and also doesnt show the option to hide the columns manually.
here is the working code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js">
<link type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="pageten">
<div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
<h2>My Services</h2>
</div>
<div>
<input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
<input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
</div>
<br>
<div data-role="content">
<div>
<table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;" data-mode="none">
<thead>
<tr style="font-size: 15px; text-align: center">
<th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
<th data-priority="1" style="text-align: center">Available Activation</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 15px; text-align: center">
<th style="text-align: center">0</th>
<th style="text-align: center">25</th>
</tr>
<tr style="font-size: 15px; text-align: center">
<th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
</tr>
</tbody>
</table>
</div>
</div>
<div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">
<div class="ui-block-a">
<input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
<span>Current Services</span>
</div>
<div class="ui-block-b">
<input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
<span>Add Services</span>
</div>
<div class="ui-block-c">
<input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
<span>Remove Services</span>
</div>
</div>
</div>
</body>
</html>
hope it helps.
Related
I need put letters in a permanent site in a div like the next photo
as you can see I need to reduce the position of the letters
My code is this
<div class="col-md-4 col-xl-4 col-xs-4 col-sm-4 col-lg-4">
<div class="contenedor">
<center>
<h3>Helado de copoazú </h3>
</center>
<br />
<figure>
<img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"
style="width: 100%;border-radius: 8px;" product_id='45' onmousemove="deshabilitar()"/>
<div class="centrado2" name="disponible_helado" id="agotado_45"></div>
</figure>
<center>
<div id="adiciona45_mostrar" style="font-weight:bold; font-size: 22px;">
Bs.
10
</div>
<button id="stepDown-helado" type="button" style="border-radius: 15px;"
class=" btn btn-success"
onclick="cambiar_inputs();" product_id='45'>-</button>
<input type="number" name="numero_helado" id="numero_helado" value="0"
min="0" readonly="1" size="3"
style="text-align: center;width:50px !important; border: 1px solid #97CCF3; color: #099EFB; font-weight: bold;border-radius: 15px;" />
<button id="stepUp-helado" type="button" style="border-radius: 15px;"
class=" btn btn-primary"
onclick="cambiar_inputs();" product_id='45'>+</button>
</center>
</div>
<hr style="border: 5px solid #1db33b; width:100%" />
</div>
How can i do that?
using css this is simple
div::after{
content: 'anyLetter';
}
or
div::before{
content: 'anyLetter';
}
Edit: if you want to add it in the around the location marked in the image,
i would suggest around the <h3> or the <figure> tags.
also adding a class like after-word would make it more usable
I'm trying to convert this table to divs to create a homepage for an online course. Can someone help me style the banner image and buttons in divs instead of a table? Here's the sample code:
<table class="tg" style="width: 785.948px;" cellspacing="2">
<tbody>
<tr>
<th class="tg-baqh" style="width: 726.948px;" colspan="5"><img src="https://canvas.ubc.ca/courses/1755/files/187001/preview" alt="TBLE banner-2.png" width="808" height="166" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001" data-api-returntype="File" /></th>
</tr>
<tr>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Before We Meet" href="https://canvas.ubc.ca/courses/1755/modules/11024" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024" data-api-returntype="Module">Link 1</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 135px; height: 21px;" title="Wk 1: Discover" href="https://canvas.ubc.ca/courses/1755/modules/11025" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025" data-api-returntype="Module">Link 2</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Wk 2: Design" href="https://canvas.ubc.ca/courses/1755/modules/11026" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026" data-api-returntype="Module">Link 3</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 4</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 5</a></td>
</tr>
</tbody>
</table>
Just SWAGing your layout with the magic of Flex and CSS.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
.tg { width: 785.948px; }
.tg-bagh { width: 726.948px; }
.tg-6k2t { width: 130px; text-align: center; }
a { width: 135px; height: 21px; }
.wrapper {
display: flex;
flex-wrap: wrap;
margin: 0.2em;
padding: 0.2em;
}
.wrapper > div {
border: 2px solid black;
margin: 0.2em;
padding: 0.2em;
}
/*
FileName - styles.css
Description - CSS code for making the image responsive by setting the value of four properties
such as display, margin-left, margin-right, width
Author - Tanu Nanda Prabhu
*/
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
</style>
</head><body>
<div class="tg-baqh center">
<img src="https://canvas.ubc.ca/courses/1755/files/187001/preview"
alt="TBLE banner-2.png"
width="100%" height="166"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001"
data-api-returntype="File" />
</div>
<div class="wrapper">
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Before We Meet"
href="https://canvas.ubc.ca/courses/1755/modules/11024"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024"
data-api-returntype="Module">Link 1</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Wk 1: Discover"
href="https://canvas.ubc.ca/courses/1755/modules/11025"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025"
data-api-returntype="Module">Link 2</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Wk 2: Design"
href="https://canvas.ubc.ca/courses/1755/modules/11026"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026"
data-api-returntype="Module">Link 3</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Week 3: Deliver"
href="https://canvas.ubc.ca/courses/1755/modules/11027"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
data-api-returntype="Module">Link 4</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Week 3: Deliver"
href="https://canvas.ubc.ca/courses/1755/modules/11027"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
data-api-returntype="Module">Link 5</a>
</div>
</div>
</body></html>
Could be made more responsive if you had defined more of your existing CSS
Removed all inline CSS statements for a start.
I need to select this input ...
(name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox ")
... with xpath after this modal popup. I cant use .FindByClass because there are same classes in the main page, but I need open which in (id="__LIGHTBOX__") modal;
<div style="overflow: visible; padding: 0px; width: auto; min-height: 143px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content" id="__LIGHTBOX__">
<div class="__BOX__">
<input name="BtnClose" class="BoxButtonClose" type="button">
<div>
<img src="/Content/themes/base/images/popup-bg-top.png">
</div>
<div class="popupCapsule clearFix">
<form action="/BillPayment/TransferInfo" method="post">
<div class="banner clearFix">
<h1 class="pageTitle">Fatura Ödeme</h1>
</div>
<div class="relatedPeopleContainer clearFix">
<div class="topDiv">
</div>
<div class="relatedPeople clearFix">
<table>
<tbody>
<tr>
<td class="t1">
<img src="Content/banks/bank205.png">
</td>
<td class="t2 SenderReceiverSubmit" rowspan="2" style="cursor: pointer;">
<div class="arrow">
</div>
</td>
<td class="t3">
<img src="Content/company/Turkcell.png">
</td>
</tr>
<tr>
<td class="t4">
<div class="info right">
<h2 class="NavigationButtonIndex" style="cursor: pointer;" title="Hesabınızı değiştirmek için tıklayınız.">HESABIM
<img src="/Content/themes/base/images/change-account.png" alt="" style="height: 20px; vertical-align: text-bottom;">
</h2>
<p class="first">
Beşyüzevler Şube
</p>
<p>
Cari Hesap
</p>
<p>
10136046-1
</p>
<p>
1.256,51 TL
</p>
</div>
</td>
<td class="t6">
<div class="info left">
<h2>TURKCELL
</h2>
<p class="first">
1774862559
</p>
<p>
5303003816
</p>
<p>
23,40 TL
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bottomDiv">
</div>
</div>
<div class="amountEntry clearFix">
<table class="moneyEditorTable ">
<tbody>
<tr>
<td>
<input class="integerinput " data-val="true" data-val-regex="The field Integer must match the regular expression '[0-9.,]{1,11}'." data-val-regex-pattern="[0-9.,]{1,11}" datavalrequired="" disabled="disabled" id="IntegerInput" name="Amount.Integer" onkeyup=";" value="23" type="text"></td>
<td class="spanTd">
<span class="currency ">,</span>
</td>
<td>
<input maxlength="2" class="decimalinput " data-val="true" data-val-range="The field Decimal must be between 0 and 99." data-val-range-max="99" data-val-range-min="0" datavalrequired="" disabled="disabled" id="DecimalInput" name="Amount.Decimal" onkeypress="return BOA.Web.Validation.NumericControl(event);" onkeyup=";BOA.Web.Validation.DecimalPoint(event, $(this));" onpaste="BOA.Web.Validation.NumericEditorPaste(event, $(this));" value="40" type="text"></td>
<td class="spanTd">
<span class="currency ">TL</span>
</td>
</tr>
</tbody>
</table>
<input id="Amount_FECCode" name="Amount.FECCode" value="TL" type="hidden">
<div class="Error clearFix">
<span class="field-validation-valid" data-valmsg-for="Amount" data-valmsg-replace="true"></span>
</div>
</div>
<table class="popupButtonArea">
<tbody>
<tr>
<td class="left">
<input name="BtnPrev" value="GERİ" class="NavigationButtonPrev " type="button">
</td>
<td class="right">
<input name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox " type="button">
<input name="FromStep" value="TransferInfo" type="hidden">
</td>
</tr>
</tbody>
</table>
<input name="__RequestVerificationToken" value="jzI4c0v-PPC60xzaY8B2FDiCLYmHwCCtQsYv7UbBIMgnBWFeEpJoLLMDgf4LGl24WxhfizGlsqEJdjhywzgNHT785XHRzmwcU2qDyaQfSh6SajD8WKCAEq2L8CejPMJ65QL45A2" type="hidden">
</form>
</div>
<div>
<img src="/Content/themes/base/images/popup-bg-sub.png">
</div>
</div>
</div>
You can try to find the element by the following xpath :
//div[contains(#id, 'LIGHTBOX')]//input[#name='BtnNext' and contains(#class, 'NavigationButtonNextLightBox')]
Above xpath attempt to find a <div> having id contains LIGHTBOX, then from within that <div> get <input> element having name attribute equals BtnNext and class attribute contains NavigationButtonNextLightBox
Not sure am i missing somehting here, but whats stopping you from selecting by name?
WebElement btnNext = driver().findElement(By.name("BtnNext"));
I have been debugging the following html code and it has a weird behavior.
Everytime, when I load the page in IE, the browser seems doesn't pickup the width attribute initially. However, it is working fine after a refresh. This page works on all browser but IE. Could you please give me some tips what's going on here?
Thank you very much
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<title>Money_market</title>
</head>
<body lang="3DEN-US" style="3D'tab-interval:.5in'">
<div id="IDMS_container">
<div style="text-align:right;" id="logout">User: <b></b> Logout</div>
<div class="tabs">
<ul>
<li>Cusip Entry Lookup</li>
<li>Corp/Gov.<br>Bond Lookup</li>
<li>Muni Bond<br>Lookup</li>
<li class="selected">Money Market<br>Lookup</li>
<li>Help</li>
<div class="clear"></div>
</ul>
</div>
<br>
<div id="symbol">
<h1>Money Market Lookup:</h1>
<table>
<tbody><tr>
<form method="GET"></form>
<td class="valign">Issuer:</td>
<td class="valign"><input type="text" value="" id="form" size="9" name="desc"></td>
<td class="valign">Coupon:</td>
<td style="width:100px;" class="valign"><input type="text" value="" id="form" size="4" name="coupon"></td>
<input type="hidden" value="money" name="s_pageid">
<td class="valign"><input type="submit" value="Lookup" id="button" name="button"></td>
</tr>
</tbody></table>
<!--span class="date_form">(Enter Date: MM/DD/YYYY)</span-->
</div>
<div id="quote">
<table>
<tbody><tr>
<th>Issue Name</th>
<th>Coupon</th>
<th>Maturity Date</th>
<th>Bid Evaluation</th>
<th>Bid Evaluation Date</th>
</tr>
</tbody></table>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="http://www.federated.test.idmanagedsolutions.com/css/IDMS_styles.css"> </div>
</body></html>
I have my margin: 0 auto looking good in Chrome but it's not working in IE9. In IE9 the entire site is static against left of the screen. I added a simple reset css statement based on some suggestions but they are not helping.
In main.css:
html, body {
padding:0;
margin: 0;
}
body {
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrapper {
width: 1009px;
background-color:white;
border-style:solid;
border-color:#002663;
padding:5px;
margin: 0 auto;
margin-top:25px;
}
Updated: What the css looks like in IE's dev tools panel:
Can anyone see where I can make an improvement for IE? Thanks.
Update: actual html as requested:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Search Page</title>
<!-- Hostname: VDDP03A-FAEF32A -->
<link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" />
<script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script>
</head>
<body >
<div class="wrapper">
<table width="100%" border="0" cellpadding="0" style="margin:0;">
<tr>
<td>
<img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo">
</td>
<td width="50%">
<br />
<h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2>
</td>
<td>
</td>
</tr>
</table>
<hr color="#002663" style="margin:0;">
<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;">
<input type="hidden" name="searchType" value="myValue">
<table width="1000px" border="0" cellpadding="0" style="margin:0;">
<col width="285px" />
<col width="300px" />
<col width="278px" />
<col width="137px" />
<tr style="margin:0;">
<td colspan="4">
<h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4>
</tr>
<tr style="margin:0;">
<td style=" padding-left:100px; padding-bottom:0px; width:185px;" >
options :
<input type="radio" name="options" value="OP1" style="border:none;">
OP1
<input type="radio" name="options" value="OP2" style="border:none;">
OP2
</td>
<td>
Search Criteria : <input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1">
</td>
<td style="min-width: 268px;">
Date :
<input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker">
</td>
<td style="min-width: 138px;">
<input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">
<input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;">
</td>
</tr>
</table>
</form>
<!-- Three more forms similar to the above -->
<hr color="#b0b1b2" style="margin:3;">
<table table width="1000px" border="0" cellpadding="0">
<tr style="margin:0;">
<td style="margin:0;">
<h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4>
</td>
</tr>
<div styleId="errors" style="margin:0;">
</div>
</table>
</div>
</body>
</html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Doctype has to be the first thing in the document. It goes before the <html> start tag.
Putting it where you have it is both invalid and triggering of quirks mode (and in quirks mode, all sorts of things break).
Try adding margin:0 auto on your body tag
body {
/* background-position: 5px 5px;
background-repeat: no-repeat; */
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1010px;
margin: 0 auto; /* <--*/
}
Try
body, html {
padding: 0;
margin: 0;
}
Look up reset css when you get a chance http://www.cssreset.com/
Update:
I would suggest you take the width off of the body tag and put it in a div.
http://jsfiddle.net/KMDuw/2/
My fiddle shows a fixed width div using auto margin. If you take off the body css, you will see some space.
Can you also post your html please