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;
}
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 writing a View which binds the angularjs scope object with the View.
I have a 'Read More' link with ng-href which reference a URL but I need
to change it to call a specific controller method with a Guid Id.
I have this so far
<span><a ng-href="{{item.url}}">Read More</a></span>
how do I change it to call a specific Controller method with the Id like item.Id?
Thanks for any help
<div class="table-responsive" news-listing>
<table style="width: 100%;" style="border-collapse: separate;">
<tr style="border-bottom: 1px solid black; padding-top: 25px;padding-bottom: 25px;" ng-repeat="item in listItems">
<td colspan="100%"></td>
<td>
<img ng-src="{{item.thumbnail}}" style="width: 100px; height: 75px"/>
</td>
<td style="padding-left: 25px;">
<div small>
<span ng-bind="item.publishedDateFormated" style="font-weight: bold"></span>
<span style="font-weight: bold"> | </span>
<span ng-bind="item.headline" style="font-weight: bold"></span><br/>
<span ng-bind="item.teaser"></span><br/>
<span><a ng-href="{{item.url}}">Read More</a></span>
</div>
</td>
</tr>
</table>
</div>
Use ng-click.
HTML:
Read More
Javascript:
$scope.readMore = function(itemId) {
//do things here
openModal();
alert("hello world!");
//go to a new url perhaps?
window.location = "path/to/stuff?itemId=" + itemId;
}
To call the controller method you don't use href instead you use ngClick like:
Read More
I am not good at css, but here is what I want and what i have tried.
<div>
<div id="propertiesTable" style="padding: 20px 20px 20px 20px;" ng-cloak >
<table class="table table-striped table-bordered">
<tbody>
<tr data-ng-repeat="(k,v) in properties">
<td>{{ k }}</td>
<td>{{ v }}</td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 20px;">
<button type="submit" class="btn btn-primary btn-sm"
title="Refresh for updated properties"
ng-click="onRefreshButtonClick()">
<span class="glyphicon glyphicon-refresh">Refresh</span>
</button>
</span>
</div>
</div>
So, I have this cluttered button glyphicon glyphicon-refresh inside a class="btn btn-primary btn-sm"
I need some space between these two. When I tried padding style it did not work. padding is getting applied to the entire button obviously!
How can I achieve padding between glyphicon glyphicon-refresh and class="btn btn-primary btn-sm" ?
When I click on Refresh, I want the id:propertiesTable to be masked(meaning light dimness for this part). Is this achievable?
Sorry about this question. Not good at CSS.
Thank you Stackoverflow!
You can just add a non-breaking space: http://jsfiddle.net/mm6ck3dc/9/
<span class="glyphicon glyphicon-refresh"> Refresh</span>
How to do not allow the arrow to go to another line? This will happens if the screen did not have enough space, see the image:
JSFIDDLE
CODE:
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th class="shrink">COLUMN 1</th>
<th class="shrink">COLUMN 2</th>
<th class="expand">COLUMN 3</th>
<th class="expand">COLUMN 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the i asd adasdasdasdasdtem <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">No item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 0</li>
</ul>
</div>
</td>
<td>Some info here again</td>
<td>yay more info here too</td>
<td>ok, enough info now, that is enough</td>
</tr>
</tbody>
</table>
Tried some white-space: nowrap; but could not get the desired result. Any help will be great. The arrow must be in the right side, always.
Instead of floating the carets right, float the text left.
<span class="pull-left">Description... </span> <i class="fa fa-caret-down"></i>
Demo
span.pull-right floats the i.fa-caret-down to the right after your “Description of the item”, which means it’s placed on the next line. Try putting the float before the description. For example:
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left"
data-hover="dropdown" data-toggle="dropdown">
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
Description of the item
</span>
Sample, fixing the first caret.
Setting the white-space: nowrap property will not effect the dropdown icon as it's in a different flow due to the float: right; applied to it by the class .pull-right.
What you're describing sounds as though you want to set a position: absolute against the icon. This does fix the issue of the icon not being effected by the text, but it raises a further question of, how do you want to resolve too much text in a button which isn't sufficiently big?
As far as I can see, the only way to resolve this would be to also apply an overflow: hidden property to the buttons, to force the spacing to the right where the icon sits to be empty, and to apply an ellipsis on the text if any overflow does occur. You can see the combination of these selectors in this JSFiddle, I have forced the buttons to be smaller purely to demonstrate how this would work when they are forced to consume a space smaller that you would otherwise like:
.btn {
white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.fixed-right {
position: absolute;
right: 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();