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;
}
Related
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?
<?php
// include Database connection file
include("connectionfile.php");
// Design initial table header
$data = '<table class="table table-bordered table-striped table-hover" id="supplierTable" style="max-width: 1000px">
<thead>
<tr>
<th>No</th>
<th>Sym</th>
<th>Name</th>
<th>Tax</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Products</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>';
$query = "SELECT * FROM suppliers";
$result=mysqli_query($con,$query);
// $row=mysqli_fetch_array($result);
if (!$result) {
exit(mysqli_error());
}
// if query results contains rows then featch those rows
if(mysqli_num_rows($result) > 0)
{
$number = 1;
while($row = mysqli_fetch_array($result))
{
$data .= '<tr>
<td align="right"> '.$number.'</td>
<td align="center">'.$row['symbol'].'</td>
<td align="center">'.$row['companyname'].'</td>
<td align="center">'.$row['taxnumber'].'</td>
<td align="center">'.$row['address'].'</td>
<td align="center"> +'.$row['phone'].'</td>
<td align="center">'.$row['email'].'</td>
<td>
<button onclick="GetSupplierProducts('.$row['id'].')" class="btn btn-success text-center">All Products</button>
</td>
<td>
<button onclick="GetSupplierDetails('.$row['id'].')" class="btn btn-warning text-center">Update</button>
</td>
<td>
<button onclick="DeleteSupplier('.$row['id'].')" class="btn btn-danger text-center">Delete</button>
</td>
</tr>';
$number++;
}
}
else
{
// records now found
$data .= '<tr><td colspan="6">Records not found!</td></tr>';
}
$data .= '</table>';
echo $data;
?>
<script>
$(document).ready(function() {
$('#supplierTable').DataTable({
bJQueryUI: true,
sPaginationType: "full_numbers"
});
});
</script>
<script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<script src="../dist/js/sb-admin-2.js"></script>
This is my code it displays the search bar and pagination at the middle. I would like them to be at the right. any ideas? Here is a picture:
I would simply love to see my search box under add a new supplier.
thanks
Adding the three scripts at the end shows the search box, entries and pagination. well, I have the button in a main page:
<div class="pull-right">
<button class="btn btn-success" data-toggle="modal" data-target="#add_new_supplier_modal">Add A New Supplier</button>
</div>
I can't import your bower components but i can give you some idea of how things should be arranged.
The basic idea is that you need to place all of your 3 components and also the table in their appropriate boxes. And this boxes are separated in groups. Start simple in a separate file - fake static data.. After you have the bare bones css+html working, then you simply place it inside php and do rendering with real dynamic data..
This is the code:
<div class="parent_div" style="margin-top: 20px;"> ///everything goes in here including the table
<!--only the 3 components in here-->
<div class="the_3_components_you_have">
<!-- the button is first component, "text-right" is a bootstrap class you need to align stuff to right. Doesn't work on the button directly so we wrap it in a div -->
<div class="text-right" style="margin-right:50px;">
<button class="btn btn-success" >Add a New Suplier</button>
</div>
<!-- Display on the same row the pagination and search component. But again text-right only works on display:block so we need position relative on the pagination element-->
<div>
<div style="position: relative; top: 23px; left: 20px; ">Show pagination Component.</div>
<div class="text-right" style="margin-right: 50px; ">Search stuff: <input style="margin: 0px;" type="text"></div>
</div>
</div>
<!-- the table separately goes in here -->
<div>
Table goes here.
</div>
</div>
Instead my styles - you can create your own classes, tweak them as you like, and instead of text, you can place the script tags you have, and they will load appropriately in that box. Chrome Developer Tools will help you. Here is a preview:
Learn about Bootstrap clases and Bootstrap positioning here.
and you can find this code as a live example here: JsBin Link
Example here: https://jsfiddle.net/vdLk2wzk/. click in the CLICK HERE button to see the situation in action. The dropdown menu should show above everything.
<div class="col-md-12">
<div class="panel-group" id="accordionGroups">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle" data-toggle="collapse" data-target="#XX">
<span class="panel-subtitle">TITLE</span>
</div>
<div id="XX" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-md-12">
<div class="table-responsi">
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<span class="btn btn-default btn-xs dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">CLICK HERE<i class="fa fa-caret-down left-padding-low1"></i></span>
<ul class="dropdown-menu">
<li>XXXXX</li>
<li>YYYYY</li>
<li>ZZZZZ</li>
<li>PPPPP</li>
</ul>
</div>
</td>
<td>BIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTE</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap applies overflow-x:hidden on .table-responsive, and once you have an overflow it will actually cut it in both direction to guarantee that the scrollbar is accessible. You could of course remove the overflow whatsoever like so:
.table-responsive {
overflow:visible !important;
}
But it will break the responsive design so with this table layout you are out of luck. On the other hand this table layout is terrible to use on mobile anyway, so I would suggest using one of the following instead: https://css-tricks.com/responsive-data-table-roundup/
Yes, Even i was having the same problem but using the jquery it got fixed, please have a look into the below snippet.
i have found this# http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/
so based on you id change accordingly its working for me.
jquery mouse enter and mouse leave, you can try like this, for me its working fine
//Function to display/hide scroll on mouseenter/mouseleave
$(‘.slds-button–icon-border-filled’).each(function() {
$(this).on(‘mouseenter’,function() {
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘visible’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘visible’);
//alert(“hello-mousenter”);
});
$(this).on(‘mouseleave’,function() {
// alert(“hello”);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘auto’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘hidden’);
});
});
For one of my projects I need to make one button full width/height of the TD. I tried setting the normal .btn-warning with -Xpx!important but didn't work.
Currently I have this:
But want to achieve to this:
I'm using the following code:
<tbody>
<tr>
<td class="td-btn"><span class="glyphicon glyphicon-ok"></span></td>
<td>Projectnaam</td>
</tr>
</tbody>
Does anyone know how to get this button full with/height with the TD without spacing?
Friend of mine helped out:
<td style="padding: 0px;">
<a href="#" class="btn-sm btn btn-success" style="height: 44px;padding: 12px 10px;">
<span class="glyphicon glyphicon-ok"></span>
</a>
</td>
It's almost what I want =). Thanks all.
.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
padding: 5px;
}
<div class="row-fluid">
<table class="s-table table table-bordered table-striped table-hover">
<thead class="p-table-head">
<tbody class="p-table-body">
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<div id="div_2_1_2_1_1_1_10_r9" class="Action_Group CoachView CoachView_show" data- eventid="" data-viewid="Action_Group1" data-config="config_div_2_1_2_1_1_1_10_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action_Group">
<div id="div_2_1_2_1_1_1_10_1_r9" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix">
<div class="l-nodeId" style=" display: none; "></div>
<div class="p-action-group">
<div id="div_2_1_2_1_1_1_10_1_1_r9" class="Action CoachView CoachView_show" data- eventid="boundaryEvent_10" data-viewid="Action3" data-config="config_div_2_1_2_1_1_1_10_1_1_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action" style="background-color: transparent;">
<button id="div_2_1_2_1_1_1_10_1_1_r9-lnk" type="button" style="display: none;">
<a class="p-action-link" href="#action" title="">
<i style="display: none;"></i>
<span style="background-color: transparent;">Select</span>
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have tried with the following different x path expression its works fine in Firefox but in IE browser it is not working?.
//tbody[#class='p-table-body']/tr/td[10]/div/div/div/div/a/span
//table[#class='s-table table table-bordered table-striped table- hover']/tbody/tr[1]/td[10]/div/div/div[2]/div/a/span
//*[#id='div_2_1_2_1_1_1_10_1_1_r9']/a/span
Note : i have tried to execute scripts it is not fail but main issue it is not recognizing
select link of a customer.
Try
//*[#id='div_2_1_2_1_1_1_10_1_1_r9-lnk']/a/span
to click on select
Not sure if it can help, but try selecting just the 'a' element, instead. There's no need to select also the span element, as far as I can understand. E.g.:
By.cssSelector("#div_2_1_2_1_1_1_10_1_1_r9 a.p-action-link")
Also, a couple of recommendations.
Try to avoid xpath selectors, and write css selectors instead. See selenium-docs
While writing a selector, you should not be too strict. "/tr/td[10]/div/div/div/div" is considered bad practice.
See Writing reliable locators for Selenium and WebDriver tests
Try to identify the element by using the text identifier
driver.findElement(By.xpath("//a/span[text()='Select']")).click();