Specific way of adding style with html.erb? - html

Have updated the css and html as the answers indicate but unfortunately the style information is still not being passed to the td. The class is defined as limits but no style.
Having some trouble with something very basic.
HTML
<%= stylesheet_link_tag "test.css" %>
</head>
<body>
<table class="results">
<% #result.each do |object|%>
<tr>
<td class="limit"> <%= object%> </td>
</tr>
<%end%>
</table>
</body>
CSS
table.results
{
width: 100%;
border: .2em ridge #000000;
}
td.limit
{
width:50%;
background-color: #fff000;
border: .2em ridge #0f0f0f;
}
In the resulting output. the table which has its class defined outside the ruby loop has all its style attributes included fine.
However the TD inside the ruby for.each loop does not. Is there some specific way to add a class to a HTML element in Ruby?
output html table as requested
<!DOCTYPE html>
<html>
<head>
<title>Crawler</title>
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>
<script src="/javascripts/rails.js" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="fQ/oa3q+Aq68GZenV26YuwPjDgbijTeuO3VJihtYHI8="/>
</head>
<body>
<html>
<head>
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="results">
<tr id="test-tr">
<td class="limit"> blag blah </td>
</tr>
<tr >
<td class="limit"> testing 45 </td>
</tr>
<tr >
<td class="limit"> testing</td>
</tr>
</table>
</body>
</html>
</body>
</html>

You're missing a semicolon after the background-color property in the CSS for your td. That'll be knocking out both the background-color and border properties.
You may want to take advantage of the W3C CSS Validation Service for basic sanity checking of your CSS. In your case, it says:
td.limit Value Error : background-color attempt to find a semi-colon before the property name. add it
...which is a bit cryptic, I admit, but at least a reasonable pointer towards your problem.

It is not about Ruby or Rails at all.
You have got EXTRA space between class and ="limit"
<td class ="limit"> <%= object%> </td>
#=> should be
<td class="limit"><%= object %></td>

Related

JavaScript date picker in HTML table

