I am creating an application that will show to the user a formatted message in an UIWebView loading local HTML content.
I am using GRMustache to render the html to be displayed and bootstrap as css.
Everything works fine, the css is loaded, but when i want to display tables, the css is not recognized.
I don't know if UIWebView is not capable to recognize the css of the tables, but in the apple documentation just read that have the same capabilities than safari.
Here i put my template.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{{style}}
</style>
</head>
<body>
<h1> Message </h1>
<button class="btn btn-success"> Button </button>
<table class="table table-striped">
<tbody>
{{# detalle}}
<tr >
<td> {{capitalized(key) }} </td>
<td> {{ capitalized(object)}} </td>
</tr>
{{/ detalle}}
</tbody>
</table>
</body>
Here is an image of my UIWebView:
https://www.dropbox.com/s/or5vrqxxqbjqjoh/bootstrap%20app.png
The button css is rendered fine, but the table is not striped.
I checked my css, thinking than that was the problem, but it was just fine.
In this moment I can't find an answer for this problem.
Related
Hi I am using watir for cucumber test of PHP project.
Unfortunately page is always make from two frames.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>Rothschild - Olomouc</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/skripty.js"></script>
</head>
<frameset cols="183,*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="AUTO" noresize src="">
<frame name="mainFrame" src="getuser.php">
</frameset>
<noframes>
<body id=body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
leftFrame is menu,
mainFrame is main page content.
I use
if headless
#browser = Watir::Browser.new :phantomjs #headless
else
require 'watir-webdriver'
#browser = Watir::Browser.new :ie #non headless,IExplorer
end
main_content= #browser.frame(:name, "mainFrame").body
to get content of main part of page.
It works almost every time.
But now I get to situation when doubleclicking on TR
<tr class="subTable dealer_1" onDblClick="window.location.href='detail_dealer.php?id=207'">
<td><a name="a207"></a></td>
<td> Lama Mirek</td>
<td> Ústí n. Orlicí</td>
<td></td>
</tr>
get me to page detail_dealer.php?id=207 (in mainFrame of course)
but
#browser.frame(:name, "mainFrame").body
gives me previous table (with doubleclicking rows).
When I try to debug it with PRY
pry:> #browser.frame(:name, "mainFrame").body => content of desired detail page
It looks like watir needs a time to "reload" content of body. Is there some method to do "refresh" or "wait until new content is loaded"?
This happens with both drivers watir-webdriver and phantomjs.
Watir has a number of methods for waiting.
You will need find an element that only exists after clicking on the tr element. Then call one of the wait methods. For example:
browser.element.wait_until_present
Alternatively, you can also wait for an element to be removed after the tr is clicked:
browser.element.wait_while_present
I am currently learning SQL. On my CFM page I have entered all the information from the instructions my professor has given us. I have even compared to other students to try and figure out what is wrong, but their pages look like mine. Please help me figure out what I have done wrong. Thanks.
This is the webpage link http://pretendcompany.com/jaedenemployees.html
Error:
72777A, on line 66, column 32, is not a valid identifer name. The CFML
compiler was processing: The body of a CFOUTPUT tag beginning on line
62, column 3.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="YOUR NAME HERE" />
<title>USU MIS 2100</title>
<style type="text/css" media="all">
td {
align:center;
width:955;
border:none;
text-align:center;
vertical-align:top;
height:40px;
}
table.center{
margin:auto;
}
h1{
font-size:26px;
color:#001F3E;
}
h2{
font-size:20px;
color:#ffffff;
}
img{ text-align:center;
}
td.photo{
margin:auto;
}
</style>
</head>
<body>
<table class="center">
<tr>
<td ><img src="images/header2_usu.jpg" width="755" height="265" alt="usu" /></td>
</tr>
<tr>
<td style="height:900;background-color:#D7D9D9;padding-top:50px;">
Employees by Department at Pretend Company, Inc.</font></p>
<h1>Jaeden Harris</h1>
<CFQUERY name="jaeden" datasource="employeedatasource">
select Accounting,Administrative,Advertising,Payroll,Sales
from employees
where DepartmentName in(#PreserveSingleQuotes(form.SelectDepts)#)
</CFQUERY>
<!--Place opening CFOUTPUT here -->
<CFOUTPUT query="jaeden">
<table style="width:500;border:none;" class="center">
<tr style="background-color:#72777A;">
<td colspan="2"><h2> #DepartmentName# Employees </h2></td>
</tr>
<tr>
<td style="width:250;text-align:left;">Employee:#FirstName# #MiddleName# #LastName#
<p>Title: #Title#
<p>Email: #EmailName# #pretendcompany.com
<p>Contact Number: #WorkPhone#
</p>
</td>
<td style="width:140px;vertical-align:middle;" class="photo"><!--Reference Photograph field here --> </td>
</tr>
</table>
</CFOUTPUT>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You are within a CFOUTPUT, therefor anything with # signs gets evaluated, including the style background-color:#72777A;. Either escape those with a double hash: background-color:##72777A; or move the style out of your CFOUTPUT.
Since you already have a section for your CSS, it may be wise for you to move all your table styles from inline with the HTML to the top and just apply classes to your elements.
I am now learning Dojo. So I want to build my first demo by how to use gauges in Dojo.
I downloaded the zip package and build an asp.net web project. then all the resources from Dojo package are imported to this project.
Because I saw the demo from DoJo website: http://demos.dojotoolkit.org/demos/gauges/demo.html, So I want to copy this demo in my local computer with existing DoJo resources.
HTML code below:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DojoDaemon.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dojo Circular Gauge Test Daemon</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/dojo-release-1.9.1/dojo/dojo.js" type="text/javascript" data-dojo-config="async:true"></script>
<script src="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/CircularLinearGauge.js"
type="text/javascript" data-dojo-config="async:true"></script>
<script src="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/HorizontalLinearGauge.js"
type="text/javascript" data-dojo-config="async:true"></script>
<script src="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/SemiCircularLinearGauge.js"
type="text/javascript" data-dojo-config="async:true"></script>
</head>
<body>
<form runat="server" id="form1">
<h2 align="center" style="color:white;">Predefined Glossy Gauges</h2>
<table style="height:100%; width:100%">
<tr>
<td align="center">
<div id="CircularGauge" background="{color:'rgba(0,0,0,0)'}" useTooltip="false" data-dojo-type="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/CircularLinearGauge" style="width:200px;height:200px" value="20"></div></td>
<td align='center'>
<div id="CircularGauge2" background="{color:'rgba(0,0,0,0)'}" useTooltip="false" data-dojo-type="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/SemiCircularLinearGauge" value="10" style="width:250px;height:200px"></div></td>
</tr>
<tr>
<td valign="middle" align="center" colspan="2">
<div id="HGauge3" style="margin:30px 0px 0px 0px;width:400px;height:60px" useTooltip="false" background="{color:'rgba(0,0,0,0)'}" data-dojo-type="Scripts/dojo-release-1.9.1/dojox/dgauges/components/black/HorizontalLinearGauge" value="20"></div></td>
</tr>
</table>
</form>
</body>
</html>
Above is the code I use, I have searched a lot of examples, but got nothing because no one article give me the detailed steps to teach me how to use the resources in dojox folder.
resources I found like :
http://dojotoolkit.org/api/dojox/dgauges/CircularGauge
http://dmandrioli.github.io/dgauges/dojox/dgauges/CircularGauge.html
Would anyone help me if familar with this? thank you ver much.
You only need to load dojo.js in the src and the src.js which they have included for the demo. Click on the View Source of http://demos.dojotoolkit.org/demos/gauges/demo.html and copy the code exactly!
Dojo can seem like a beast at first, but its a beautiful toolkit that you will come to love and appreciate. Give it time. I STRONGLY recommend you say Hi to Dojo before jumping to dguage and other advanced stuff.
i have a div element which is created via JS on the fly.
<div id='menu_item_0'>foo</div>
Now my Selenium IDE locator is able to access this element with various selectors, but whatever event like e.g. mouseOver or clickAt etc I use, they all seem to get ignored.
I could of course wirte some script an fire this, but i want to test exactly the mouseover by a mouse and not dispatch it by myself.
Anyone has an idea on this? The recorder does not record this too.
Thanks & Regards
Can you show us the complete html and js ?
Here's a test code I've run with success. Does it match what you're trying to do ?
The HTML :
<html>
<body>
<script>
function insert(){
var container = document.getElementById("container")
var newdiv = document.createElement('div');
newdiv.setAttribute('id','menu_item_0');
newdiv.innerHTML = 'Added the element';
newdiv.onmouseover = function(){
newdiv.innerHTML = 'I feel tickled';
}
newdiv.onclick = function() {
newdiv.innerHTML = 'I feel clicked';
}
container.appendChild(newdiv);
}
setTimeout(insert,2000);
</script>
<div id="container"></div>
</body>
</html>
And the selenium test (just save this in a .html file and open it from Selenium IDE) :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="file:///G:/dev/proj/test-selenium-ide/" />
<title>test1</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test1</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>index.html</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>menu_item_0</td>
<td>2500</td>
</tr>
<tr>
<td>assertElementPresent</td>
<td>menu_item_0</td>
<td></td>
</tr>
<tr>
<td>mouseOver</td>
<td>menu_item_0</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>menu_item_0</td>
<td>I feel tickled</td>
</tr>
<tr>
<td>clickAt</td>
<td>menu_item_0</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>menu_item_0</td>
<td>I feel clicked</td>
</tr>
</tbody></table>
</body>
</html>
I am storing old html markup in my database, tracking changes, and then trying to render the diff using Differ and the :html format option.
The following code is successfully generated:
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<del class="differ">
<td>
<span id="someID">Previous Owner Name</span>
</td>
</del>
<ins class="differ">
<td>
<span id="someID">Current Owner Name</span>
</td>
</ins>
</tr>
...
</table>
Notice the <del> and <ins> tagged elements.
If I view the source, it looks fine.
But because apparently this would disrupt the table layout, all browsers seem to move these new elements to before the table. When I inspect the element, I get the following:
<del class="differ"> </del>
<ins class="differ"> </ins>
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<td>
<span id="someID">Previous Owner Name</span>
</td>
<td>
<span id="someID">Current Owner Name</span>
</td>
</tr>
...
</table>
I tried writing a custom Rails view helper to replace each <ins> and <del> with a <span>, but the same thing happens.
Is there a way to style the table using elements like I am trying to do, or am I going to have to walk the dom and apply styles to each appropriate <td> using javascript? I cannot replace the tables in the beginning because I don't control the source.
Thanks to David & Steve for confirming the issue, I was able to resolve this specific case by translating the <ins> and <del> tags into classes, and applying them to each child element using Nokogiri prior to rendering the view.
I created a table_safe helper as follows:
def table_safe(markup)
parsed = Nokogiri.parse(markup)
parsed.css('ins').children().each do |el|
if el['class']
el['class'] = el['class'] << ' ins'
else
el['class'] = 'ins'
end
end
parsed.css('del').children().each do |el|
if el['class']
el['class'] = el['class'] << ' del'
else
el['class'] = 'del'
end
end
parsed.to_s
end
This can obviously be refactored, but it solves the problem. Ideally I could modify the :html formatting option in the Differ gem so that it inserts the tags inside of the first nested element if that element itself has not changed. I'm not sure why this isn't the default functionality, but it is outside the scope of my capabilities.
Why not add a CSS stylesheet to copy the style class differ to all TD elements?
<link rel="stylesheet" type="text/css" href="some.css" />
And then a definition like this in the stylesheet:
td {
padding: 15px;
background-color: gold;
text: black;
font-family: Courier, "Courier New", Tahoma, Arial, "Times New Roman";
border: 1px solid black;
/* Some other properties here...... */
}
And a sample HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anything</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ja.css" />
</head>
<body bgcolor="white" text="black">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
Working example:
http://pastehtml.com/view/ckdf6rxo3.html
Maybe this W3Schools link will be useful:
CSS Styling Tables