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.
Related
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>
)
Here's what I want to do (simplified example):
<table>
<tr>
<td style = "border:2px solid green">stuff1 </td>
<td style = "border:2px solid green">stuff2 </td>
<td style = "border:2px solid green">stuff3 </td>
</tr>
<tr>
<td style = "border:1px solid red">stuff4 </td>
<td style = "border:1px solid red">stuff5 </td>
<td style = "border:1px solid red">stuff6</td>
This gives precisely the right result, one row bordered in green, the next in red, but I'd like to get rid of all those "style" statements.
I tried several ways to cascade css for this, but couldn't figure out one that would work. The closest I got was:
<head>
<style>
.test {
font-size: 15px;
}
.test td {
border: 2px solid green
}
.test td a{
border: 1px solid red
}
</style>
</head>
<body>
<table class = "test">
<tr>
<td>stuff1 </td>
<td>stuff2 </td>
<td>stuff3 </td>
</tr>
<tr>
<td><a>stuff4</a> </td>
<td><a>stuff5</a> </td>
<td><a>stuff6</a> </td>
</tr>
</table>
</body>
This almost worked. The top row was bordered in green. But the bottom row was bordered in both red and green.
Could someone explain to me how to set up my css so that I can get the result I want.
**************Well, I found a solution using .test th { for the second color. But this does not solve anything if I want a third color.
You can just add a class to the second set of tds. See below for the code or check the Codepen for a working example.
<html>
<head>
<style>
.test {
font-size: 15px;
}
td {
border: 2px solid green;
}
td.red {
border: 1px solid red;
}
</style>
</head>
<body>
<table class="test">
<tr>
<td>stuff1</td>
<td>stuff2</td>
<td>stuff3</td>
</tr>
<tr>
<td class="red">stuff4</td>
<td class="red">stuff5</td>
<td class="red">stuff6</td>
</tr>
</table>
</body>
</html>
Codepen: https://codepen.io/anon/pen/NzygNV
you can do like this as well, Like keeping css classes in a separate css file and then just adding a link tag pointing towards the css file in the html where you have your table.Refer link below for same.
.tbl {
font-size: 15px;
}
td {
border: 2px solid green;
}
td.red {
border:1px solid red;
}
<html>
<head>
<!-- you can ad link to css here -->
</head>
<body>
<table class="tbl">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td class="red">data1</td>
<td class="red">data2</td>
<td class="red">data3</td>
</tr>
</table>
</body>
</html>
https://codepen.io/anon/pen/PaQJNK
I am using Print.css and want to print a table data with styles on button click.
I have included <link rel="stylesheet" type="text/css" href="{{asset('print.css')}}" media="print"> in a page from where I wanna print table data with style. But styles are not applying on print page.
print.css
#media print{
body{
background: #000 !important;
color: #fff !important;
}
.table {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 20px !important;
}
table {
background-color: transparent !important;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
}
Table To Print with Style
<div class="panel-body" id="toPrint">
<table class="table table-striped">
<thead>
<tr>
<th>Roll No</th>
<th>Student Name</th>
<th>Father Name</th>
<th>Total Marks</th>
<th>Obtained Marks</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
#foreach($search as $student)
<tr>
<td>{!! $student->rollno !!}</td>
<td>{!! $student->name !!}</td>
<td>{!! $student->fname !!}</td>
<td>{!! $student->totalmarks !!}</td>
<td>{!! $student->obtainedmarks !!}</td>
<td>{!! $student->percentage !!}</td>
<div class="alert alert-success">
×
<strong>Success!</strong> You have searched for {{ $student->rollno }}
</div>
</tr>
#endforeach
</tbody>
</table>
<a class="btn btn-default" href="{{ url('/results') }}">Search New Result</a>
Print
</div>
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>
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".