I have created a Rails 4 sample app. I added the twitter-bootstrap-rails gem and used the installer to set up all the files: rails generate bootstrap:install less. I then created a scaffold and migrated the database and the bootstrap.css showed up like it should of. I then created a model/view/controller by hand with no scaffolding and the bootstrap css is not being used on it. Here is my view:
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td>Jason</td>
<td>John</td>
</tr>
<tbody>
</tbody>
</table>
I should have a striped table, but it is not working. Any ideas? Thanks.
IS it a copy paste error or is it your code?
notice that the row is not in the tbody and you only have one row put more then one to see if it is striped
Check in browser if your bootstrap classes are coming you can do this by searching for any bootstrap class in complied css . if it is not there check in application css file in assets folder if bootstrap is included or not ...
also correct your markup ...
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jason</td>
<td>John</td>
</tr>
</tbody>
</table>
Related
I've googled a bit to find the solution for transforming a multi-cell table into one cell table, using css (media) DYNAMICALLY!. I found a solution which is not good, because it's mixing results.
This is what I am trying to do...
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
RESULT:
One cell table: Jill,Smith,50,Eve,Jackson,94
<table style="width:100%">
<tr>
<td>Jill
Smith
50
Eve
Jackson
94</td>
</tr>
</table>
If the above is what you are trying to do, then you can't. CSS can not alter your HTML code this way.
<table style="width:200px">
<tr style="width:100px; position:absolute">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr style="width:100px; left:100px; position:absolute">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now this may LOOK like it is one cell, since the two rows are inline thanks to the absolute positioning (display:inline-block doesn't work). I made it simple. You can use percentages, to make it somewhat more flexible, but I really DO NOT RECOMMEND you to go this way.
I think your issue, whatever it may be, should be solved differently, then by merging cells.
How do I import only tables from the Bootstrap framework?
What I want to do: I have found a couple of table examples from Bootstrap that I really like which I would like to import into my project.
The issue: When importing Bootstrap, in addition to tables, there are changes to other tags such as h1, h2, title and html.
What I tried: I got a minimized/customized Bootstrap that supposedly has only tables, but there are still changes to h1, h2, etc.
normaly you should use the whole bootstrap package. There are great classes inside to make your whole page responsive.
If you only love the stilling of the tables maybe this snippet helps you:
https://gist.github.com/luisciphere/3c2d1710d90372784b072ebbcaf7bde4
With bootstrap3 you were able to customize the package and just choose tables: https://getbootstrap.com/docs/3.4/customize/
With bootstrap4 this option is gone. So I you basically have two choices:
download the full package as unminified version and delete everything you don't need
download the bootstrap sources (SASS) and only compile the table stuff
With bootstrap 4, you will need to create a custom sass file and import the following bootstrap source files:
#import 'plugins/bootstrap/scss/_mixins';
#import 'plugins/bootstrap/scss/_tables';
This should enable you to make use of Twitter's table only.
For example:
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Note: you may still have conflicts, but this all depends on how your CSS is structured.
I have the following table in my Rails app:
<table class='table table-bordered table-hover table-striped'>
<thead>
<tr>
<th>ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class='danger'>
<td><%= order.id %></td>
<td><%= order.status.name %></td>
</tr>
</tbody>
</table>
And the row with class 'danger' doesn't change the color. However, if I use the class 'success' it changes correctly.
I am using the twitter-bootstrap-rails gem.
twitter-bootstrap gem is currently using bootstrap v 2.3.2.
And as per the Bootstrap version 2.3.2 Documentation For Tables following are the available row classes:
Optional row classes
Use contextual classes to color table rows.
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
Which is why .success worked but NOT .danger.
I suppose you are looking for .error class.
it seems to be a know bug with tables.
Looks like this is a know bug in v3.0.3 and will be fixed in v3.1.0
refer this bug error page and this stack question
go through the https://getbootstrap.com/docs/4.3/content/tables/#contextual-classes here they specified all row and cell classes, you should modify your
<table class='table table-bordered table-hover table-striped'>
<thead>
<tr>
<th>ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class='table-danger'>//Modified line
<td><%= order.id %></td>
<td><%= order.status.name %></td>
</tr>
</tbody>
Maybe you're using an old version for the Bootstrap gem, by the way the default gem has not been updated to the version 3 of Bootstrap, try using this resource
https://github.com/jasontorres/bootstrap-on-rails
As #Kirti said the correct class for the Bootstrap 2 version must be .error instead of .danger watch the official documentation:
http://getbootstrap.com/2.3.2/base-css.html#tables
I'm trying to customize my bootstrap table. If the table height is larger than a certain height I want the <tbody> to scroll without scrolling the rest of the table. I have tried pretty much everything I can think of but the table wont even change sizes.
Does anyone know what classes I need to modify to fix this? Here's the elements I use in my table:
<div class="table-responsive">
<table class="table table-condensed">
<colgroup>
<col class="col-xs-1"/>
<col class="col-xs-1"/>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And here's a jsFiddle.
I ran into a similar problem with Bootstrap 2.3.2. I had to modify my table some, but a pretty good website I found with a complete css solution is here:
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html
I basically took the scrollableArea and scrollableContainer css parts on this site, changed a couple class names to match with what I already had, and used this instead of bootstrap. Maybe this can help, maybe not, but definitely a good alternative.
I'd like to have a normal table to look like RadGrids, is there an easy way I can use the RadGrid styles (keeping theming in mind)?
Using a tool like Firebug, you can inspect the table generated by RadGrid.
The example shown on this page gives the following results:
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
Adding the classes stated here to your own table should copy the style from the rad grid.
I have been playing with this, and it seems you need to wrap the table in div(s) with certain styles - maybe due to themes? Maybe I'm still missing something, but this is the only way I could get it to work.
<div class="RadGrid RadGrid_Sunset">
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
</div>