Same code is displayed DIFFERENT
over XHTML ()
and HTML5 ()
<table border="1">
<tr><th>COL1</th><th>COL2</th><th>COL3</th></tr>
<tr><form action="">
<td>111</td><td><input type="text" name="correo" /></td><td>333</td>
</form></tr>
and other TR with other form ...
and other TR with other form ...
and other TR with other form ...
...
</table>
... I need display this with XHTML, but all distortion...
With HTML:
With xHTML:
how I can fixed this?
The styling can be achieved in HTML5's XML syntax (aka XHTML) by using
<style>
tr form { display: contents; }
td { border: 1px inset black; }
</style>
but don't. Your mark-up is not valid HTML5 in either the HTML syntax or the XML syntax.
Instead you should use the form attribute on the controls to associate the
control with a form, like this:
<form action="" id="myform1"></form>
<table border="1">
<tr><th>COL1</th><th>COL2</th><th>COL3</th></tr>
<tr>
<td>111</td>
<td><input type="text" name="correo" form="myform1" /></td>
<td>333</td>
</tr>
</table>
Related
I have a JSF app and I generate <table>s dynamically based on some data.
For each cell I dynamically generate the css class and I write all the classes in the *.jsf File (using ResponseWriter)
A simplified resulting page:
<div id="styles">
<style type="text/css">
cell1 {
color: red;
}
cell2 {
color: blue;
}
cell3 {
color: black;
}
cell4 {
color: green;
}
</style>
</div>
<table style="width:100%">
<tr>
<td class="cell1">Jill</td>
<td class="cell2">Smith</td>
</tr>
<tr>
<td class="cell3">Eve</td>
<td class="cell4">Jackson</td>
</tr>
</table>
The table can be very big and it is possible for cells to share the same style.
The cell styles can change based on some user input in the table. I can update the cell on ajax request overriding UIComponent.visitTree(VisitContext context, VisitCallback callback)
but I have no idea if and how I can add additional css classes.
I think I have found a solution: inside UIComponent.visitTree(VisitContext context, VisitCallback callback) I can rewrite the cell (<td>) and add the <style type="text/css"> tag as child of the <td> tag adding the new CSS classes to it.
I have the code, which I get it from inspecting:
<td class=ox-list-pair style>
<input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">
</td>
I have tried to hide the checkbox but none of them success.
My attempts:
input[type=checkbox].ox_CkSurvey_Sport__xava_selected {
display: none;
}
ox_CkSurvey_Sport__xava_selected {
display: none;
}
.ox_CkSurvey_Sport__xava_selected input[type="checkbox"]{
display:none;
}
Please note that <td> is valid as it is inside <tr> as well as <table>.
Please help me. Thanks.
You should read up on CSS selectors.
https://www.w3schools.com/cssref/css_selectors.asp
You are trying to hide the check box with the class "ox_CkSurvey_Sport__xava_selected", but that doesn't exist.
You need to do this:
input[type=checkbox][name=ox_CkSurvey_Sport__xava_selected] {
display: none;
}
Is your <td> valid? What makes a <td> valid is:
It must be in a <tr>
That <tr> must be in a <table>
Technically <tr> must be in a <tbody>, <thead>, or <tfoot> but the browser will create a <tbody> by default if there's a <table>.
In the demo there's:
a <table>, <tr>, <td>, and your messy checkbox.
a <td> and a simple checkbox.
Note: The selector is td.ox-list-pair > input[type="checkbox"] and it successfully hides the messy checkbox and fails to hide the simple checkbox. So as you can see that the browser will ignore an invalid <td> and everything within it. I'm going out on a limb and assume that your <td> is not inside a <tr> and/or <table>.
Demo
$('td.ox-list-pair > input[type="checkbox"]').css('display', 'none');
b {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class='ox-list-pair' style>
<input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">I'm
in a valid cell
</td>
</tr>
</table>
<td class='ox-list-pair'>
<input type="CHECKBOX">I'm in an <b>invalid</b> cell
</td>
I know that you can assign a class to the generated table by using CssClass on the RadioButtonList but I need to be able to style the generated <td>'s individually.
Easy with JQuery but I'd much rather not have to resort to that.
Adding cssClass="myClass" to the ListItem results in the following broken HTML
<table id="myTable">
<tbody>
<tr>
<td>
<span cssclass="some_class"> // Well this is rubbish!
<input id="myRadioInput" type="radio" name="myRadioInput" value="myValue" >
<label for="myRadioInput">myLabel</label>
</span>
</td>
<td>
<input id="myRadioInput2" type="radio" name="myRadioInput2" value="myValue2">
<label for="myRadioInput2">myLabel2</label>
</td>
</tr>
</tbody>
</table>
So my question is: Is it actually posible to either assign a class or apply inline styling to the generated <td>'s INDIVIDUALLY?
PLEASE NOTE
This is a question about ASP.NET. Answers that simply tell me how to style HTML elements are not answering the question.
If you want to do it in code (e.g. if you need to dynamically adjust the style based on complicated logic) you can set the style attribute on the ListItem (setting the class attribute might work as well but if your ListItem is disabled, asp.net will override it with a special aspNetDisabled class):
item.Attributes["style"] = "color: lightgray; font-style: italic;";
To style all the td's you could add the CSS like so...
#myTable td{
color:Red;
}
Other than that (if you wanted different styles for each td) jQuery would be the only way to add classes to those generated td's.
$('#myTable td:eq(0)').addClass('td1');
$('#myTable td:eq(1)').addClass('td2');
...
OR
$.each($('#myTable td'), function(i){
$(this).addClass('td'+i);
});
This is one of the reasons I dislike ASP.NET controls with all the extra markup you have no control of through the properties panel.
You can do it as follows:
<table>
<tr>
<td class="yourcssclassname"></td>
<td class="yourcssclassname2></td>
</tr>
</table>
<style type="text/css">
.yourcssclassname
{
padding: 10px;
}
.yourcssclassname2
{
padding: 15px;
}
</style>
or you can
<table>
<tr>
<td style="padding:10px;"></td>
<td style="padding:15px;"></td>
</tr>
</table>
Hope this helps
You are so close to the solution. Add class attribute instead of cssclass on the items for individual styling. This will add a span tag surrendering the input and label tags with the right class.
<style>
.radiobuttonlist .red { display: block; background-color: red; }
</style>
<asp:RadioButtonList runat="server" CssClass="radiobuttonlist">
<asp:ListItem Text="Item1" Value="1" ></asp:ListItem>
<asp:ListItem Text="Item2" Value="2" class="red" ></asp:ListItem>
<asp:ListItem Text="Item3" Value="3" ></asp:ListItem>
</asp:RadioButtonList>
You can target the input elements and labels with:
input[type="radio"] { margin-right:10px; }
input[type="radio"] + label { color:red; }
If you had a class on the table, you could add that to be more explicit. Should be backwards compatible to IE7.
I was wondering if anyone knew how to display data using XForms in a table format. I have a code that displays each column tag as rows however, I was wondering how I can display each column tag as columns. I'd like my output to display like this:
1 1 2
2 3 4
I am a beginner at XForms and have no idea about the basics so if anyone could help me out, that would be great.
Here is my code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Table with CSS and Divs</title>
<xf:model><xf:instance>
<disp xmlns="">
<row><col>1</col><col>2</col></row>
<row><col>3</col><col>4</col></row>
</disp>
</xf:instance></xf:model>
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
/* example of doing layout of a table without using the HTML table tags */
.table {
display:table;
}
.tableHeader, .tableRow, .tableFooter, .myRow {
display: table-row;
}
.leftHeaderCell, .leftCell, .leftFooterCell,
.rightHeaderCell, .rightCell, .rightFooterCell,
.myCell
{
display: table-cell;
}
.myCell {
padding: 5px 5px 5px 5px;
border: solid black 2px
}
</style>
</head>
<body>
<div class="table">
<xf:repeat nodeset="row" id="idrow">
<div class="myRow">
<div class="myCell"><xf:output ref="position()"/></div>
<xf:repeat nodeset="col" id="idcol">
<div class="myCell"><xf:output ref="."/></div>
</xf:repeat>
</div>
</xf:repeat>
</div>
</body>
</html>
XSLTForms substitutes XForms elements into HTML elements (have a look with a debugger to check this). Adding DIV elements is a problem with nested repeats.
This has been fixed for the TABLE/TR/TD structure because it can easily be detected by XSLTForms. DIV elements with table-* CSS properties are not in the same situation...
Here is an example working with XSLTForms:
<body>
<table>
<xf:repeat nodeset="row" id="idrow">
<tr>
<td>
<xf:output value="position()"/>
</td>
<td>
<table>
<tr>
<xf:repeat nodeset="col" id="idcol">
<td>
<xf:output ref="."/>
</td>
</xf:repeat>
</tr>
</table>
</td>
</tr>
</xf:repeat>
</table>
</body>
-Alain
Can anybody tell me why the outer div is not expanding to the page width? Is there any solution for this without removing the doctype declaration(If I remove doctype, it is expanding) ? Also my page is in js disabled mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="border:1px solid #ff0000;">
<div>
<table class="storeList">
<thead>
<tr>
<th>
Country Code
</th>
<th>
Store ID
</th>
<th>
Store Name
</th>
<th>
TownName
</th>
<th class="actions">
Store Operation
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TEST
</td>
<td>
TEST
</td>
<td>
hghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjhghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjdhgfdhf
</td>
<td>
TEST
</td>
<td class="actions">
TEST ACTIONS
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This answer works, promise!
To your outermost div (<div style="border:1px solid #ff0000;">), add either:
float: left, or;
display: inline-block.
If you would like to see demos of these two fixes, check these older answers I provided:
How to fix table going outside of div tag in IE6 & 7?
Expand a div width to the width of the sibling table which has a lot of rows and causes vertical scroll
It would probably be because browsers apply their own default style, which include margins and padding on various elements. The body tag probably has default padding so you'd need to add a "reset CSS" file to your page to reset these defaults or just try:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
In the head of your page. Also, just to note, it looks like you're using tables for layout. This is a big no no in todays modern world of CSS:
http://www.hotdesign.com/seybold/
http://www.mardiros.net/css-layout.html
Why not use tables for layout in HTML?
You can also set your table to 100% width to cover the area provided by the div
table { width: 100%; }