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
Related
I am trying to set height for <tr> element of table as below but it is not working
.tsx tr { line-height: 20px; }
<table class="tsx">
<tr></tr>
Can you please let me know what I am doing wrong?
Tried your code and seems to be working fine. Try changing the line-height value. The value you are using (20px) may be equal to the default line-height value. Hence you may not be able to see the difference.
<html>
<head>
<style>
.tsx tr { line-height: 25px; }
</style>
</head>
<body>
<table class="tsx" border="1">
<tr>
<td>abc</td>
</tr>
</table>
</body>
</html>
If I want to treat the properties of a table imbedded in a cell differently than the outer table, what is required. I am new to CSS and do not have a handle on the cascading effect. A boiled downed example of my attempt is as follows:
<body>
<table><link rel="stylesheet" type="text/css" href="OuterTable.css">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table><link rel="stylesheet" type="text/css" href="InnerTable.css"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
</b
Where the OuterTable.css specifies a pink background for the cells and InnerTable.css specifies yellow for the cells. Obviosuly, I am missing something basic as all header styles have a yellow background. What is the best method for styling an internal table.
a) Add class(inner and outer as shown below) to your table
b) remove your CSS file from table and add to head
c) just add the below style statements to your css.
<style type="text/css">
table.outer {
background-color:yellow
}
table.outer th {
// add style properties here
}
table.inner {
background-color:pink
}
table.inner th {
// add style properties here
}
</style>
<table class="outer">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table class="inner"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
First, don't import CSS at the middle of your HTML code, put it on the <head> tag please.
You can style your HTML elements by "id" or "class", I'll make and example using class, check it:
<head>
<link rel="stylesheet" type="text/css" href="OuterTable.css">
<link rel="stylesheet" type="text/css" href="InnerTable.css">
<style>
.outerTable{
background-color:#FF0000;
}
.innerTable{
background-color:#FF00FF;
}
</style>
</head>
<body>
<table class="outerTable">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table class="innerTable"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
</body>
Instead the class at <style> tag, you put your code at your .css files
see it working at: http://jsfiddle.net/U5cUK/
First off, all CSS files should be included in the <head> of your HTML document.
Now, if you want to target a nested table, all you have to do is use a descendant selector like this:
/*Define default color for cells*/
table th{
background-color: pink;
}
/*Override for headers inside a nested table*/
table table th{
background-color: yellow;
}
No need for a separate CSS file or custom classes or ids
See Demo fiddle
The selectOneRadio element in JSF is translated to a table, where the radio button and its label are put within the same <td> in a table.
<!-- JSF Element -->
<h:selectOneRadio id="types" label="Type"
value="#{bean.selectedType}"
layout="pageDirection">
<f:selectItems value="#{bean.types}"/>
</h:selectOneRadio>
<!-- Generated HTML -->
<table id="j_id_i:types">
<tbody>
<tr>
<td>
<input id="j_id_i:types:0" type="radio" value="VALUE1"
name="j_id_i:types"/>
<label for="j_id_i:types:0"> Value #1</label>
</td>
</tr>
<tr>...</tr>
...
</tbody>
</table>
Before I was using Bootstrap, the elements within the <td> would appear side by side, but now look under each other.
The processed CSS for the element is the following, as given by Firebug.
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color: #333333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
html {
font-size: 100%;
}
I have no clue what may be producing such behaviour. It's not a concern of width, as this is the single element within the <div>, and without bootstrap it is rendering side by side.
That's because the <label> has due to the Bootstrap CSS become a HTML block element which starts naturally at a new line.
You need to make it a HTML inline element again. So, you need to override the Bootstrap CSS accordingly. Perhaps you want to apply this for labels in table cells only. E.g.
td label {
display: inline;
}
I'm not very good at HTML/CSS terminology so please feel free to edit the question.
Could you guys please tell me how I can make certain fields/tags fill rest of available space allocated by parent tag ? Non-GWT, html+css example would be fine too.
Here is what I have
HTML code of this example is here (it's generated by GWT).
If I change size of the browser window border of fieldset changes too occupying whole area.
So the "requirements" are:
No fixed width values because I have several localized versions of
the site.
First column with name of the field should be as wide as the longest name. It's "phone number" in my case but can be something else in other language.
Input tag should be left-aligned. Input tag should autosize to occupy space remaining within boundaries of parent
tag.
UiBinder XML of PersonEditor control is
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:e='urn:import:com.google.gwt.editor.ui.client'
ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
ui:generateKeys="com.google.gwt.i18n.server.keygen.MD5KeyGenerator"
ui:generateLocales="en,ru">
<ui:style src="../common.css"/>
<g:CaptionPanel ui:field="captionPanel">
<g:Grid>
<g:row>
<g:cell>
<div>
<ui:msg meaning="person's name">Name:</ui:msg>
</div>
</g:cell>
<g:customCell>
<e:ValueBoxEditorDecorator ui:field="name" stylePrimaryName="{style.editField}">
<e:valuebox>
<g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
</e:valuebox>
</e:ValueBoxEditorDecorator>
</g:customCell>
</g:row>
<g:row>
<g:cell>
<div>
<ui:msg>Phone Number:</ui:msg>
</div>
</g:cell>
<g:customCell>
<e:ValueBoxEditorDecorator ui:field="phoneNumber" stylePrimaryName="{style.editField}">
<e:valuebox>
<g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
</e:valuebox>
</e:ValueBoxEditorDecorator>
</g:customCell>
</g:row>
<g:row>
<g:cell>
<div>
<ui:msg>EMail:</ui:msg>
</div>
</g:cell>
<g:customCell>
<e:ValueBoxEditorDecorator ui:field="email" stylePrimaryName="{style.editField}">
<e:valuebox>
<g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
</e:valuebox>
</e:ValueBoxEditorDecorator>
</g:customCell>
</g:row>
</g:Grid>
</g:CaptionPanel>
</ui:UiBinder>
I don't provide XML for SenderOrganization because it's pretty much the same.
You can do it this way. ".input-wrapper" is necessary for some browsers which don't allow to position input elements by specifying left/right.
<!DOCTYPE HTML>
<html>
<head>
<style>
label { line-height: 30px; }
.input-wrapper { display: inline-block; position: absolute; left: 200px; right: 50px; }
input { width: 100%; }
</style>
</head>
<body>
<fieldset>
<legend>Sender organization:</legend>
<div>
<label>Name:</label>
<div class="input-wrapper">
<input>
</div>
<div>
<div>
<label>Address:</label>
<div class="input-wrapper">
<input>
</div>
</div>
<fieldset>
<legend>Contact Person:</legend>
<div>
<label>Name:</label>
<div class="input-wrapper">
<input>
</div>
<div>
<div>
<label>Phone Number:</label>
<div class="input-wrapper">
<input>
</div>
</div>
<div>
<label>EMail:</label>
<div class="input-wrapper">
<input>
</div>
</div>
</fieldset>
</fieldset>
</body>
</html>
To make label column be autosizable you have to use table element. It looks like this:
<!DOCTYPE HTML>
<html>
<head>
<style>
table { width: 100%; }
th { text-align: left; font-weight: normal; white-space: nowrap; }
td { width: 100%; }
input { width: 100%; }
</style>
</head>
<body>
<fieldset>
<legend>Sender organization:</legend>
<table>
<tr>
<th>Name:</td>
<td><input></td>
</tr>
<tr>
<th>Address:</td>
<td><input></td>
</tr>
</table>
<fieldset>
<legend>Contact Person:</legend>
<table>
<tr>
<th>Name:</td>
<td><input></td>
</tr>
<tr>
<th>Phone Number:</td>
<td><input></td>
</tr>
<tr>
<th>EMail:</td>
<td><input></td>
</tr>
</table>
</fieldset>
</fieldset>
</body>
</html>
Try this. Please note this is just an example. Could very well do with cleaner code.
http://jsfiddle.net/SX2np/70/
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;
}