I'm having troubles aligning things in a table row. I have an hyperlink and an inline-form made up of one textbox and one button.
The problem is that the button goes to the next line instead of being aligned with the textbox. The problem occurs in Chrome, but it works fine in IE10
I use twitter bootstrap for css. This jsfiddle illustrates the problem : http://jsfiddle.net/Tq9Qm/
Can you help me ?
the code of jsfiddle:
<table class="view-header">
<tbody>
<tr>
<td> <span>Edition du mandat </span>
</td>
<td>
<div class="pull-right"> <a style="float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline" placeholder="N° de contrat, nom/numéro de client">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model" />
<button disabled="disabled" class="btn btn-info" type="submit" ng-click="searchMethod()" ng-disabled=" ! canSearch()"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="pull-right">
<!-- uiIf: filterVisible -->
</div>
</td>
</tr>
</tbody>
Use pull-left it's attribute for twitter boot-strap
FiddleDemo
Nav Documentation
Try pull-left in your form
Demo
try the pull-left attribute
it will helps you
Related
I'm trying to build a settings for my WordPress plugin, I want my image to be displayed aside the table on the right, but it always goes to bottom can you guys help me to fix that ?
<form action="options.php" method="post">');
<div class="row">
<div class="col-md-8">
<table class="form-table">
<tbody>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="x'.$key.'" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="myinput" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
....
</tbody>
</table>
</div>
<div class="col-md-4">
<div id="special">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
// outputs the WP submit button html
//#submit_button();
Add a div element with "container" or "container-fluid" class after form element( <form action="options.php" method="post"> )
like :<form action="options.php" method="post"><div class="container">
...............
</div></form>
OR
like :<form action="options.php" method="post"><div class="container-fluid">
...............
</div></form>
I have a data table in my AngularJS application which has many columns where the responsiveness doesn't work anymore. I am currently scrolling the whole way through the data table, which doesn't look good.
I am trying to find a way to freeze some columns on the right side of the data table so that the scroll will be only for the columns on the left. The data tables contain buttons on the right side, so if the buttons are frozen it would be more helpful.
HTML:
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<div class="col-md-12">
<div class="widget widget-table action-table" style="overflow:auto">
<!-- /widget-header -->
<div class="widget-content table-container" ng-controller="getTalentController">
<table ng-table="talentsList" show-filter="true" class="table table-striped table-bordered" style="font-size: smaller;text-align:center">
<tr ng-repeat="talent in data">
<td data-title="'#'" style="width:5px">{{ $index+1 }}</td>
<td data-title="'Employee ID'" sortable="'employeeNo'" filter="{ 'employeeNo': 'text' }" style="width:50px">
{{talent.employeeNo}}
</td>
<td data-title="'Name'" sortable="'fullName'" filter="{ 'fullName': 'text' }">
{{talent.fullName}}
</td>
<td data-title="'From'" sortable="'inDate'" filter="{ 'inDate': 'text' }">
{{talent.inDate}}
</td>
<td data-title="'Till'" sortable="'outTill'" filter="{ 'outTill': 'text' }">
{{talent.outTill}}
</td>
<td data-title="'Account'" sortable="'account'" filter="{ 'account': 'text' }">
{{talent.account}}
</td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }" ng-class="{greenStyle : talent.state == 'Available', blueStyle : talent.state == 'Billed', redStyle: talent.state == 'Blocked'}">
<div style="border:solid">{{talent.state}}</div>
</td>
<td data-title="'Remarks'" ng-click="showRemarks[$index]=!showRemarks[$index]" style="width:70px">
<span ng-hide="showRemarks[$index]" class="ellipses" style="width:inherit">{{talent.remark}} </span>
<span ng-show="showRemarks[$index]"> {{talent.remark}} </span>
</td>
<td data-title="'Resume'">
<a ng-click="downloadResume(talent.id)" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="resume"><svg class="glyph translucent floppy-disk"><use xlink:href="#translucent-floppy-disk"></use></svg></a>
</td>
<td data-title="'Reserve'">
<a ui-sref="reservation.edit({id: talent.id})" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="save"><svg class='glyph stroked hand-cursor'><use xlink:href='#stroked-hand-cursor' /></svg></a>
</td>
</tr>
</table>
</div>
<!-- /widget-content -->
</div>
<!-- /widget -->
</div>
<!-- /span12 -->
</div>
<!-- /row -->
</div>
I would like to freeze the columns on the right side carrying title 'State','Remarks','Resume',and 'Reserve'.
How can I achieve this. I guess the controller code wont be required for this problem. Currently I am creating scroll bar for the table by applying style="overflow:auto" for the outer div.
CSS : https://hastebin.com/wibahuyoxa.cs
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>
<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();
I have a big table and this is the last row of that table:
<tr>
<td>
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
<table>
<tr>
<td>
<form action="index.jsp" method="get" style="display: inline-block;">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post" style="display: inline-block;">
<button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
</table>
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
You could try something like this:
<tr>
<td style="line-height:30px;">
<div style="height:30px; float:left;">
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
</div>
<div style="height:30px; float:left;">
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</div>
<div style="clear:both;"></div>
</td>
</tr>
Let me know if it works (or not) :)
Simply align form tag with display:inline-block in last-child td
Clarification in fiddle : http://jsfiddle.net/HarishBoke/uHCyU/