I'm trying to highlight a title header or release date header every time you click on it, but i can't make it. I'm using Ruby 1.9.3 and Rails 3.2.14
I thought it was something in my controller or view, but i don't get it. It sorts, but the yellow highlight is not applied in the header.
Here it is my movies_controller file (just the relevant part):
class MoviesController < ApplicationController
...
def index
#movies = Movie.find(:all, :order => params[:sort_by])
if params[:sort_by] == 'title'
#title_header = 'hilite'
elsif params[:sort_by] == 'release_date'
#release_header ='hilite'
end
end
...
My view file (is HAML):
-# This file is app/views/movies/index.html.haml
%h1 All Movies
%table#movies
%thead
%tr
%th{:class=>#title_header, :id=> "title_header"}= link_to "Movie Title", movies_path(:sort_by => 'title')
%th Rating
%th{:class=>#release_header, :id=> "release_date_header"}= link_to "Release Date", movies_path(:sort_by => 'release_date')
%th More Info
%tbody
- #movies.each do |movie|
%tr
%td= movie.title
%td= movie.rating
%td= movie.release_date
%td= link_to "More about #{movie.title}", movie_path(movie)
= link_to 'Add new movie', new_movie_path
And Finally, my application.css:
html, body {
margin: 0;
padding: 0;
background: White;
color: DarkSlateGrey;
font-family: Tahoma, Verdana, sans-serif;
font-size: 10pt;
}
div#main {
margin: 0;
padding: 0 20px 20px;
}
a {
background: transparent;
color: maroon;
text-decoration: underline;
font-weight: bold;
}
h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}
table#movies {
margin: 10px;
border-collapse: collapse;
width: 100%;
border-bottom: 2px solid black;
}
table#movies th {
border: 2px solid white;
font-weight: bold;
background-color: wheat;
}
table#movies th.hilite {
background-color: yellow;
}
table#movies th, table#movies td {
padding: 4px;
text-align: left;
}
#notice #warning {
background: rosybrown;
margin: 1em 0;
padding: 4px;
}
form label {
display: block;
line-height: 25px;
font-weight: bold;
color: maroon;
}
UPDATE: HTML source after rendering:
<!DOCTYPE html>
<html>
<head>
<title>Rotten Potatoes!</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="jJOoNtKNLzZb+w8ywbDStDxk5TbODkv8fUtgX1bEvFU=" name="csrf-token" />
</head>
<body>
<h1 class='title'>Rotten Potatoes!</h1>
<div id='main'>
<h1>All Movies</h1>
<table id='movies'>
<thead>
<tr>
<th id='title_header'>Movie Title</th>
<th>Rating</th>
<th id='release_date_header'>Release Date</th>
<th>More Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star Wars</td>
<td>PG</td>
<td>1977-05-02 00:00:00 UTC</td>
<td>More about Star Wars</td>
</tr>
<tr>
<td>Aladdin</td>
<td>G</td>
<td>1992-11-25 00:00:00 UTC</td>
<td>More about Aladdin</td>
</tr>
<tr>
<td>The Terminator</td>
<td>R</td>
<td>1984-10-26 00:00:00 UTC</td>
<td>More about The Terminator</td>
</tr>
<tr>
<td>When Harry Met Sally</td>
<td>R</td>
<td>1989-07-21 00:00:00 UTC</td>
<td>More about When Harry Met Sally</td>
</tr>
<tr>
<td>The Help</td>
<td>PG-13</td>
<td>2011-08-10 00:00:00 UTC</td>
<td>More about The Help</td>
</tr>
<tr>
<td>Chocolat</td>
<td>PG-13</td>
<td>2001-01-05 00:00:00 UTC</td>
<td>More about Chocolat</td>
</tr>
<tr>
<td>Amelie</td>
<td>R</td>
<td>2001-04-25 00:00:00 UTC</td>
<td>More about Amelie</td>
</tr>
<tr>
<td>2001: A Space Odyssey</td>
<td>G</td>
<td>1968-04-06 00:00:00 UTC</td>
<td>More about 2001: A Space Odyssey</td>
</tr>
<tr>
<td>The Incredibles</td>
<td>PG</td>
<td>2004-11-05 00:00:00 UTC</td>
<td>More about The Incredibles</td>
</tr>
<tr>
<td>Raiders of the Lost Ark</td>
<td>PG</td>
<td>1981-06-12 00:00:00 UTC</td>
<td>More about Raiders of the Lost Ark</td>
</tr>
<tr>
<td>Chicken Run</td>
<td>G</td>
<td>2000-06-21 00:00:00 UTC</td>
<td>More about Chicken Run</td>
</tr>
</tbody>
</table>
Add new movie
</div>
</body>
</html>
Your code will work if you modify your movie controller as shown:
def index
#movies = Movie.all(:order => "title ASC, release_date ASC")
if params[:sort_by] == 'title'
#title_header = 'hilite'
elsif params[:sort_by] == 'release_date'
#release_header ='hilite'
end
end
Highlight can be done on your CSS.
So you could do as follows:
.hilite a:visited {
background-color: yellow;
}
This will highlight the link after you clicked it.
If you want to highlight the link while pointing your cursor on it replace "visited" with "hover".
Related
Here is a snippet with a sample code:
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
padding: 3px 6px;
}
[contenteditable]:empty:not(:focus)::before {
content: attr(data-placeholder);
color: gray;
font-size: .9rem;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true" data-placeholder="Firstname"></td>
<td contenteditable="true" data-placeholder="Lastname"></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
In Chrome and Safari, it works pretty much as expected:
For some reason, in Firefox, the contenteditable tds don't get the placeholder:
How can I fix this issue?
EDIT: It seems this is issue is more related to :empty than [contenteditable] as this code kinda works:
[contenteditable]:not(:focus)::before {
content: attr(data-placeholder);
color: gray;
font-size: .9rem;
}
But then the placeholder is always shown, hence not being an actual "placeholder" anymore.
Firefox has incompatibility with td:empty not because there is an issue with the css engine but because the way Firefox handles contenteditable is by adding a br tag into the region.
An alternate way to do this would be to change the html to use inputs that you disable when content is present.
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 0;
}
table input {
border: none;
}
[placeholder] {
color: gray;
font-size: .9rem;
}
<table>
<thead>
<tr>
<th>Forename</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td><input placeholder="Forename"></td>
<td><input placeholder="Surname"></td>
</tr>
<tr>
<td><input placeholder="Forename" value="John" disabled></td>
<td><input placeholder="Forename" value="Doe" disabled></td>
</tr>
</tbody>
</table>
As #DreamTeK mentioned, Firefox seems to add a <br> in empty contenteditable elements.
His answer, using input instead of contenteditable is valid.
In case you have no choice but to use contenteditable, here is a fix in JS to remove this unwanted br:
// VanillaJS
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('[contenteditable]').forEach((elt) => {
if (elt.children.length === 1 && elt.firstChild.tagName === "BR") {
elt.firstChild.remove();
}
})
});
// jQuery
/*
$(document).ready(() => {
$('[contenteditable]').each((_, elt) => {
if ($(elt).children().length === 1 && $(elt).has('br')) {
$(elt).html('');
}
});
});
*/
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
padding: 3px 6px;
}
[contenteditable]:empty:not(:focus)::before {
content: attr(data-placeholder);
color: gray;
font-size: .9rem;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true" data-placeholder="Firstname"></td>
<td contenteditable="true" data-placeholder="Lastname"></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
i'm having a weird behavior for the table's data , it's not aligned at all , how can i solve this problem ? is there a way to specify the column width and to start the text from the same position ?
see the table below
table
here is my code that contains the table head :
const HospitalsList = (props) => (
<div className="content-container">
<div className="header__content">
<h1>Hospitals List</h1>
</div>
<HospitalsListFilters />
<AddHospitalPage/>
<table className="content-table">
<thead>
<tr>
<th>Hospital Name</th>
<th>Province</th>
<th>Sector</th>
<th>No of OR</th>
<th>No of Beds</th>
</tr>
</thead>
</table>
{props.hospitals.map((hospital) => {
return <HospitalListItem key={hospital.id}{...hospital} />
})}
</div>
)
and here is the code for the table data :
const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
<div>
<table className="content-table">
<tbody>
<tr>
<Link to ={`/edit/${id}`}>
<td>{name}</td>
</Link>
<td>{province}</td>
<td>{sector}</td>
<td>{noOfOR}</td>
<td>{noOfBeds}</td>
</tr>
</tbody>
</table>
</div>
here is the css file :
.content-table {
border-collapse: collapse;
font-size: larger;
min-width: 1200px;
max-width: 1400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
margin-left: $l-size;
thead tr {
th{
padding : 12px 15px;
}
background-color: teal;
color: white;
font-weight: bold;
}
td {
padding : 12px;
}
tbody tr {
border-bottom: 1px solid #dddddd;
}
tbody tr:last-of-type{
border-bottom: 2px solid #dddddd;
}
}
You are creating a new table for every row. Instead, you should .map inside the main table (within the tbody element):
<table className="content-table">
<thead>
<tr>
<th>Hospital Name</th>
<th>Province</th>
<th>Sector</th>
<th>No of OR</th>
<th>No of Beds</th>
</tr>
</thead>
<tbody>
{props.hospitals.map((hospital) => {
return <HospitalListItem key={hospital.id} {...hospital} />
})}
</tbody>
</table>
Then change HostpitalListItem to only render a table row:
const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
<tr>
<td><Link to={`/edit/${id}`}>{name}</Link></td>
<td>{province}</td>
<td>{sector}</td>
<td>{noOfOR}</td>
<td>{noOfBeds}</td>
</tr>
)
I'm trying to set up a formatting class for tables on a wiki I'm building, and I've hit a wall on my very rudimentary CSS knowledge. Following online tutorials, I tried to create a .navbox class in the CSS sheet and alter settings for table, th, and td, but I hit an error message.
This is about as far as I got:
.navbox {
border: 2px solid black;
th {
background-color: gray;
}
}
Fandom's built-in compiler gave an error message on the "th" line saying "expected COLON at line 3, col 8", and another on the last line saying "unexpected token '}' at line 6, col 1".
I want to make this table: https://aeon14.fandom.com/wiki/Template:New_Canaan_system
...look something like this: https://memory-beta.fandom.com/wiki/Template:Ships_named_Enterprise
I see your using some SCSS syntax instead of CSS
Try this :
.navbox {
border: 2px solid black;
}
.navbox th {
background-color: gray;
}
Please check this code and implement it in your code and also change color value in CSS which you want.
#customers {
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers thead th{
background-color: gray;
}
#customers tbody th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #d7d7d7;
color: white;
}
<table id="customers">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<th>Alfreds Futterkiste</th>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<th>Berglunds snabbköp</th>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<th>Centro comercial Moctezuma</th>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<th>Ernst Handel</th>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<th>Island Trading</th>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<th>Königlich Essen</th>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<th>Laughing Bacchus Winecellars</th>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<th>Magazzini Alimentari Riuniti</th>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<th>North/South</th>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<th>Paris spécialités</th>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</tbody>
</table>
You can see the differences what i get for my table styling with and without using bootstrap but i want the same behavior instead.
table styling without bootstrap
table styling after bootstrap
application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*= require_tree .
*/
#import "bootstrap-sprockets";
#import "bootstrap";
general.css
.pos { color: #000; }
.neg { color: #f00; }
h1 {
color:orange;
text-align: center;
}
table.listing{
background: #C3D9FF none repeat scroll 0% 0%;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:20px 20px 40px;
border-radius:10px;
}
table.listing tr.tr-head{
background: #fff;
color:#990a10;
font-weight:bold;
text-align:center;
}
table.listing .tr-head td{
padding:5px;
padding-left:10px;
}
table.listing .tr-odd{
background: #fff;
text-align:center;
padding:50px;
color:#27292b;
font-weight:600;
font-size:14px;
}
table.listing .tr-even{
background: #f1f6ff;
text-align:center;
padding:50px;
color:#27292b;
font-weight:600;
font-size:14px;
}
table.listing td.col-1{
width:10%;
padding: 5px;
padding-left:10px;
}
table.listing td.col-3{
width:13%;
padding: 5px;
padding-left:10px;
}
index.html.erb
<h1>361° YAZD Statement</h1>
<% balance = 0 %>
<table class="listing" align="center" width="100%" cellpadding="1" cellspacing="1">
<tr class="tr-head">
<td>Date</td>
<td>Description</td>
<td>Amount</td>
<td>Discount</td>
<td>Paid</td>
<td>Balance</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<% #statements.each do |statement| %>
<tr class="tr-<%= cycle('odd', 'even') %>">
<td class="col-1"><%= statement.date %></td>
<td class="col-3"><%= statement.description %></td>
<td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td>
<td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td>
<td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td>
<% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %>
<% color = balance >= 0 ? "pos" : "neg" %>
<td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td>
</tr>
<% end %>
</table>
The problem is when I import bootstrap the background property is missing;
table.listing{
background: #C3D9FF none repeat scroll 0% 0%;
}
I really appreciate if anybody could help me out!!!
div h1 {
color: orange;
text-align: center;
}
.pos {
color: #000;
}
.neg {
color: #f00;
}
.myTable {
background: #C3D9FF none repeat scroll 0% 0%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px 20px 40px;
}
.myTable .table,
.myTable tr {
border: 2px solid #C3D9FF;
}
.table.listing tr.tr-head {
background: #fff;
color: #990a10;
font-weight: bold;
border: 2px solid #C3D9FF;
}
.table.listing .tr-head td {
padding: 5px;
border: 2px solid #C3D9FF;
}
.table.listing .tr-odd {
background: #fff;
color: #27292b;
font-weight: 600;
font-size: 14px;
border: 2px solid #C3D9FF;
}
.table.listing .tr-even {
background: #f1f6ff;
color: #27292b;
font-weight: 600;
font-size: 14px;
border: 2px solid #C3D9FF;
}
.table.listing td.col-1 {
width: 10%;
padding: 5px;
border: 2px solid #C3D9FF;
}
.table.listing td.col-3 {
width: 13%;
padding: 5px;
border: 2px solid #C3D9FF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<h1>361° YAZD Statement</h1>
<div class="table-responsive myTable">
<table class="table table-bordered listing text-center">
<tr class="tr-head">
<td>Date</td>
<td>Description</td>
<td>Amount</td>
<td>Discount</td>
<td>Paid</td>
<td>Balance</td>
</tr>
<tr class="tr-even">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-odd">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-even">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-odd">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
</table>
</div>
</div>
You need to first change general.css to general.css.scss then import it into application.css.scss with your other SCSS files (and since you're using SCSS you should remove all of the comments/text/requires that you have at the top of your current application.css.scss):
#import "bootstrap-sprockets";
#import "bootstrap";
#import "general";
You should probably restart your server as well after these changes are made.
In your HTML first load bootstrap and then load your custom stylesheets. Something like this:
<!-- styles -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
This solved my problem when I experienced the same issue yesterday.
I saw several questions on this forum related to my problem but neither of them were helpful, so am posting here.
I have a table where a style is applied at table level(.tblSignal) and td level (.tdSignalName). Here is jsfiddler link
My problem is, when I hover on the table, all the text should turn to white color. But since there is a style applied on .tdSignalName as "#0072c6", it does not override the color to white. I tried "!important" but it did not work. Please advise !
.tblSignal{
/* border-width:1px; */
border-style:solid;
}
.tblSignal:hover{
background-color:#0072c6;
color:#FFFFFF !important;
font-size:initial;
}
.tdSignalName{
font-weight:bold;
height:30px;
font-size:16px;
color:#0072c6;
}
/* .tdSignalName:hover{
color:#FFFFFF !important;
} */
.tdSignalDescription{
}
.tdSigButton{
text-align:center;
vertical-align:middle;
}
<table class="tblSignal" width="500px">
<tr >
<td class="tdSignalName" width="400px">
<div>Title</div>
</td>
<td rowspan="2" class="tdSigButton" width="100px">
<div id="divButton">
<button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
</div>
</td>
</tr>
<tr>
<td class="tdSignalDescription" width="400px">
<!-- _#=ctx.RenderBody(ctx)=#_ -->
<div><i>SignalDescription </i></div>
</td>
</tr>
</table>
You need to also override the .tdSignalName colour declaration when the parent is hovered...
.tblSignal:hover .tdSignalName {
color:#FFFFFF;
}
Example...
.tblSignal {
border-style: solid;
}
.tblSignal:hover {
background-color: #0072c6;
color: #FFFFFF !important;
font-size: initial;
}
.tdSignalName {
font-weight: bold;
height: 30px;
font-size: 16px;
color: #0072c6;
}
.tblSignal:hover .tdSignalName {
color: #FFFFFF;
}
.tdSigButton {
text-align: center;
vertical-align: middle;
}
<table class="tblSignal" width="500px">
<tr>
<td class="tdSignalName" width="400px">
<div>Title</div>
</td>
<td rowspan="2" class="tdSigButton" width="100px">
<div id="divButton">
<button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
</div>
</td>
</tr>
<tr>
<td class="tdSignalDescription" width="400px">
<!-- _#=ctx.RenderBody(ctx)=#_ -->
<div><i>SignalDescription </i></div>
</td>
</tr>
</table>