I have built a Prediction table which will contain football data. Please I need a JavaScript date picker code that will fit into this table I built.
table,
th,
td {
border: 0px solid black;
border-collapse: collapse;
}
table {
width: px;
}
th {
color: white;
background-color: black;
}
th,
td {
font-size: 25pt;
font-family: Arial;
text-align: center;
}
td {
background-color
<table>
<tr>
<th colspan="2"><b>England ยป Premier</b></th>
<th><b>Prediction</b></th>
</tr>
<tr>
<td> 24-06:20:16</td>
<td>Red Bull Bragantino <b style="color:red"> 2 : 1 </b> Ponte Preta</td>
<td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
I will be grateful if someone could help me out.
I advice to actually try and look for solutions.
Below is the solution to your question where the website i gave actually thought you step by step to create a datepicker.
First of all you will need jquery to be able to use datepicker. There is few ways for you to get jquery datepicker CSS & JS file. For me, i prefer using CDN as it is much conveniet. Usually JS scripts are recommended to be placed before the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table>
<tr>
<th><b>Datepicker</b></th>
</tr>
<tr>
<td>Date:</td>
<td><input type="text" id="datepicker"></td>
</tr>
</table>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>

Why is my bootstrap not working?

Please help me! Why is bootstrap not loading the classes?
Here's my code which is just a table and a simple button, yet no classes are applied
<!DOCTYPE html>
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</title>
</head>
<body>
<table class="table" id="table">
<thead>
<tr>
<th>Order ID</th>
<th>TX ID CxPay</th>
<th>TX ID IY</th>
<th>Amount</th>
<th>Class</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">asasa</button>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
</body>
</html>
Neither bootstrap nor datatables is working. What am I missing here?
Any help is appreciated!
You are importing the script inside <title> that's not correct. In <title> only text is allowed describing your page's title. Place your <script> and <link> above the </head>
All your included files are in your <title>.
You have to write :
<head>
<title>My Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>

How to get my <td> act like <tr>

Hi I'm trying to make a table responsive and I need the responsive and stack within each other like a table row
Html
<html >
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="teststyles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link href="media-queries.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td>
<p> Stuff </p>
</td>
<td >
<p> Stuff </p>
</td>
<td >
<p> Stuff </p>
</td>
</tr>
</table>
</body>
</html>
CSS
table{
width: 990px;
margin: 0 auto;
}
tr{
display:table;
width:100%;
}
td{
display:table-row;
background:#efefef;
}
So I thought table-row makes an element behave as table row but for some reason its not stacking like one. Any ideas or tips?
EDIT:
Looks like this when I open it on regular html but when I open it on fiddle it's great
You need a doctype in your HTML file. The first line should be:
<!DOCTYPE html>

Css Hyperlink font color not changing

I have seen similar posts ..I have modified my code and currently using this Code to add color to Hyperlink Text..My Hyperlink generates at runtime in HTML output..I have multiple css ..I think css effects are overriding
a:link
{
color: red;
color: inherit;
text-decoration:underline;
}
also tried this one :
a:link
{
color: #fff;
text-decoration:underline;
}
My Script:
function (response) {
obj =response.d;
var output = "<table class='table'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";
for (var x = 0; x < obj.length; x++) {
output += "<tr><td >" + obj[x].EMID + "</td></tr>";
}
output += "</table>";
$("#result").append(output);
this is my markup
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="UFZillaErrorStatus.aspx.cs"
Inherits="Dashboard.Web.UFZillaErrorStatus" %>
<!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>UFZillaErrorStatus</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Open+Sans+Condensed:300,700"
rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/themes/ui-lightness/jquery-ui-1.10.1.custom.css" rel="stylesheet"
type="text/css" />
<link href="css/assets/style.css" rel="stylesheet" type="text/css" />
<link href="js/common/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/common/jquery/json2.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/plugins/grid.postext.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery.alphanumeric.js" type="text/javascript"></script>
<script src="js/dashboard/UFZillaErrorStatus.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content1" style="background: 0 0 0 #FFFFF">
<div id="uferrdivs" align="center">
<table>
<tr>
<td>
Product
</td>
</tr>
<tr>
<td>
<select id="proselct">
</select>
</td>
</tr>
</table>
<center>
<div>
<div id="result" style="background-color: #F5F5F5; width: 800px; margin-top: 50px;">
</div>
</div>
</center>
</div>
</div>
</form>
</body>
</html>
..Underline effect appears..But color not changing ..I have tried other method .But Not working ...
Any Suggestion would be helpful
Remove:
color: inherit;
As this is overriding your colour that you want.
Ensure that your tag contains
href="#"
At minimum.
Try simplest way
use this css
a, a * {
color: #FFF !important; // important will avoid if any other css try to override it
}
If your background color is WHITE, link will not be visible. Because you set the same color for link
color: #FFF;
Try with different color
Try to remove
color: inherit;
and see it will work.
Simple demo of both
Fiddle Demo using inherit
Fiddle Demo without using inherit

defining a div tag in a td tag in a html table

I am trying to show a map in my website using Openlayers. I use the same code as here:
http://openlayers.org/dev/examples/all-overlays-google.html
Except, I want to bring it in a table, so that on the left hand side I can put some information about the map! The problem is that if I define the div tag for map in a td tag, when running the map does not show! I pulled it out from td tag and kept it in tr tag and it shows fine! My code is here:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="OpenLayers.js"></script>
<script src="all-overlays-google.js"></script>
</head>
<body onload="init()">
<table style="width: 100%;">
<tr>
<td style="width: 20%;">
Some text here
</td>
<td style="width: 80%;">
<div style="width:100%; height:60%" id="map">
</div>
</td>
</tr>
</table>
</body>
</html>
Any help would be highly appreciated.
Some points:
<center> is deprecated. Use CSS text-align: center.
Tables should only be used to display tabular data. Since in your case you don't have tabular data. don't use tables. Instead, use something like
<div id="colum-wrapper">
<div id="left-column">Left</div>
div id="right-column">Right</div>
</div>
#left-column{ float: left; width: /*whatever*/; }
#right-column{ overflow: hidden; }
Demo
Separation of behavior from markup: avoid adding event handlers using html attributes if possible.