I am using jqxValidator to validate a group of radio buttons. When the red message (which is a label) appears under the row, it inherits the width of the first column, breaking the design:
I tried many things, finally changing the display of the label fixes the table layout, but the message get splitted in 2 lines.
Is there a way to extend the width of the label to use the whole table width?
Example: https://codepen.io/lhernand/pen/OEZbXb
HTML:
<table style="border:0; border-collapse:collapse; " width="100%">
<tbody>
<tr class="rowRequired jqx-validator-error-element" id="optionsID0EYE">
<td style="border:0; width:50%; "><input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span></td>
<td style="border:0; width:50%; "><input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span></td>
</tr><label class="jqx-validator-error-label" style="position: relative; left: 0px; width: 304.688px; top: 2px;">Please choose one option!</label>
</tbody>
</table>
Note: it should work in IE11
Working with this kind of fixed structure requires some mayor hacking,
since jquery validator inserts a label after a td on the table, the element behave like a td with no match on the same row.
Using the chrome dev tools option to copy the selector on the inspector, I can get the most specific selector posible for the html structure you have, so aplying a 200% size to this element, tricks the table to not missbehave
#tablePatientDetailsContainer > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > table > tbody > label{
width: 200% !important;
box-sizing: border-box;
}
Tested on Chrome, FF and Safari
My Working Code
https://codepen.io/Teobis/full/vrjZVR/
Hope this helps
You placed the id optionsID0EYE in the wrong place. jqxValidator will create a sibling for the element who has this id. You need to do something like so:
<tbody>
<tr class="rowRequired">
<div id="optionsID0EYE" style="display: flex; flex-wrap: wrap">
<div style="width: 50%">
<input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span>
</div>
<div style="width: 50%">
<input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span>
</div>
</div>
</tr>
</tbody>
I moved the id optionsID0EYE to a new div I made.
Working example: https://codepen.io/anon/pen/YvLZeB?editors=1000
Related
In my program, I have a text element that displays in 2 different sections. It will display is section A, and again in section B (popup). I was hoping to create 1 object using CSS that could be used for both sections. That way I could call the same object to check this element regardless of where it is displayed. I can't seem to figure it out. Maybe its not possible, or maybe I need someone who has more experience with HTML and CSS to show me the light.
Here is the HTML for this element in section A when it is displayed
<td id="treeCol" valign="top" style="overflow: hidden; display: block;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section A when it is NOT displayed (hidden when section B is displayed)
<td id="treeCol" valign="top" style="overflow: hidden; display: none;">
<div id="orgTreeAndSearch">
<div class="orgSelection">
<span id="selection" class="" title="Select an org unit">Select an org unit</span>
Here is the HTML for this element in section B when it is displayed
<div class="blockUI blockMsg blockPage PopUp White" style="z-index: 1011; position: absolute; padding: 0px; margin: 0px; width: 1365px; top: 50px; left: 50px; text-align: left; color: rgb(0, 0, 0); border: 0px none; background-color: rgb(255, 255, 255);">
<div class="White" style="margin: 0px 20px 20px; display: block;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
Here is the HTML for this element in section B when it is NOT displayed (hidden when section A is displayed)
<div class="White" style="margin: 0px 20px 20px; display: none;">
<div class="PopUpClose" align="right">
<div>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td valign="top" align="left" style="width: 410px;">
<div class="orgSelection">
<span id="dataAccessOrgSelection" class="">Select org unit(s)</span>
To select the element in section A, I could use the ID and it will work
css=#selection
To select the element in section B, I could also use it's id and it will work
css=#dataAccessOrgSelection
I wanted to have 1 selector for this element, so I tried this. However, it selects both the displayed and hidden elements. So if I'm on section A, it will select the element for both A and B, even though B is hidden (and vice-versa)
div.orgSelection span[id]
Is there a way to have 1 selector for this element, that will only select the visible element? I could check for "display:none" in the style attribute, but I'm not sure how to do this when it is located in td for section A, and div for section B.
Okay, if I understand your question right, you need CSS selector valid for both A and B in visible state.
td#treeCol[style*=block] span#selection, div.PopUp>div[style*=block] span#dataAccessOrgSelection
A tiny explanation. Comma - is for logical OR in CSS selectors. Visible divs of yours have a part of their style attribute - block ([style*=block]). So for both selectors we find span with needed id being contained inside a visible div. If the sectors are not right enough, play with attributes a little more.
To be completely sure that your approach works, you should call the element location with this selector every time before checking its visibility to avoid StaleElementReferenceException, because, clearly, those elements are not the same
But, if I was you, I would check a specific logic and not the 'what if' case. You should know exactly when and what element should be visible.
As Alexander Petrovich mentioned, I would recommand to use to different element-selectors, because in my opinion, they are indeed different elements. In this case, you can find easy selectors with ids.
But if there's a valid reason for a one-selector-but-two-elements-constuct, you need to make clear, which parts of your dom may vary and which are stable. I'm not so firm with css, but I can give you some xpath expressions, if this helps:
//span[(#id='dataAccessOrgSelection') or (#id='selection')]
//span[#class='']
//span[contains(text(),'Select') and contains(text(),'org unit')]
//div[#class='orgSelection']/span
I guess you will be able to transform this xpath-selectors into css-selectors...maybe this pdf will help:
http://code.google.com/p/timger-book/source/browse/trunk/cheatsheet/Locators_table_1_0_2.pdf
I have checkboxes as shown in http://jsfiddle.net/Lijo/Fw3fz/. I need to align the checkboxes horizontally. How to align them using CSS?
Note: The following HTML code is generated from ASP.NET. I cannot change this HTML code.
<table id="Checkboxlist1">
<tr>
<td><input id="Checkboxlist1_0" type="checkbox" name="Checkboxlist1$0" value="red" /><label for="Checkboxlist1_0">Red</label></td>
</tr><tr>
<td><input id="Checkboxlist1_1" type="checkbox" name="Checkboxlist1$1" value="blue" /><label for="Checkboxlist1_1">Blue</label></td>
</tr><tr>
<td><input id="Checkboxlist1_2" type="checkbox" name="Checkboxlist1$2" value="green" /><label for="Checkboxlist1_2">Green</label></td>
</tr>
</table>
Create a CheckBoxList and set the horizontal layout property:
<asp:CheckBoxList ID="cbl" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem >Blue</asp:ListItem>
<asp:ListItem>Green</asp:ListItem>
</asp:CheckBoxList>
More info:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkboxlist.repeatdirection.aspx
You have to change the trs display property: http://jsfiddle.net/Fw3fz/4/
#Checkboxlist1 tr{
display:inline-block;
margin-right:20px;
}
Or, use float: http://jsfiddle.net/Fw3fz/10/
#Checkboxlist1 tr{
float:left;
margin-right:20px;
}
If you want some space between the checkboxes and the labels, add this snippet:
#Checkboxlist1 tr label{
margin-left:5px;
}
However, it's very uncommon to display table rows inline or to float them. If possible, change the HTML structure.
#Checkboxlist1 tr {
float: left; // or diplay: inline-block
margin-right: 15px;
}
#Checkboxlist1 td label {
margin-left: 5px;
}
DEMO
If you are using ASP.NET Framework 4, you can check following properties:
CheckBoxList.RepeatDirection Property:
Gets or sets a value that indicates whether the control displays vertically or horizontally.
CheckBoxList.RepeatLayout Property (to get rid of table layout)
Gets or sets a value that specifies whether the list will be rendered by using a table element, a ul element, an ol element, or a span element.
Either put them in different cells but in one line (tr), or lose the table and use css float.
I have the following HTML:
<div class="wall" >
<table>
<tr>
<div class="tbr01"><th>Content</th></div>
<div class="tbr02"><th>User</th></div>
<div class="tbr03"><th>Published</th></div>
</tr>
</table>
</div>
How do i adjust the width of the th div.tbr01
This is what i've tried in my css file: but i am doing something wrong?
div.wall table tr div.tbr01 th {
width: 100px;
}
Regards,
Thijs
Your HTML is invalid.
You cannot have a <div> as a child of a <tr> or a parent of <th>.
Browsers will perform error recovery in various different ways and often give you a DOM that isn't like you expect (e.g. by moving all the div elements outside the table).
Get rid of the div elements and apply your styles directly to the table cells.
seems it doesn't like the div... apply the class to the th or use
div.wall table tr th {
width: 300px;
}
OR
<div class="wall" >
<table>
<tr>
<th class="tbr01">Content</th>
<th class="tbr02">User</th>
<th class="tbr03">Published</th>
</tr>
</table>
</div>
div.wall table tr th.tbr01 {
width: 300px;
}
In the following example, I'm trying to get the text, input box and icon to align without over lapping.
http://jsfiddle.net/zGZM7/2/
Is there some css I'm missing?
Thanks
Edit, sadly I need a solution which will work with FF and IE6 :(
You have a lot of irrelevant CSS in your fiddle and the only relevant bit isn't getting called as it in your example requires to be under a ul with id #icons. Removing the ul#icons with the following:
.ui-icon {float: left; margin: 0 4px;}
Should make it work as you described.
example:
http://jsfiddle.net/niklasvh/kTFw7/
Split them in different tds
<table>
<tr>
<td>Foo</td>
<td><input type=text id=Foo class=textInput></td>
<td></td>
</tr>
</table>
or
add style float:left to the input
<td>
<input type=text id=Foo class=textInput style="float:left">
</td>
or like Niklas's idea
.ui-icon {float: right; margin: 0 2px;}
I'm learning CSS and HTML.
In my code I have:
<style>
table, td, th
{
padding: 5px;
}
</style>
This rule works on all tables on the page.
Now I want to make a table without padding:
Here is the source:
<table>
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
How to do this?
If you want to add specific styles to this table that override the default styles you've defined, then you'll need some way to reference it in CSS.
Typically, you would give it a class or an ID -- eg <table class='myspecialtable'>....</table>
Then you can have a stylesheet which overrides your default 5px styles, just for this table.
.myspecialtable, .myspecialtable td, .myspecialtable th {
padding: 0px;
}
If you can't add an ID or class to this table, then you could add it on a parent element, and the effect would be the same (as long as that parent doesn't contain any other tables, of course). In this case, your CSS would look something like this:
.myspecialtablecontainer table, .myspecialtablecontainer td, .myspecialtablecontainer th {
padding: 0px;
}
You should change your CSS to define a style instead.
.padded { ... }
Then you can set the class to that style for any tables you want to use that style.
<table class="padded">
</table>
When you set a style, as you have done, for all elements of a particular type, then the only way to remove them is to set the style to something else, or not include a reference to that CSS file from the page that you don't want to use them.
One way would be to give your table a class like so:
<table class="nopadding">
[... table rows and columns...]
</table>
And then put this in your css:
.nopadding, .nopadding td, .nopadding th
{
padding: 0;
}
Which says "any element with the class should have a padding of 0". The .nopadding th and .nopadding td has to be there and is a way of saying "all th and td who is inside an element of class nopadding shouldn't have any padding either", since you previously told all th and td to have a padding of 5px.
I remeber when I first started learning HTML.
What you're after is an id or a class attribute. You'd have two tables like so:
<table class="table1">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
<table class="table2">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
To make is so that table1 had padding, but table2 didn't, you would use the appropriate CSS rules to identify and style the tables:
.table1, .table1 td, .table1 th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
There's many ways I could have done this with CSS. For example, You could also use ids in this case, but it's easier to use classes as an id can only be used once per document.
A slightly better approach in this case would be to take advantage of cascading rules. I could have kept your original CSS and just added the second set of rules:
.table, .table td, .table th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
In this case, only tables with the class table2 would have the 0px padding - all other tables would have 5px padding.
It would be a good idea to read the W3CSchools introduction to CSS - http://www.w3schools.com/css/css_intro.asp. This will introduce you to the basics and get you on your way.
Simple use
<style>
table, td, th
{
padding: 0px;
}
</style>
Also try border-collapse: collapse;.
<table cellpadding='0'> If this don't work, you can create a css class that removes the padding and use that in your table: <table class='no_padding'>