Basic html table centering in the left td - html

I have a table which I'm going to try to represent this way:
-------------------------
| L1 | R1 |
------------------------
| L2 | R2 |
-------------------------
My code is as follows:
<div data-role="content" id="div1" align="top" style="padding:3 !important;" >
<table border="0" align="CENTER" cellspacing="0" width="100%" style="vertical- align: text-bottom;" >
<tr>
<td></td>
<td>
<div id="question1" class="question">
<input type="text" id="question" />
<Style>
#question{
font:5px;
font-family:verdana;
}
</style>
</div>
</td></tr><tr>
<td width="50"><img id="img2" width="40" height="36" style="float:right; margin-top: 0px;" ></td>
<td style="text-align:center;">
<div class="ui-grid-b" >
<div class="ui-block-a"><button id="button1" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-b"><button id="button2" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-c"><button id="button3" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
</div>
</td>
</tr>
</table>
</div>
So basically what I'm trying to do is, there is no section L1 in my table. R1 has data and so has R2. There is an image in L2. What I'm trying to do is remove the division between L1 and L2 and the image in L2 should be centered on the table and not just in the TD for L2. How do I do that?
Also the other question I have is, in the following line of code:
<input type="text" id="question" />
when the value is populated and when I view this in a mobile, the text sometimes goes to the next line. I thought textarea was the only HTML tag which has multiline. Not sure why the text here is going multi-line and how do I avoid it?

See this bit just under <table border="0"....
<tr><td></td>
Change that to
<tr>
<td width="50" rowspan="2">
<img id="img2" width="40" height="36" style="float:right; margin-top: 0px;">
</td>
And then get rid of the <td></td> that originally held that image.

Related

Selenium modal xpath

