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
Related
I am trying to create a table in reactjs using bootstrap. Everything seems fine except:
As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there a way to do it?
Here is the code:
<Table striped hover responsive >
<thead>
<tr>
<th>Rank</th>
<th>Logo</th>
<th>Name</th>
<th ></th>
<th>Wins</th>
<th>Loss</th>
<th>Draws</th>
<th>Games</th>
<th>GF</th>
<th>GA</th>
</tr>
</thead>
<tbody>
{team && team.map((team, key) =>{
return <tr key={key}>
<td>{key + 1}</td>
<td><img src={team.team.logos[0].href} alt='team logo' width={40} height={40}/></td>
<td >{team.team.name}</td>
<td>{team.stats[0].value}</td>
<td>{team.stats[1].value}</td>
<td>{team.stats[2].value}</td>
<td>{team.stats[3].value}</td>
<td>{team.stats[4].value}</td>
<td>{team.stats[5].value}</td>
</tr>
})}
</tbody>
</Table>
I cannot see the code, but there seems to be some margin for the td. But you will still have issues with it lining up due to the number of words in td to the data listed. A solution would be styling each td by itself until you get it how you'd like.
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
I’m using Bootstrap Table http://bootstrap-table.wenzhixin.net.cn/
All rows in the table are linked with data-href=.
All links work correctly after the table is loaded, but when I re-sort the table (i.e. click on "URL" column header), the links no longer work.
Any ideas how to fix it?
Here is a test code:
<table class="table" id="lst_art_adm"
data-toggle="table"
data-striped="true"
data-search="true"
data-sort-name="site"
data-sort-order="asc"
data-mobile-responsive="true"
mobileResponsive="true">
<thead>
<tr>
<th data-field="site" data-sortable="true">Site</th>
<th data-field="url" data-sortable="true">URL</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="mrow" data-href="https://google.com">
<td id="td-id-1" data-sortable="true">Google</td>
<td>google.com</td>
</tr>
<tr id="tr-id-2" class="mrow" data-href="https://yahoo.com">
<td id="td-id-2" data-sortable="true">Yahoo</td>
<td>yahoo.com</td>
</tr>
</tbody>
</table>
$(function(){
$(".mrow").on("click", function (e) {
window.location = $(this).data("href");
});
});
And the jsfiddle
I found a solution myself :)
The table must be included in a div element, i.e. class="mytable".
Then the jquery should be changed like this:
$(function(){
$(".mytable").on("click", ".table tbody tr", function()
window.location = $(this).data("href");
});
});
Then the function will found the row after re-sorting.
Is it possible in AngularJS to change the style of row when the available stocks is equals to 10? or is there any way to do this?.. how to do that?
Here's my code..
<table id='table12'>
<thead id='top'>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Stock In</th>
<th>Available Stocks</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter">
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_id}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_name}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.price}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.stock_in}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.available_stocks}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.description}}</td>
</tr>
</tbody>
</table>
You can do it with ng-class by passing an object with a test against inventory.price value:
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter" ng-class="{'red' : inventory.price <= 10}">
...
</tr>
you can change style of row with anulgarJS via html markup and via js code:
markup -
1.1. ng-style: <div data-ng-style="{background: price > 50 ? 'red' : 'green'}"></div>
1.2. ng-class: <div data-ng-class="{'some-class-name': price > 50, 'other-class-name': price <= 50}></div>
js code -
2.1. directive link function:
link: function (scope, element, attrs, ctrl){
element.find('tr').css(...); // like as jquery...
}
2.2. controller:
angular.module('myModule').controller('myCtrl', function($element, $scope){ $element.find('tr').css(...); // like as jquery} })
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } "></tr>
You can use above syntax to highlight table rows
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