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>
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 am building a template for a site and it needs 4 columns. In desktop mode, or anything above tablet width, it should display all 4 columns though the outer 2 are only for padding. When in mobile mode, the outer 2 are set to disappear, but I need the middle two to reverse their order. I tried setting the 'col-' setting to reverse when under 480px, but it isn't working. I'd appreciate someone looking over my work.
HTML
<div id="inus1" class="fk-row row">
<div data-text="text" align="center" id="inyb3" class="fk-col order-1">
</div>
<div align="center" id="i80rh" class="fk-col order-2 order-xs-2">
<div id="ifo6l">
<div id="iq1zf" class="fk-headline">Thank you for your purchase!
</div>
<div data-text="text" id="ihleo">Order {{orderId}}
<div draggable="true" id="i6myy-2-2">
<div draggable="true" id="ii502-2-2-2">
<b data-text="text">
<span data-text="text" id="ix3j4">Thank you {{firstName}} {{lastName}}!</span>
</b>
</div>
</div>
</div>
</div>
<iframe frameborder="0" type="map" name="map" address="" zoom="1" maptype="q" id="in2gu" src="https://maps.google.com/maps?&z=1&t=q&output=embed"></iframe>
</div>
<div align="center" id="i33dp" class="fk-col order-3 order-xs-1">
<table id="orderSummaryTable" class="w-100">
<thead id="iweztk">
<tr id="ikyi1h">
<th colspan="3" id="i10uii">
<span data-text="text" id="iqvl9r">Order Summary</span>
</th>
</tr>
<tr id="ieggiv">
<th id="inwrj">
<span data-text="text" id="ipokfh">Item</span>
</th>
<th id="i259c">
<span data-text="text" id="i5gfso">Quantity</span>
</th>
</tr>
</thead>
<tbody id="items-list">
<tr>
<td class="cell cell-items-list">
</td>
</tr>
</tbody>
</table>
</div>
<div align="center" id="ijiyf" class="fk-col order-4">
</div>
</div>
CSS (just the media query)
#media (max-width: 480px){
#in2gu{
width:615px;
height:350px;
}
#i80rh{
width:100%;
}
#i33dp{
width:100%;
}
#inyb3{
display:none;
}
#ijiyf{
display:none;
}
#in2gu{
width:615px;
height:350px;
}
}
Bootstrap comes with ordering utilities. Try them by appending order-0, order1, etc. to your elements
https://getbootstrap.com/docs/4.0/utilities/flex/#order
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?
I have a table of data which dynamically producing, and I converted the html page into pdf using dom pdf.I want to add header and footer on each page. but the problem is when the data is large the footer is not stable, and also the the header and footer is not repeating on each page.
<div class="conainer-fluid">
<div class="row0">
<div class="header"><img src="<?php echo base_url()?>public/images/alhamed.jpg" style="width: 700px;"></div>
</div>
<div class="card-body">
<div class="table-responsive-sm">
<table class="table table-striped">
<thead class="thead-default">
<tr>
<th class="text-center"> # </th>
<th> Product </th>
</tr>
</thead>
<tbody>
<?php
for($j=0;$j<40;$j++)
{
?>
<tr>
<td>haii</td>
</tr>
<?php
if($i<$count)
{
$i++;
}
}
?>
</tbody>
</table>
</div>
<div class="conainer-fluid">
<div class="row1">
<div class="footer"><img src="<?php echo base_url()?>public/images/footer.jpg" style="width: 700px; margin-bottom: 150px;"></div>
css
table td{page-break-after: always;}
.header { position: fixed; }
.row1{position: fixed;background-color: lightblue;}
how can i make the header and footer repeating on each page of pdf according to the data ?
I tried to use bootstrap row and columns classes inside a for each loop and some extra spaces are displayed as unexpected.
First I used the following code and it worked well.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<div class="row">
<tr>
<td style="display: none;" >{{$gemStone->created_at}}</td>
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
<div class="col-sm-3"> free space of 3 cols </div>
<div class="col-sm-3">free space of 3 cols </div>
</td>
</tr>
</div>
#endforeach
</tbody>
</table>
above code gave a view like this image. In order to use the free space marked in the picture, I tried adding another column by creating another <td> ... </td> inside <tr> </tr> using $counter variable as below.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
<?php $count = 0 ?>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<?php $count = $count + 1 ?>
#if($count % 2)
<tr>
<div class="row">
<td style="display: none;" >{{$gemStone->created_at}}</td>
#endif
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
</div>
</td>
#if(!($count % 2))
</div>
</tr>
#endif
#endforeach
#if($count%2)
<td>extra cell when odd</td>
</div>
</tr>
#endif
Result looked like this which is unexpected. I tried changing the place of <div class='row'> and <div class = 'col-s6'>in several ways, but nothing worked. And I couldn't really find a mistake in the code as well . It would be grateful if someone can point where I go wrong while using the columns and row classes.
And I'm using jquery datatables to get the table view.
Add the bootstrap classes to your table elements, instead of adding additional div elements.
<table>
<tr class="row">
<td class="col-md-4">1</td>
<td class="col-md-4">2</td>
<td class="col-md-4">3</td>
</tr>
</table>