I need to select this input ...
(name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox ")
... with xpath after this modal popup. I cant use .FindByClass because there are same classes in the main page, but I need open which in (id="__LIGHTBOX__") modal;
<div style="overflow: visible; padding: 0px; width: auto; min-height: 143px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content" id="__LIGHTBOX__">
<div class="__BOX__">
<input name="BtnClose" class="BoxButtonClose" type="button">
<div>
<img src="/Content/themes/base/images/popup-bg-top.png">
</div>
<div class="popupCapsule clearFix">
<form action="/BillPayment/TransferInfo" method="post">
<div class="banner clearFix">
<h1 class="pageTitle">Fatura Ödeme</h1>
</div>
<div class="relatedPeopleContainer clearFix">
<div class="topDiv">
</div>
<div class="relatedPeople clearFix">
<table>
<tbody>
<tr>
<td class="t1">
<img src="Content/banks/bank205.png">
</td>
<td class="t2 SenderReceiverSubmit" rowspan="2" style="cursor: pointer;">
<div class="arrow">
</div>
</td>
<td class="t3">
<img src="Content/company/Turkcell.png">
</td>
</tr>
<tr>
<td class="t4">
<div class="info right">
<h2 class="NavigationButtonIndex" style="cursor: pointer;" title="Hesabınızı değiştirmek için tıklayınız.">HESABIM
<img src="/Content/themes/base/images/change-account.png" alt="" style="height: 20px; vertical-align: text-bottom;">
</h2>
<p class="first">
Beşyüzevler Şube
</p>
<p>
Cari Hesap
</p>
<p>
10136046-1
</p>
<p>
1.256,51 TL
</p>
</div>
</td>
<td class="t6">
<div class="info left">
<h2>TURKCELL
</h2>
<p class="first">
1774862559
</p>
<p>
5303003816
</p>
<p>
23,40 TL
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bottomDiv">
</div>
</div>
<div class="amountEntry clearFix">
<table class="moneyEditorTable ">
<tbody>
<tr>
<td>
<input class="integerinput " data-val="true" data-val-regex="The field Integer must match the regular expression '[0-9.,]{1,11}'." data-val-regex-pattern="[0-9.,]{1,11}" datavalrequired="" disabled="disabled" id="IntegerInput" name="Amount.Integer" onkeyup=";" value="23" type="text"></td>
<td class="spanTd">
<span class="currency ">,</span>
</td>
<td>
<input maxlength="2" class="decimalinput " data-val="true" data-val-range="The field Decimal must be between 0 and 99." data-val-range-max="99" data-val-range-min="0" datavalrequired="" disabled="disabled" id="DecimalInput" name="Amount.Decimal" onkeypress="return BOA.Web.Validation.NumericControl(event);" onkeyup=";BOA.Web.Validation.DecimalPoint(event, $(this));" onpaste="BOA.Web.Validation.NumericEditorPaste(event, $(this));" value="40" type="text"></td>
<td class="spanTd">
<span class="currency ">TL</span>
</td>
</tr>
</tbody>
</table>
<input id="Amount_FECCode" name="Amount.FECCode" value="TL" type="hidden">
<div class="Error clearFix">
<span class="field-validation-valid" data-valmsg-for="Amount" data-valmsg-replace="true"></span>
</div>
</div>
<table class="popupButtonArea">
<tbody>
<tr>
<td class="left">
<input name="BtnPrev" value="GERİ" class="NavigationButtonPrev " type="button">
</td>
<td class="right">
<input name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox " type="button">
<input name="FromStep" value="TransferInfo" type="hidden">
</td>
</tr>
</tbody>
</table>
<input name="__RequestVerificationToken" value="jzI4c0v-PPC60xzaY8B2FDiCLYmHwCCtQsYv7UbBIMgnBWFeEpJoLLMDgf4LGl24WxhfizGlsqEJdjhywzgNHT785XHRzmwcU2qDyaQfSh6SajD8WKCAEq2L8CejPMJ65QL45A2" type="hidden">
</form>
</div>
<div>
<img src="/Content/themes/base/images/popup-bg-sub.png">
</div>
</div>
</div>
You can try to find the element by the following xpath :
//div[contains(#id, 'LIGHTBOX')]//input[#name='BtnNext' and contains(#class, 'NavigationButtonNextLightBox')]
Above xpath attempt to find a <div> having id contains LIGHTBOX, then from within that <div> get <input> element having name attribute equals BtnNext and class attribute contains NavigationButtonNextLightBox
Not sure am i missing somehting here, but whats stopping you from selecting by name?
WebElement btnNext = driver().findElement(By.name("BtnNext"));

Two HTML inputs with same Id and Name solve dynamically

As you can see i want to have two or more inputs with samo Id and Name, but HTML doesn't allow that, so how can i solve this on some other way and how to make active button change it's color
<table border="0" cellspacing="0" cellpadding = "0" style="font-size:x-small">
<tr valign="bottom" style="height:10px">
<td width="30px" style="vertical-align: top">
</td>
<td width="30px" style="vertical-align: middle" align="center" nowrap="nowrap">
<label style="font-size:small">
Time period</label>
<input type="hidden" id="ReportParameter" value = "1" name="ReportParameter" />
<input class="button" id="showDailyReport" name="searchQueue" type="submit" value="Day" onClick="onClickHandler(this)" />
<input type="hidden" id="ReportParameter" value = "2" name="ReportParameter"/>
<input class="button" id="showWeeklyReport" name="searchQueue" type="submit" value="Week" onClick="onClickHandler(this)" />
</td>
</tr>
</table>
You can define specific class for every button and do the visual changes on that class
ex
<input class="button button-red" id="showDailyReport" name="searchQueue" type="submit" value="Day" onClick="onClickHandler(this)" />

hide table columns which have row span

i have a table with 2 rows and 4 columns.first and last td is rowspan="2".
in first column i have 2 radio buttons. when i click the first one 2nd column should hide and 3rd one should be visible and vice versa.
since it has rowspan td:nth-child(2)').show() not working properly
please help
$(document).ready(function() {
var check = $("#RadioDiv input:radio:checked").val()
if (check == 'Date Wise') {
$('#tblmenubar td:nth-child(2)').show();
$('#tblmenubar td:nth-child(3)').hide();
} else {
$('#tblmenubar td:nth-child(2)').hide();
$('#tblmenubar td:nth-child(3)').show();
}
$('#RadioDiv input').click(function() {
var checktype = $("#RadioDiv input:radio:checked").val()
// alert(checktype);
if (checktype == 'Year Wise') {
$('#tblmenubar td:nth-child(3)').show();
$('#tblmenubar td:nth-child(2)').hide();
//alert('year check');
} else {
$('#tblmenubar td:nth-child(2)').show();
$('#tblmenubar td:nth-child(3)').hide();
//alert('date check');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="menubar">
<table id="tblmenubar" border="bold">
<tr>
<td align="left" rowspan="2">
<div id="RadioDiv">
<input type="radio" name="type" value="Year Wise">Year Wise
<br>
<input type="radio" name="type" value="Date Wise">Date Wise
<!-- <asp:RadioButtonList ID="rbyeardate" runat="server">
<asp:ListItem Selected="True">Year Wise</asp:ListItem>
<asp:ListItem>Date Wise</asp:ListItem>
</asp:RadioButtonList> -->
</div>
</td>
<td>Start Date:
<div style="float: right;" id='jqxDateTimeInputstart'>
</div>
</td>
<td>
Year:
</td>
<td rowspan="2">
<input id="btntrial" type="button" value="Submitt" />
</td>
</tr>
<tr>
<td>End Date:
<div style="float: right;" id='jqxDateTimeInputend'>
</div>
</td>
<td>
<asp:DropDownList ID="dlFiscalYear" runat="server">
<asp:ListItem>2013</asp:ListItem>
</asp:DropDownList>
<div style="float: left;" id="jqxDropDownListYear">
</div>
</td>
</tr>
</table>
</div>
I think your problem is not that your first and last column are rowspan="2". The rowspan attribute affects rows not columns. What happens is that your second row doesn't have 4 columns but 2. You can just add an empty invisible empty cell in the second row to compensate the number of columns before the two you want to show/hide, and, very important, in the same position. Then your :nth-child() selector will select the proper cells.
<tr>
<td style="display: none"></td>
<td>End Date:
<div style="float: right;" id='jqxDateTimeInputend'>
</div>
</td>
<td>
<asp:DropDownList ID="dlFiscalYear" runat="server">
<asp:ListItem>2013</asp:ListItem>
</asp:DropDownList>
<div style="float: left;" id="jqxDropDownListYear">
</div>
</td>
</tr>

Accordion tags structure - wraping tag

I have an accordion menu, which works fine. However, I would like to have a single wrapping tag to denote the entire accordion content.
Accordion presents a single question (in its tap) and User's response in the accordion content.
Here's what I have:
<div class="questions"> <!-- this div open accordion tab-->
<!-- If I place a tag here, before "QBlock" - accordion stops working -->
<div id="QBlock"> <!-- This is where accordion content begins -->
<table id="QTable">
<tr>
<td width="45" align="left" valign="top" scope="row">
<div id="QNumber">4.2</div>
</td>
<td width="100%" align="left" valign="top">
<div id="QText">text</div>
</td>
</tr></table>
</div>
<div>
<table id="RTable">
<tr>
<td width="100%" align="left" valign="top" style="padding-right:20px">
<div id="Guidance"><p>content</p></div>
</td>
<td width="550" align="left" valign="baseline">
<div id="Response" class="Response">
<label><input type="radio" name="Radio402" value="Y" id="Radio_402Y" onchange='radioChange(this, "402")'>Yes</label>
<label><input type="radio" name="Radio402" value="N" id="Radio_402N" onChange='radioChange(this, "402")'>No</label>
</div>
<span id="responseDetails">
<div id="Observation">
<label for="observation">Observation:</label>
<textarea name="observation" id="Obs402" rows="6" disabled style="width: 530px;" placeholder="Enter text of observation here ..."></textarea></div>
<div id="DueDate">
<label for="DueDate">Due date:<br></label>
<input name="DueDate" type="date" id="DueDate402"/>
</div>
<div id="proposedActions">
<label for="porposedActions">Proposed actions:</label>
<textarea name="proposedActions" id="pa402" rows="6" style="width: 530px;"></textarea>
</div>
</span>
</td>
</tr>
</table>
</div>
</div> <!-- this div closes the accordion tab -->
What I would like to do is to have a structure allowing me to wrap this whole question and place an id to it, something like
<section id="Q001"> ... </section>
which starts right ABOVE "QBlock" and ends before the final tag but accordion seems not to allow any other wrapping . Thanks in advance.

HTML table Aligning and format

I have three columns in a table. 1st and 3rd column have plenty of rows. 2nd column has only row, but i want this row to be located in middle of table. I am not getting desired result.
<tr>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
<td colspan="2" align="center" valign="middle">
Move
</td>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
</tr>
Attached the image also. Help me where am I going wrong
Use "vertical-align:" instead of "valign:"
style="vertical-align: middle"
http://www.css4you.de/Texteigenschaften/vertical-align.html
Try to add a div or span tag, and mention the width and height in it.