How can I add some css classes to tables made in froala editor? I need it because I use some bootstrap classes on tables and I want to add them to tables from the editor.
I need to add this: class="table table-striped table-hover responsive"
Thanks for your help.
EDIT: http://i.imgur.com/Ie0SQ0N.png
You'll see the difference in the code:
1) This is what I get now: <table>
2) And this is what I need:
<table class="table table-striped table-hover responsive">
I just realized that I can use function str_replace before saving to the database. I'll use this solution:
function repairTables($text){
return str_replace('<table width="100%">', '<table class="table table-striped table-hover responsive">', $text);
}
With Jquery you can also add the classes like this:
$('div#froala-editor table').addClass('table table-bordered');
If you want to add it on insertion of the table, it's possible to override the default Froala behaviour:
$.FroalaEditor.RegisterCommand('tableInsert', {
callback: function (cmd, rows, cols) {
this.table.insert(rows, cols);
this.popups.hide('table.insert');
$('div#froala-editor table').addClass('table table-bordered');
}
});
Related
i have the following table component and i am using angulardart 0.11 and dart 1.4
#Component(
selector: 'table-component',
publishAs: 'ctrl',
template: '''<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th ng-repeat="col in ctrl.ItemsSource.ColumnDefs">{{col.displayName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.ItemsSource.Items">
<td ng-repeat="col in ctrl.ItemsSource.ColumnDefs">
{{item.properties[col.name].value}}
</td>
</tr>
</tbody>
</table>'''
)
class TableComponent {
Scope scope;
ItemsCollection ItemsSource;
TableComponent(this.scope) {
var columnDefs =[new ColumnDef(name:"id",displayName:"ID",isPrimaryKey:true),
new ColumnDef(name:"firstname",displayName:"First Name"),
new ColumnDef(name:"lastname",displayName:"Last Name"),
new ColumnDef(name:"language",displayName:"Language")];
var items = [new DynamicItem({'id':new DynamicProperty<int>('id',0),
'firstname':new DynamicProperty<String>('firstname','Some'),
'lastname':new DynamicProperty<String>('lastname','One'),
'language':new DynamicProperty<String>('language','English')}),
new DynamicItem({'id':new DynamicProperty<int>('id',1),
'firstname':new DynamicProperty<String>('firstname','Another'),
'lastname':new DynamicProperty<String>('lastname','One'),
'language':new DynamicProperty<String>('language','Italian')})];
this.ItemsSource = new ItemsCollection(columnDefs,items);
}
}
the template has some bootstrap css classes applied, but when it get rendered the css doesnt get applied in the component and here is what i get
the first table is from the component and the second is an html table and both have same css classes applied, so why doesnt the css classes get applied to my component?
When you have added the Bootstrap CSS to the page it won't work. The Angular.dart components by default create a shadowDOM around your components content. Bootstrap doesn't support shadowDOM and the selectors won't reach into the shadowDOM.
You can either set the attribute useShadowDom: false (like selector, publishedAs, ...) which creates components without shadowDOM
or you can add the Bootstrap CSS to the component using the attribute cssUrl which makes them scoped styles. You need to add this to every component. The browser should recognize it's the same URL every time and fetch the file only once though.
I am working on a Rails 3.2.11 app using angular 1.0.5.
Currently, a user will select a Cycle from a dropdown, and that will return a bunch of JSON from my controller using ng-resource.
Here is the method
$scope.update = function(cycleId) {
Cycle.get({action: cycleId}, function(resource) {
$scope.selectedCycle = resource;
$scope.tasks = resource.tasks;
$scope.newTask = {cycle_id: resource.cycle.id};
});
};
Here is an example of what json my controller is returning, which is 'resource' in above function: https://gist.github.com/anonymous/01ffe5a37e370661f6fb
Basically I am needing to use ng-repeat twice (one of them nested) using angulars ng-repeat, so that I can get the task_type_name in there as a header. I'm getting some weird interesting results. See the shorted code in my view below and the full thing here
<section ng-repeat="(task_type_name,task_type) in tasks ">
<h2>{{task_type_name}}</h2>
<table>
<tr>
<th>Task Name</th>
</tr>
<section id="task-edit">
<tr ng-repeat="task in task_type">
<td>
<%= link_to "{{task.name}}", '', "ng-click"=>"toggleShowHistory(task.id)" %>
</td>
</tr>
</section
</table>
So my is occuring at this part here
<section id="task-edit">
<tr ng-repeat="task in task_type">
If I try to combine that section and tr, OR change tr to ANYTHING but a tr, {{task}} no longer becomes available.
<section class="task-edit" ng-repeat="task in task_type">
{{task}} is available right here
<tr>
{{task}} is not available right here
<td>
{{task}} is not avaiable right here
</td>
</tr>
</section>
I tested the same concept on the first loop, and it seems to be fine on that loop just not the second, nested loop.
I'm assuming it has something to do with the scope. But i'm just not getting it.
Also, if you have any tips, i'm very new to angular and would love them.
I created a demo, and I am not seeing any issue. Please check your data source and make sure you plug in the tasks value of the json.
You need to change the nested section to tbody.
Demo on jsfiddle
With the help of firePath, I got this:
.//*[#id='#table-row-51535240d7037e70b9000062']/td[1]
Parot of My HTML looks like this:
<table class="table table-bordered table-striped">
<tbody>
<tr>
<tr>
<tr id="#table-row-51535240d7037e70b9000062"> #this is the id that i want to get
<td> 54 </td> #this is the td that i know
<td>
<td>
<td>Open</td>
<td/>
What i really want to do here is, by giving the td value (54), I want to be able to get the id (parse the id), any hints how can i achieve that?
Thanks in advance.
PS: sorry for my English, and for my lack of knowledge :)
First of all your HTML is invalid (because it contains nested <tr> nodes). Nokogiri may be able to parse it, but if you can you should fix it before that.
You can fetch that id by the following ruby code:
doc.at_xpath("//td[contains(text(), '54')]/..")['id']
//td[contains(text(), '54')] will grab all the <td> nodes which contain 54, /.. will go to their parents.
Document#at_xpath will fetch only the first matching item
['id'] will get the attribute of the matching node.
Using jquery
$(function(){
// (i dont know if you have id for that td or not, it will be more easy if u do have id for that td)
console.log($('table tbody tr td:first').closest('tr').attr('id')); // you can remove :first if you want to.
});
Oops, I misread your question, and one more thing, there is a problem in your tr tag.
I have the following table structure inside a view which gets displayed in the _Layout view in place of #RenderBody
<table>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
</tr>
</tbody>
</table>
In my _Layout page, I want to apply the contextMenu event to the th elements, however, being a beginner, I'm having a hard time figuring the selector for the same.
Some combinations that I've tried -
I have a reference to my table in a variable called oTable
oTable.$('tr th').contextMenu ....
oTable.$('thead tr th').contextMenu ....
$('table.tableID th').contextMenu ....
None of them are working. Any suggestions?
If you simply want to select ALL of your th elements then you don't need anything more complicated than this:
$('th').contextMenu ....
If your table has an id associated to it then the following will allow you to target just that table:
$('#yourid th')
Hi Im writing a cucumber feature to verify a table using capybara finder(not tableish). I followed dennisreimann tutorial and it works fine when there is no td colspan. It thrown IndexError when td has colspan. Has anyone managed to overcome this problem?I guess colspan breaks the 2d array structure that is passed into the diff! function. Any suggestion or hint would be much appreciated. Thanks
Example of table:
<table id="mytable">
<tbody>
<tr>
<th>header</th>
<td colspan="5">Value1</td>
...
</tr>
</tbody>
</table>
Code example from tutorial:
rows = find("table#mytable").all('tr')
table = rows.map { |r| r.all('th,td').map { |c| c.text.strip } }
expected_table.diff!(table)
Ok So I found the confirmation that it's not working here. The assumption is the number of cell in each row is the same hence colspan breaks it