I have a requirement to make a app that has a view. In that view I need to check a condition and if it is true, then need to color a table row appropriately. The easiest way to do this is just to use different header in the view. But how to do it if I want to keep all my styling information in CSS?
If it's just a row you want to colour then you can do it in the view, no need to mess around with headers:
<tr class="<%= "blue" if some_condition %>">
<td>Your text</td>
</tr>
Or:
<% if some_condition %>
<tr class="blue">
<% else %>
<tr class="red">
<% end %>
<td>Your text</td>
</tr>
application_helper.rb
def my_color_for(condition)
if condition
'white'
else
'blue'
end
end
view.haml
- #array.each do |a|
%tr{class: my_color_for(a.value)}
Related
I know how can i use if else statement or for loop using .ejs file but i need to change code in .hbs file and i am new with this.Please help me with below example in which i have used .ejs file i need to convert it in .hbs file but don't know how to change if else and for loop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fetch using MySQL and Node.js</title>
</head>
<body>
<div class="table-data">
<h2>Display Data using Node.js & MySQL</h2>
<table border="1">
<tr>
<th>S.N</th>
<th>Full Name</th>
<th>Email Address</th>
<th>City</th>
<th>Country</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<%
if(userData.length!=0){
var i=1;
userData.forEach(function(data){
%>
<tr>
<td><%=i; %></td>
<td><%=data.fullName %></td>
<td><%=data.emailAddress %></td>
<td><%=data.city %></td>
<td><%=data.country %></td>
<td>Edit</td>
<td>Delete</td>
</tr>
<% i++; }) %>
<% } else{ %>
<tr>
<td colspan="7">No Data Found</td>
</tr>
<% } %>
</table>
</div>
</body>
</html>
I have used below code but it is not working as i am new i need your guidence
#76484 i have used this ``` {{#if userData.length != 0 }}
{{var i =1;}}
{{userData.forEach(function(data))}}
<tr>
<td>{{=i;}}</td>
<td>{{= data.fullName}}</td>
<td>{{= data.emailAddress}}</td>
<td>{{= data.city}}</td>
<td>{{= data.country}}</td>
<td>{{= data.Dimension_4_Score}}</td>
<td>{{= data.Total_Score_Persentage}}</td>
</tr>
{{i++; })}}
{{else{} }
<tr>
<td colspan="7">No Data Found</td>
</tr>
{{}}}
</table>
</div>
</body> ``` but it is not working
The primary difference between your embedded JS example and Handlebars is that Handlebars does not execute arbitrary JavaScript, like your .forEach loop. Instead, Handlebars provides helpers to allow you to do things like conditionals and iteration.
First, we will tackle your condition, if (userData.length != 0). Handlebars has a #if helper which we could use to check if userData has a truth (greater than 0) length. The result would be:
{{#if userData.length}}
{{! TODO: output each user data}}
{{else}}
<tr>
<td colspan="7">No Data Found</td>
</tr>
{{/if}}
Secondly, Handlebars has an #each helper which is used for looping over collections as you are doing with your userData.forEach(function(data) { /*...*/ } code. For your purposes, the syntax would be:
{{#each userData}}
<tr>
<td>{{ #index }}</td>
<td>{{ fullName }}</td>
<td>{{ emailAddress }}</td>
<td>{{ city }}</td>
<td>{{ country }}</td>
<td>Edit</td>
<td>Delete</td>
</tr>
{{/each}}
Notice how we are evaluating the properties of each object in our userData array. There is no =. We just wrap the property name in double-handlebars, like {{ fullName }}. Handlebars handles the execution context within the #each so that we are always referring to the current iteration of our array.
Also notice the {{ #index }}. This is a special variable provided by Handlebars to give us the current iteration index within our #each loop. It is zero-index, so our output will be slightly different from your ejs example because you initialized your counter at 1.
Unfortunately, if we want our indexes to be one-based, we will have to write a custom helper to this. Our helper would just need to take a number, #index, and increment it by 1. It would look like:
Handlebars.registerHelper('increment', function (num) {
return num + 1;
});
And we would update our template to make use of it:
{{increment #index }}
I have created a fiddle with the final example for your reference.
Hi I want to make a row in a table inactive. Even if it is easy to hack by myself and add a custom css with the same colour of the inactive elements of my current theme I think it can be handles by bootstrap itself.
Any suggestions?
Bootstrap has a few elements you might find helpful:
Use contextual classes to change row colors:
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
http://getbootstrap.com/css/#tables-contextual-classes
Use contextual colors to change the color of text:
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
http://getbootstrap.com/css/#helper-classes-colors
The disabled element is primary for form elements and buttons. Check that out here,
I've created a custom class table-inactive:
.table-inactive td {
background-color: #ececec;
color: #b9b9b9;
}
Does the table row contain any inputs? If so, add the disabled HTML5 attribute to the input and perhaps make the text in that row greyed out to show it is inactive? Just an idea..
I.E.
<tr>
<td style="color:grey;">Sample Text</td>
<td><input type="text" disabled/></td>
</tr>
I have worked with Twitter Bootstrap a bit and did not see any of these features though.
Bootstrap 4 requires you to add "table-" to the class.
<tr class="table-danger">...</tr>
https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes
I'm very new to smarty and I'm trying to figure out a way to hide questions under each section title in a long form. I would need to add some id or class to the section name and some div to wrap to the questions under this specific section title so I can target them in css or js, but I'm breaking my head to find a way to do that with smarty.
Here is my code:
{if !empty($questionList)}
{foreach from=$questionList key='section' item='questions'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3" class="section_label">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
{foreach from=$questions item='question' name='question'}
<tr class="{cycle values='ow_alt1,ow_alt2'} {if $smarty.foreach.question.last}ow_tr_last{/if}">
<td class="ow_label">
{label name=$question.name}
</td>
<td class="ow_value">
{input name=$question.name}
<div style="height:1px;"></div>
{error name=$question.name}
</td>
</tr>
{/foreach}
<tr class="ow_tr_delimiter"><td></td></tr>
{/foreach}
{/if}
Any help would be awesome :)
You can try to use the current iteration of the first foreach to create unique identifiers/classes:
i.e.
{foreach from=$questionList key='section' item='questions' name='loop'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3" class="section_label" id="question{$smarty.foreach.loop.iteration}">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
<tr class="question{$smarty.foreach.loop.iteration}_child {cycle values='ow_alt1,ow_alt2'} {if $smarty.foreach.loop.last}ow_tr_last{/if}">
So you willl end up with something like this:
<tr><th class="section_label" id="question1"></th></tr>
<tr class="question1_child">....</tr>
<tr class="question1_child">....</tr>
<tr class="question1_child">....</tr>
<tr><th class="section_label" id="question2"></th></tr>
<tr class="question2_child">....</tr>
<tr class="question2_child">....</tr>
<tr class="question2_child">....</tr>
and so on. That would be quite easy to target with css or javascript, i.e. hiding all .question1_child or showing all #id_name+'_child' when a certain .section_label is pressed
How can I use Chameleon or Zope Page Templates to easily create CSS zebra striping? I want to add odd and even classes to each row in a table, but using a condition with repeat/name/odd or repeat/name/even looks rather verbose even with a conditional expression:
<table>
<tr tal:repeat="row rows"
tal:attributes="class python:repeat['row'].odd and 'odd' or 'even'">
<td tal:repeat="col row" tal:content="col">column text text</td>
</tr>
</table>
This gets especially tedious if you have multiple classes to calculate.
The Zope Page Templates implementation for the repeat variable has an under-documented extra parameter, parity, than gives you the string 'odd' or 'even', alternating between iterations:
<table>
<tr tal:repeat="row rows"
tal:attributes="class repeat/row/parity">
<td tal:repeat="col row" tal:content="col">column text text</td>
</tr>
</table>
This is also much easier to interpolate into a string expression:
tal:attributes="class string:striped ${row/class} ${repeat/row/parity}"
This works in Chameleon as well.
Using a data table from http://datatables.net/ , How can i stop it from overflowing on the page?
EDIT:
<script type="text/javascript">
$(document).ready(function() {
$('#comment').dataTable( {
"oLanguage": {
"sInfo": "",
"sInfoEmpty": "",
"sInfoFiltered": ""
},
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"bLengthChange": false,
"aaSorting": [[3, 'desc']],
"aoColumns": [
{ "bSortable": false },
null,
null,
{ "asSorting": [ "desc" ] },
null,
{ "bSortable": false }
] } );
});
</script>
<table id="comment">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Comment</th>
<th>Created</th>
<th>Attachments</th>
<th><center>Delete?</center></th>
</tr>
</thead>
<tbody>
<% #company.comments.each do |comment| %>
<tr>
<td>
<% if comment.user.avatar.blank? %>
<%= image_tag("default_user.png", :height => "50", :width => "50") %>
<% else %>
<%= image_tag(comment.user.avatar_url, :height => "50", :width => "50") %>
<% end %>
</td>
<% if comment.user.name.nil? %>
<td><%= comment.user.email %></td>
<% else %>
<td><%= comment.user.name %></td>
<% end %>
<td><%=raw comment.body %></td>
<td><%= comment.created_at.to_s(:db) %></td>
<% if comment.file.blank? %>
<td></td>
<% else %>
<td><%= link_to comment.file_identifier, comment.file_url %></td>
<% end %>
<td><center><%= link_to image_tag("delete.png", :alt => "Delete", :height => "15px"), [comment.company, comment], :confirm => 'Are you sure?', :method => :delete %></center></td>
</tr>
<% end %>
</tbody>
</table>
The DataTables function won't help with trouble-shooting. It's a CSS issue. And also a content issue. First the content:
Sizing on tables is "fuzzy"; the table will do its best to size to your suggestions, and will exactly match your suggestions when it can. When you have a huge long string, though (I believe I'm seeing a whole long series of A's and D's, right?) it has no choice. It will make the column as wide as it needs to be to fit the content. The other columns will then be as narrow as they can be and still accomodate your content.
The solution? CSS. It boils down to overflow: hidden. In your stylesheet, set your TD elements to use overflow: hidden and the string will get "chopped off". This isn't always visually pleasing, but sometimes web development is about compromise.
One of those compromises is to also set text-overflow: ellipsis. Any text that can't fit into the cell will be truncated and the ellipsis symbol (three tightly-kerned dots; it's a single character, not three actual dots) will be inserted at the end where it gets cut off.
But then how do you see the data in its entirety? Tricky one. I've just been running a script in the fnRowCallback callback that sets the title of the cell to be the same as its contents. Then on mouseover, a tooltip shows you the content. I'm sure there are better ways.
In the end, what you need to ask is: is a super-long string like that even realistic? What's the expected content?
http://datatables.net/styling/ids_classes has a list of the classes/ids applied - can't you just set a width on the wrapper element?
Apply custom width, e.g.:
.dataTables_wrapper {width:60%}