I m using a table in angularJS with ng-class for borders (Few borders appear, based on div). Code for template is below:
<table style="border: 1px solid #ddd;" class="table container-margin table-fixed">
<tr>
<th style="border: 1px solid #ddd;">heading1</th>
<th style="border: 1px solid #ddd;" ng-repeat="option in options" class="hand-cursor">{{option.text}}</th>
</tr>
<tr ng-repeat="row in array">
<td ng-repeat="col in row track by $index" ng-click="(col.clickable === false) ? null : edit(col.impact, col.option, col.pers)"
ng-class="{'forTableHeading': (col.type==='tableHeading'), 'perspectiveTitle': (col.type==='perspectiveTitle'), 'shortOrLongTermValue': (col.type==='shortTermValue' || (col.type==='longTermValue')),
'fieldImpact': (!col.type&& col.field==='impact'), 'fieldDop':(!col.type && col.field==='dop'), 'fieldBlank':(!col.type && col.field==='blank')}">
<div style="white-space: pre;" ng-if="col.type==='shortTermValue'" ng-style="getBorderStyle(col.shortTermEffect)">{{col.shortTermEffect}}</div>
<div style="white-space: pre;" ng-if="col.type==='longTermValue' ng-style="getBorderStyle(col.shortTermEffect)">{{col.longTermEffect}}</div>
<div style="display:inline-block;font-style:italic;text-align:center;color:red;" ng-if="col.type==='tableHeading' " class="small">{{col.text}}</div>
<div style="word-wrap: break-word;white-space: pre-wrap !important;" ng-if="col.type==='perspectiveTitle'"><b>{{col.title}}***{{description}}***</b></div>
<div style="word-wrap: break-word;white-space: pre-wrap !important;" ng-if="!col.type&& col.field==='impact'">{{col.text}}</div>
<div style="word-wrap: break-word;white-space: pre-wrap !important;" ng-if="!col.type && col.field==='dop'">{{col.text}}</div>
<div style="white-space: pre !important;" ng-if="!col.type && col.field==='blank'"></div>
</td>
</tr>
</table>
I have my CSS classes in own file. When I use the same table using,
<div ng-include="'aaa.tpl.html'"></div>
However, when I use this table along with ng-include, all table borders are seen and ng-class is not working. Can someone say what am I doing wrong here?
Related
I'm using bootstrap and I have adapted the accordion to a table, it works perfectly except the icon when "toggled open" display a border-bottom which I would like to remove. It is probably something inherit somewhere but I cannot figure it out.
Problem:
When collapsed it works fine:
Here is the table code:
<!-- language: lang-css -->
.accordion-line-button {
padding: 0;
width: auto;
border: none;
}
<!-- language: lang-html -->
<table class="accordion" id="accordionExample">
<tr class="accordion-item">
<td class="accordion-header" id="heading1">
<button class="accordion-button accordion-line-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"></button>
</td>
<td class="accord">
Question
</td>
</tr>
<tr>
<td colspan="2" class="accordion-collapse collapse" id="collapse1" aria-labelledby="heading1" data-bs-parent="#accordionExample">
<div class="accordion-body">Answer
</div>
</td>
</tr>
</table>
Here a link to the bin. I'm using a template which I've included and it is the problem, there is something that is inheriting that I cannot figure it out.
Thanks for the help
It's not a border property but rather box-shadow that is set on the button. Kindly use below code.
.accordion-line-button {
box-shadow: none !important;
}
I use the latest twitter bootstrap and I have some troubles with pre tag inside table cells, if line is too long it should create horizontal scroll but it won't happen.
http://jsfiddle.net/52VtD/6958/ example without pre
<div class="row">
<div class="container">
<div class="col-md-3" style="border: 1px solid red;">
this is col-md-3? yes :)
<table class="table">
<thead>
<tr><th>author</th><th>content</th></tr>
</thead>
<tbody>
<tr><td>somebody</td><td></td></tr>
</tbody>
</table>
</div>
<div class="col-md-9" style="border: 1px solid black;">test</div>
</div>
</div>
http://jsfiddle.net/52VtD/6959/ example with pre
<div class="row">
<div class="container">
<div class="col-md-3" style="border: 1px solid red;">
this is col-md-3? no :(
<table class="table">
<thead>
<tr><th>author</th><th>content</th></tr>
</thead>
<tbody>
<tr><td>somebody</td><td>why I cannot wrap it?<br/><pre><?php<br/>class A<br/>{<br/> function foo()<br/> {<br/> if (isset($this)) {<br/> echo '$this is defined (';<br/> echo get_class($this);<br/> echo ")\n";<br/> } else {<br/> echo "\$this is not defined.\n";<br/> }<br/> }<br/>}<br/><br/>class B<br/>{<br/> function bar()<br/> {<br/> // Note: the next line will issue a warning if E_STRICT is enabled.<br/> A::foo();<br/> }<br/>}<br/><br/>$a = new A();<br/>$a->foo();<br/><br/>// Note: the next line will issue a warning if E_STRICT is enabled.<br/>A::foo();<br/>$b = new B();<br/>$b->bar();<br/><br/>// Note: the next line will issue a warning if E_STRICT is enabled.<br/>B::bar();<br/>?></pre></td></tr>
</tbody>
</table>
</div>
<div class="col-md-9" style="border: 1px solid black;">test</div>
</div>
</div>
I have no idea what I can do, I tried many times with css properites.
try to use:
<pre><code> your example code here </code></pre>
If have the following HTML (there could be more TDs), can I select ALL <div>s with style divE in all TDs before the one with id="current"?
I think i can do it with jQuery, but can this be done with pure CSS?
HTML
<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td id="current">
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
</tr>
</table>
There's no before selector, but what you can do is select all tds (that aren't #current), and then "reset" (or "undo") the styles on all the tds after #current.
td:not(#current) div.divE{
/* Styles for <td>s before "#current" */
}
td#current ~ td div.divE{ /* This means all "td div.divE" after "td#current" */
/* Reset/undo styles for all other <td>s */
}
DEMO: http://jsfiddle.net/MYhPP/2/
I am trying to override the css classes from primefaces 3.1, I was looking for a pattern for the class name to override.
I tried:
.ui-datatable table {}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer {}
.ui-datatable .ui-datatable-header {}
.ui-datatable th,.ui-datatable tfoot td {}
.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{}
But only the rows content got centralized but was not able to change header bgcolor and other stuff.
Then I realized that may be the classes I overwrote might not have been used.
Surprisingly, I found the generated source code are not using these as class...
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
<table role="grid"><thead><tr role="row">
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af894" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Model</span></span>
</div>
</th>
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af942" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Color</span></span>
</div>
</th></tr></thead><tfoot></tfoot>
<tbody id="form:j_id1915418705_722af8cd_data" class="ui-datatable-data ui-widget-content">
<tr data-ri="0" data-rk="BMW" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">BMW</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Black</span>
</div>
</td>
</tr>
<tr data-ri="1" data-rk="Audi" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Audi</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">White</span>
</div>
</td>
</tr>
</tbody>
</table><input type="hidden" id="form:j_id1915418705_722af8cd_selection" name="form:j_id1915418705_722af8cd_selection" value="" autocomplete="off" />
Can somebody tell me how to I be able to change table headers, borders, alternate rows color...
Can somebody provide me a pattern for How to know what class in PF to override looking at the generted source code.
Thanks in advance.
First of the classes are included here in the markup:
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
The other child classes automatically apply themselves to the other elements.
Your custom CSS may actually be overridden by the Primefaces CSS styles if you are including these styles in a seperate CSS file linked from head.
To make sure that your custom CSS applies itself to the page try adding the custom CSS inline to the page body and see if it applies then.
I am trying to get a very thin border for my table (table rendered from a GridView). I have set the BorderWidth="0" for the GridView and then through CSS I am creating the border for the rows that I need. Here I don't want any border around the grid header. HTML code for grid renders to table and TRs. So I ahave the following css:
tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
This makes the grid look like what I need witn no border in the header. But, the width of the border on other rows is too thick in IE6 but in FF it looks great. Is there a way to make the border extra thin in IE?
Here is the working HTML code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<style type="text/css">
tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
</style
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<div>
<br />
<div>
<table cellspacing="0" rules="all" border="0" id="GridView1" style="border-width:0px;border-collapse:collapse;">
<tr>
<th align="left" colspan="5" style="font-weight:normal;"><a id="GridView1_ctl08_{0}_HeaderLink1" href="javascript: SelectAll(true)">Select All</a><span> | </span><a id="GridView1_ctl08_{0}_HeaderLink2" href="javascript: SelectAll(false)">Clear All</a></th>
</tr><tr class="top row">
<td><input id="GridView1_ctl02_CheckBoxButton" type="checkbox" name="GridView1$ctl02$CheckBoxButton" /></td><td>10-000000-001</td><td>The Iliad and The Odyssey</td><td>12.95</td><td>Mike Loyid</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl03_CheckBoxButton" type="checkbox" name="GridView1$ctl03$CheckBoxButton" /></td><td>10-000000-999</td><td>Anthology of World Literature</td><td>24.95</td><td>Jessica Freclih</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl04_CheckBoxButton" type="checkbox" name="GridView1$ctl04$CheckBoxButton" /></td><td>11-000000-002</td><td>Computer Dictionary</td><td>24.95</td><td>Roger Butt</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl05_CheckBoxButton" type="checkbox" name="GridView1$ctl05$CheckBoxButton" /></td><td>11-000000-003</td><td>Cooking on a Budget</td><td>23.95</td><td>Leena Reebeca</td>
</tr><tr class="top bottom row">
<td><input id="GridView1_ctl06_CheckBoxButton" type="checkbox" name="GridView1$ctl06$CheckBoxButton" /></td><td>11-000000-004</td><td>Great Works of Art</td><td>29.95</td><td>Luke Killey</td>
</tr>
</table>
</div>
<input type="submit" name="Button1" value="Button" id="Button1" /></div>
<span id="Results"></span>
</form>
</body>
</html>
Use "1px" instead of "thin".