I am using the DateTimeField component of Wicket, but I am struggling to apply any styling to it. The HTML snippet is this:
<span id="creationDate" wicket:id="creationDate" />
and the accompanying Java is:
add(new DateTimeField("creationDate", new PropertyModel<Date>(this, "creationDate")));
Which works, but produces this (which I have tidied up):
<span id="creationDate" wicket:id="creationDate">
<wicket:panel xmlns:wicket="http://wicket.apache.org">
<span style="white-space: nowrap;">
<input type="text" wicket:id="date" size="12" value="28/11/11" name="creationDate:date" id="date1f"/>
<span class="yui-skin-sam">
<span style="display:none;position:absolute;z-index: 99999;" id="date1fDp"></span>
<img style="cursor: pointer; border: none;" id="date1fIcon" src="wicket/resource/org.apache.wicket.extensions.yui.calendar.DatePicker/icon1-ver-1322148000242.gif" alt="" title=""/>
</span>
<input type="text" wicket:id="hours" size="2" value="14" name="creationDate:hours"/>
<span wicket:id="hoursSeparator"> :</span>
<input type="text" wicket:id="minutes" size="2" value="17" name="creationDate:minutes"/>
</span>
What I am hoping to do is get the components separately, then either add style or class attributes to them. Any way this can be done?
You can use the method public Component add(final Behavior... behaviors) defined in the super class Component.
What you are looking for is the behavior AttributeAppender with which you can add CSS id/classes or every other attribute you want to append.
See the API: http://wicket.apache.org/apidocs/1.5/org/apache/wicket/behavior/AttributeAppender.html
UPDATE
I just got a quick look at the source code of the DateTimeField. Unfortunately, you can't access the components separately.
I can think of two ways how you can style the components:
You can put the whole DateTimeField inside a custom div and then, for example, accessing the textfields via cascading css selectors. (e.g. #myDiv input)
or you create your own DateTimeField class with the existing source code and put your css id/classes there.
Turns out you can just override the HTML, in this case by replacing DateTimeField.html in the org.apache.wicket.extensions.yui.calendar package. This then replaces the default HTML, and is where I added the class details.
Related
I have the following code:
<div class="container" style="width:100%;">
<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>
<p-dataTable [value]="cars" [globalFilter]="gb">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
</div>
My component has:
cars = [{
'vin': 'von',
'year': '1990',
'brand': 'Audi',
'color': 'blue'
},{
'vin': 'another',
'year': '2050',
'brand': 'Honda',
'color': 'silver'
}
]
This should be fine, but the problem is I want to use primeng with materializecss. Is there a way I can make it so that for the input box, it does not use materializecss's styling and preserves what primeng already has? At this point, the search box looks messed up with the magnifying glass being above the input field and not inline.
Its supposed to look like this:
https://www.primefaces.org/primeng/#/datatable/filter
If materalizecss overrides same class that primeng uses, you could just load them in different order, first materalizecss then primeng css. This will ensure that primeng css will override same classes materalize defines.
Find out which class materalize overrides and try to work on that.
Edit
I think this plnkr provides an example of your problem
http://plnkr.co/edit/6ptJJw8z9fOgHAAfSv4u?p=preview
Here is how you can fix it
When I open developer tools and select the input box that I want to examine,
it shows me that materalize.css has a class as follows
As you can see here, this css class has highest priority and overrides primeng class. Also, it gives a hint that is :not(.browser-default) pseudoclass.
So if you give your input browser-default class, this rule won't apply.
Check this plnkr
http://plnkr.co/edit/hTa2yxNZJP2Z8p91tQ9t?p=preview
All I did is to add browser-default class to the input
<input #gb type="text" class="browser-default" pInputText size="50" placeholder="Global Filter">
For this html code, I want to select an element using CSS.
I need to select "Cvv2 required" by referencing validatedMessage. I was thinking of trying .validateMessage + .Cvv2.required .However, that didn't work. It seems "Cvv2 required" is after "CCNumber required". But I need to reference "validatedMessage" which is inside "CCNumber required". I don't even know thats the proper jargon to explain this relationship....
<div class="CCNumber required">
<label id="label">Credit Card Number:</label>
<input name="test" type="text" class="wrong">
<span class="validatedMessage">Required</span> <br>
</div>
<div class="Cvv2 required">
<a> What's this</a><br>
</div>
This is not currently possible with pure CSS.
You are looking for some kind of "contains" query, which is not available.
https://css-tricks.com/child-and-sibling-selectors/#article-header-id-4
Is it possible with thymeleaf to retrieve an input "generated" name attribute ?
I need to create a div with an id equals to an input name attribute.
Input names are generated via the th:field.
Markup:
<input type="radio" id="winterTiresInstalled" th:field="*{winterTiresInstalled.value}" />
Generated markup:
<input id="fld_winterTires" type="radio" name="vehicle.winterTiresInstalled.value" />
What I want :
<div th:id="???" />
to obtain :
<div id="vehicle.winterTiresInstalled.value" />
So, how can I retrieve the generated name attribute value "vehicle.winterTiresInstalled.value" with thymleaf ?
I could do it in js but I would prefer doing it in my template.
Thank you.
David
th-attr is best suited for this use case.
<a href="#" th:attr="data-id=${object.getId()}, data-name=${object.getName()}"/>
The above will result is something like this(haven't tested)
<a href="#" data-id="420" data-name="user-link"/>
Did the solution in javascript for now. I change the id of div after the page loads.
I would prefer do it directly in my template but can't figure out a way to do it with thymeleaf.
I want to apply css style(link is below) to my Django boolean form in my template.
https://proto.io/freebies/onoff/
I did something like this. The style is applied to the checkbox but the checkbox doesn't change status 'OFF' to 'ON'. (when I click it, it would not do anything)
Template
<div class="onoffswitch">
<span class="onoffswitch-checkbox" id="myonoffswitch" checked>{{form.mixed_load}}</span>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch'}))
Can someone tell me how to apply css style to Django form more effectively?
Thank you
You need to replace your code to look like this in your forms.py:
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch','id': 'myonoffswitch'}))
You were missing id attribute, which is used in the for attribute of label tag. See this answer for in-depth explanation what is the for tag for, and why do you need to set id on your input field.
However I can recommend you using django-widget-tweaks, which is really nice and easy to use.
Full working code:
Make sure you have css styles applied to the template file.
# template
...
<div class="onoffswitch">
{{ form.mixed_load }}
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
...
# forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch-checkbox','id': 'myonoffswitch'}))
This way is one of proposed ways to customize widget look.
Another jQuery noob question - what am I doing wrong??
I have some HTML markup rendered by ASP.NET 3.5 webforms which looks like this:
<input id="ctl01_cphContent_pnlBasicInfo_chkRC"
type="checkbox" name="ctl01$cphContent$pnlBasicInfo$chkRC" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_chkRC">Recurrent Charges</label>
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblPromoValidFor"
class="rcPromo">Validity:</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidFor"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidFor" checked="checked" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidFor">valid for</label>
</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidUntil"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidUntil" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidUntil">valid until</label>
</span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountMonths" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountMonths"
class="textbox" class="rcPromo" originalValue="" style="width:30px;" />
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblMonths" class="rcPromo"></span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountUntil" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountUntil"
class="textbox" class="rcPromo" originalValue="" style="width:150px;" />
I have a checked "chkRC" which I want to trap and use to enable/disable other UI controls
I have a number of labels, input (type=radio) and input (type=text) UI controls. These are all marked with the "rcPromo" dummy CSS class
I have a CSS class called "textbox" for the normal textbox and "textboxDisabled" for the disabled state of the textbox, in an externally referenced CSS file, that work OK (when used in server-side code, that is)
What I'm trying to accomplish in jQuery is this: when the "chkRC" checkbox is disabled, I want to disable all relevant UI controls.
My jQuery looks like this:
$(document).ready(function() {
$("#<%= chkRC.ClientID %>").click(function() {
$('.rcPromo > :label').toggleClass('dimmed');
if (this.checked) {
$('.rcPromo').removeAttr('disabled');
$('.rcPromo .textboxDisabled').addClass('textbox').removeClass('textboxDisabled');
}
else {
$('.rcPromo > :input').removeAttr('checked');
$('.rcPromo .textbox').addClass('textboxDisabled').removeClass('textbox');
$('.rcPromo').attr('disabled', true);
}
});
});
It works fine for the labels and the radiobuttons - but I just can't get it to work with the textboxes - they just stay the same all around, nothing changes (they don't get disabled and they don't change their appearance to indicate that they're disabled, either).
I don't understand this - I do see several (a few more than in the sample) textboxes, which are <input type="text"> in HTML, and they do have the class="rcPromo" and class="textbox" on them - so why doesn't jQuery find and update those?
Any ideas?
Marc
I can't think of a way to augment the css class names that are assigned to controls from the skin file (phoenix is correct, the class names need to be added in the same attribute).
I can think of a few workarounds though:
--> You can wrap all the textboxes you want disabled in a div with a given class:
<div class="disable_textbox"><asp:textbox id="".../></div>
and then disable them by selecting:
$('.disable_textbox input').attr('disabled', true);
--> You can include character strings in the ID of the textboxes you want disabled:
<asp:textbox id="txtDiscountUntil_DisableMe" ... />
and then disable them like so:
$("input[id*='DisableMe']").attr('disabled', true);
--> You can add a custom attribute to your textbox:
txtDiscountUntil.Attributes.Add("disableme", "true");
and then disable them like so:
$("input[disableme='true']").attr('disabled', true);
Your HTML markup is not the correct one.
You can't add two classes like the one in your code.
Two classes can be added like this
<input type="text" class="Class1 Class2" />
and not like
<input type="text" class="Class1" class="Class2" />
Why don't you use hasClass to check whether the element has this class set or not?
I think you have to give this in an OR condition for the two classes.