How to change css style of Rendered html of CheckBoxMultipleChoice? CheckBoxMultipleChoice renders this html output by default but i want to change css style of this rendered output
<div class="ca-info__cat-roles js-roles-1 expanded" wicket:id="categories" id="categoriesb">
<input name="categories" type="checkbox" value="819" id="categoriesb categories_819">
<label for="categoriesb-categories_819">index>root>CategoryCatalog.png>9</label>
<input name="categories" type="checkbox" value="829" id="categoriesb-categories_829">
<label for="categoriesb-categories_829">index>root>tv.png>9</label>
</div>
I want to change styles of inputs and labels, but i don't know how to do it with CheckBoxMultipleChoice.
I have done this way. There are two ways
Add CSS in html page itself . inside style tag add your style like below but this will affect other component if you have same style.
.ca-info__cat-roles js-roles-1.expanded label{
// Your style for label
}
.ca-info__cat-roles js-roles-1.expanded input{
// Your style for input
}
2.Another way You can override#appendHtml and derive your own style for check box (e.g)buffer.append("class=\"yourStyleclass\"");.
In addition to use custom css for you component you have to use setSuffix() and setPrefix() methods, like this:
checkboxes = new CheckBoxMultipleChoice<>("checkboxes", value);
checkboxes.setSuffix("<br/>");
Related
Im using algolia to perform a search on my website, but I realized one thing. Im using search box generator to customized my search input field. However the problems occur, when I try to apply autocomplete.js on my search input field
Initially, it looks like the one below,
but when I apply the autocomplete feature it will look like this
Code - HTML
<form id="search" novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-google" style="margin-top: 7px;">
<div role="search" class="sbx-google__wrapper">
<input type="search" id="search_input" name="search" placeholder="Search" autocomplete="off" required="required" class="sbx-google__input">
<button type="submit" title="Submit your search query." class="sbx-google__submit">
<svg role="img" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
</svg>
</button>
<button type="reset" title="Clear the search query." class="sbx-google__reset">
<svg role="img" aria-label="Reset">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
</svg>
</button>
</div>
</form>
Code - JAVASCRIPT
autocomplete('#search_input',
{ hint: false }, {
source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
//value to be displayed in input control after user's suggestion selection
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
console.log(suggestion)
return '<span>' +
suggestion._highlightResult.title.value + '</span>';
}
}
});
The custom search box is advised by algolia themselves, on the autocomplete documentation. I have no idea on how to solve this problem, seems like the js script overwrite the css styling. This only happen if I passed in the #search_input in the autocomplete function
Here is the js fiddle https://jsfiddle.net/Ldpqhkam/
Algolia autocomplete adds a span around the input and that's what breaks the design. It has inline style changing the display, you can override it to fix the design.
.algolia-autocomplete {
display: inline !important;
}
Simply put, how can you change the border color of a Chosen jQuery select box? I am assuming you can do it with CSS but I can't quite figure out how.
$(".pnChosen").chosen({
search_contains: true
});
<select required class="pnChosen"></select>
I can use this to change the border color of all of them, but I only want to change ones that I mark as required.
.chosen-container{
border: 1px solid red;
}
And I also want to change the background color when they are disabled if that is possible.
You can use chosen's option inherit_select_classes.
Give required class on select element, and set css for this selector .required>chosen-single
$(".pnChosen").chosen({
search_contains: true,
inherit_select_classes: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
.required>.chosen-single {
border: 1px solid #EE0000;
}
</style>
<select required class="pnChosen required">
<option>Option 1</option>
<option>Option 2</option>
</select>
Another option is to use the adjacent sibling combinator (+) selector in CSS to achieve the desired styling.
For example:
HTML
<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
<a class="chosen-single">
...
</a>
</div>
CSS
select:required + div.chosen-container a { ... }
This would apply the desired style(s) to your div.chosen-container a DOM element immediately following select:required. Just be aware that you may still have to establish CSS priority if you're attempting to override an existing Chosen style so your definitions can supersede any existing chosen styles.
Reference: Adjacent Sibling Combinator
I have made a form in HTML using a table and that worked fine, however, my teacher told me that making forms from tables is not the proper way to do it anymore, instead I should use:
<form>
<label></label>
<input>
</form>
but he also mentioned something about using <span></span> and I'll guess it is just about this point where I got a bit confused, because where should I use it - ie. should I put the <label> and the <input> in between <span></span> ?
A few of the reason I ask is:
I don't consider myself very savvy when it comes to HTML
I would just have used a <div></div> to wrap around the <label> and the <input> and then use css to put it where I want it to appear on the webpage.
Regarding the form I want to create then I want it to look like this:
[Firstname] [lastname]
[textfield] [textfield]
[Street] [zip-code] [city]
[textfield] [textfield] [textfield]
[E-mail] [Phone]
[textfield] [textfield]
[message]
[textarea]
I hope the layout of my form makes sense to the majority of you !
Try something like this:
<form action="action.php">
<label for="firstName">First Name</label>
<input type="text" name="fname" id="firstName"><br>
<label for="lastName">First Name</label>
<input type="text" name="lname" id="lastName"><br>
....
</form>
and to line it all up you could use some css like this:
label{
width: 100px;
text-align:left;
}
Although you could use SPAN technically.. as it's an inline element and so are LABEL and INPUT, it doesn't quite sit well. Inline elements aren't really designed to be containers, so using a block level element such as a DIV would be a better way of structuring it.
Beyond this to make it line up, you're moving into the relms of CSS to float your elements.
So something alone the lines of:
<form action="">
<fieldset>
<div class="left">
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName">
</div>
<div class="right">
<label for="LastName">Last Name</label>
<input type="text" name="LastName" id="LastName">
</div>
</fieldset>
</form>
<style type="text/css">
fieldset {
width:500px;
overflow:hidden;
}
fieldset .left {
float:left;
width:50%;
}
fieldset .right {
float:right;
width:50%;
}
fieldset label {
display:block;
}
fieldset block {
display:block;
}
</style>
You teacher probably means that you should wrap each pair of input and label in a span. You are quite right in thinking that you should use div instead of span there. Just tell your teacher to look at the page when style sheets are disabled. On similar grounds, you should prove her/him that he is all wrong about saying that a table should not be used.
To do the exercise of writing a form (that is essentially tabular data) without using table markup, just use your div approach and use tabular layout features of CSS: set display: table on the form, display: table-row on the div elements, and display: table-cell on the input and label elements. Add padding and horizontal alignment as needed. Do not forget to inform your teacher that this will only work on sufficiently modern browsers, whereas the logical approach of using an HTML table works on all browsers.
I have HTML similar to this :
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<Div class="blackBox" style="visibility:hidden;"></div>
<Div class="SubFotm" style="visibility:hidden;"></div>
</div>
Now I can properly find the trigger for my button click in my script, but I'm not able to target only the closet blackbox to turn it visible.
Currently I'm doing :
if (PButtonName=="Fermer") {
$(this).closest("div .ProfileForm").remove(); // Closing Profile Form
} else if (PButtonName=="plusAdresse") {
alert('In');
$(this).closest("div .BlackBox").css("visibility","visible");
}
I can get the alert "In" to show, but not the BlackBox
If I change the
$(this).closest("div .BlackBox").css("visibility","visible");
for :
$("div .FormBlackBox").css("visibility","visible");
It will show, but will also show all the black box in the document.
If you are using the above HTML, or something similar, I would do it using a reference to the parents.
instead of:
$(".MainForm").closest("div .BlackBox").css('visibility','visible');
use
$(this).parents('.MainForm').children('.BlackBox').css('visibility','visible');
This is assuming you have more than one MainForm div and they all have a single child with the BlackBox class.
here is an example.
Instead of what you have done just add styles display:none; to your divs and then show them whenever you want.So you can do this as below:
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<div class="blackBox" style="display:none;"></div>
<div class="SubFotm" style="display:none;"></div>
</div>
and then in your script
if (PButtonName=="Fermer")
{
$(".MainForm").closest("div .ProfileForm").remove(); // Closing Profile Form
}
else if (PButtonName=="plusAdresse")
{
alert('In');
$(".MainForm").closest("div .BlackBox").show();
}
And I will recommend you using Switch case instead of loops at this place.
Given a series of a form's Label and Input elements like:
<div class="labelEditwrap">
<div class="editor-label">
<label for="Address">Address</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Address" name="Address" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address"></span>
</div>
</div>
I'm trying to select the outer most div when the textbox gets focus so I can highlight both label and input:
$("input").focus(function () {
$(this).parent().parent().addClass("curFocus")
});
I've tried a few combinations including:
$(this).parent().parent() // seems the most obvious
$(this).parent().parents("div:first")
Another question here asking about .parent().parent() was solved by finding a syntax error unrelated to the selector. However, in this case, I can see my hightlighter class if I go up only one parent level (only highlights the editor's div) and also if I climb 3 levels (highlights the container holding the full form).
thx
OK....its not the selector. All the suggested alternates (and the original) are correctly 'selecting' the outside wrapper div. The problem was the CSS and how Floats are being applied to the Label and Editor divs. This CSS will produce correct highlighting and also let the label/editor fields align themselves correctly. [whew]
Up to you guys the best way to close/edit/retitle the question in hopes of helping other avoid my 4 hour toubleshooting ordeal.
-highly appreciate the time taken-
Possible Solutions:-
$('.text-box').live('focus', function(){
$(this).parent().parent().css('border', '1px solid red');
});
$('.text-box').live('blur', function(){
$(this).parent().parent().css('border', 'none');
});
or
$('.text-box').bind('focus', function(){
$(this).parent().parent().css('border', '1px solid red');
});
$('.text-box').bind('blur', function(){
$(this).parent().parent().css('border', 'none');
});
The solution you suggested should work correctly
$(this).parent().parent();
I think the issue here is that your event is being bound before there is an object to bind it to. Have you bound your function on document ready?
Something like:
$(function(){
$("input").focus(function () {
$(this).parent().parent().addClass("curFocus")
});
});
Otherwise using 'live' or 'on' to bind the event will work dynamically.
so like:
$('input').live('focus', function(){
$(this).parent().parent().addClass("curFocus");
});