I'm using JSF 2 and the h:selectOneRadio component that renders all the inputs inside a table tbody, tr, td...
Is there a way to generate divs instead of this table rows and columns in order to use a previously designed html and css page for this items?
Example:
I have this structure for items:
<div class="form-row">
<label for="mob-100" class="fancyradio">
<input type="radio" name="config-mob" id="movil-100" class="radio01 hide-item">
</input>
<span>My item</span>
</label>
</div>
And the component is generating this:
<table>
<tbody>
<tr>
<td>
<input type="radio" name="j_idt27" id="j_idt27:0" value="12">
<label for="j_idt27:0" class="active"> My item</label>
</td>
</tr>
.
.
.
</tbody>
</table>
I'll need to adapt the first structure to the generated selectoneradio html.
Thanks in advance.
Related
As you can see in the image below, the table contents are so long and the last td content is hideous. (Sorry for local language, but trust me, the content is not important.)
What I want is hide checkbox titles using only CSS. It's very hard to not output title 'cause it's rendered automatically by a well-encapsulated module. And I don't want to tamper with it. I was successful to add hide-title class to input itself as follows:
Is it possible to hide checkbox text only using this advantage?
Following is my html:
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<label>
<input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1">
両面印刷可能 <!-- Hide this text with custom class -->
</label>
</div>
</div>
</td>
and each tdhas an id starting with result_box__is_duplex. I believe the template uses Bootstrap v3.0. Thank you for paying attention.
You could use an attribute starts with selector - [attr^=value] to target the td you want:
td[id^="result_box__is_duplex"] .checkbox label {
font-size:0;
}
<table>
<tr>
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<label>
<input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1">
両面印刷可能 <!-- Hide this text with custom class -->
</label>
</div>
</div>
</td>
</tr>
</table>
Are you able to add the .hide-title to the label element and not the input element? You can then use this, but it's still quite hacky.
.hide-title {
font-size: 0;
}
I have a suggestion.
Let's change HTML structure a little bit different.
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox_id" value="value"/>
<label id="label_id" for="checkbox_id">Text</label>
</div>
</div>
</td>
then you can apply CSS there the way you expect
/***** CSS ******/
label#label_id {
display: none;
}
You can try the below code.
<label style="font-size:0"><input type="checkbox" id="check1">Option 1</label>
I'm trying to check a checkbox using <label> but by clicking a row / <tr> of <table>. Is this possible??
I have tried to use jQuery, but I'm not quite satisfied with the result, because, I'll eventually select the texts inside the row, which isn't very user friendly
I also have tried to test it in HTML on Chrome
<table border="1">
<label>
<!-- This label is expected to be used to check on the checkbox by
clicking anywhere on the table row -->
<tr>
<td><input type="checkbox" /> Foo</td>
<td>Bar</td>
</tr>
</label>
</table>
I expected when I click bar the checkbox would be checked, but it didn't
Note:
Since this is impossible to be aquired through basic HTML, I'm going to close this question
Please set label for attribute to do this, below code will help you.
<table border="1">
<tr>
<td><input type="checkbox" id="mycheckbox" /> Foo</td>
<td><label for="mycheckbox">Bar</label></td>
</tr>
</table>
$('.checkBoxChecked').on('click', function(){
var checkbox = $(this).find('.Aps_checkbox');
checkbox.prop("checked", !checkbox.prop("checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox" class="Aps_checkbox"/> Foo</td>
<td>Bar</td>
</tr>
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox2" class="Aps_checkbox"/> Foo2</td>
<td>Bar2</td>
</tr>
</table>
<!-- begin snippet: js hide: false console: true babel: false -->
It's not possible to achieve this by basic HTML as of now...
Based on W3, it said that <label> can only affect on one level of container only
Something like this:
Legal:
<label>
<div> AAAA</div>
<input type="checkbox">
Some text
</label>
Illegal:
<label>
<div> AAAA
<input type="checkbox">
</div>
Some text
</label>
So since my question is involving more than one level of containers, It can't be achieved by normal means
Reference:
Mozila Web Reference
Multiple labels can be associated with the same form control.
Clicking on any of the labels associated with an input element toggles the checked state of that input element.
To check a checkbox by clicking a table row, you can create a table where the first td element of each table row contains an input element, and the subsequent td elements contain labels for that input element, like so:
<table>
<tr>
<td>
<input id="foo" type="checkbox" />
</td>
<td>
<label for="foo">Foo Label 1</label>
</td>
<td>
<label for="foo">Foo Label 2</label>
</td>
</tr>
<tr>
<td>
<input id="bar" type="checkbox" />
</td>
<td>
<label for="bar">Bar Label 1</label>
</td>
<td>
<label for="bar">Bar Label 2</label>
</td>
</tr>
</table>
To maximize the clickable area of each table row, you can make each label element fill the width of its parent td element like so:
table td label {
display: block;
}
I need to align the labels on the left hand side properly, so that the textbox and text area at the same place..I have added a class to set the width but that does not work properly.
FIDDLE
Code:
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<ul>
<li>
<label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label>
<input type="text" id="feedback_name">
<br>
</li>
<li>
<label for="feedback_msg" class="feedback-label-len">How can we do better?</label>
<textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea>
<br>
</li>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
<button id="feedback_submit">Send</button>
</div>
css
.feedback-label-len {
width:600px;
}
I think if I were in your place, I'd just add two </br> below the labels.
They are:
On the left hand side
They are left-aligned as well.
This obviously shall give you the same effect as
label {display:block;}
Adding display: block to the labels would be a fine solution for a simple form. If you're set on putting them side by side...
label {display: block; float: left}
li {overflow: hidden
.feedback-label-len {
display: block;
}
JSFIDDLE
I would use a table.
JSFIDDLE
<form method="post" action="feedback.php">
<table id="feedbackTable">
<tr>
<th><label for="txtName">(Optional) tell us who you are</label></th>
<td><input type="text" id="txtName" style="color:#000000" title="Enter your name" name="txtName" placeholder="Enter Your Name" /></td>
</tr>
<tr>
<th class="message"><label for="">How can we do better?</label></th>
<td><textarea title="Enter your message" name="txtMessage" rows="5" id="txtMessage" placeholder="Go ahead, type your feedback her..."></textarea></td>
</tr>
<tr>
<th><label for="txtEmail">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</label></th>
<td><input type="text" id="txtEmail" title="Enter your email address" name="txtEmail" value=""/></td>
</tr>
<tr>
<th><label title="Send"></label></th>
<td><input type="submit" style="color:#000000" value="Send" /></td>
</tr>
</table>
</form>
One approach you can try using is using tables in order to format the data. Using the table, tr (table row), and td (table data) html tags we can format the data in so that they are spaced correctly without using CSS!!!
<DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<table>
<ul>
<tr>
<td>
<li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
<td><input type="text" id="feedback_name"></td>
</tr>
<tr>
<td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
<td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>
</li></tr>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
</table>
<button id="feedback_submit">Send</button>
</div>
</body>
</html>
Just so you know this method may upset html purists. The tag was designed to actually display table data and using it for other purposes such as formatting is sometimes considered improper by old school web coders. However it I have not been able to find an actual problem caused by formatting data like this and doing so is the easiest way for you to make pages such as the one you are asking about.
I hope this answered your question, if you need me to expand on this just ask but when I ran the code above it gave me something much like you described.
I have this registration with HTML:
<form class="registerForm" id="registerForm" action="./index_public.php?page=pilot_insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span>Name</span>
</td>
<td><span id="sprytextfield1">
<label>
<input type="text" name="name" id="name" tabindex="1" />
</label>
<span class="textfieldRequiredMsg">*Required</span></span>
</td>
</tr>
<tr>
<td class="style1">E-mail</td>
<td><span id="sprytextfield6">
<label>
<input type="text" name="email" id="email" tabindex="8"/>
</label>
<span class="textfieldRequiredMsg">*Required</span><span class="textfieldInvalidFormatMsg">Formato no válido.</span></span>
</td>
</tr>
</table>
<input class="btn" value=Apply name=apply type="submit" />
</form>
I want put an image next to the registration form. I tryed but I only can put it below the registration form and no next to. HELP!!!
Apply a specific width to your form and float:left and use float:right for the image
Put form and image in div and use "float" css property.
<div style="float:right">
<img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"> </div>
Here is the working demo : http://jsfiddle.net/7uUK8/1/
You can try applying "display:inline-block;" to both the form and the image.
For example:
<form style="display:inline-block;"></form>
<img src="someimage" style="display:inline-block;"/>
Here's a fiddle example with your form and an image side by side: http://jsfiddle.net/VE66w/
Use div or span to make two container in body of the html one is use for form and other is use image. After that apply css according.
Just delete : "Formato no válido."
<div style="float:right"><img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"></div>
If you want, image next to registration field ...
I want to create a table where each td is a form field. What is the best way of approaching that? Should I create a regular table and apply css styles on the form fields to resemble the size of the td fields? Hmmm... what do you suggest?
You can place tags inside of a form easily, so I would recommend nesting a table in the form:
<form>
<table>
<tr>
<td>Name: <input type="text" name="name" /></td>
<td>Age: <input type="text" name="age" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Which would give you a one row, two column table with a labeled text box in each column. Be careful about nesting your HTML tags, this could get confusing fast if you made a large table/form.
One way is to use contenteditable
<html>
<table>
<tr>
<td>
<div contenteditable="true"></div>
</td>
</tr>
</table>
</html
People seem to be forgetting about display: table, display: table-row and display: table-cell!
Here's a demo jsFiddle.