I'm using a paid template, and I'm trying to apply it to the project (it's working, but not good to the eye)
This is the code
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Outside vue</label>
<div id="vm_settings">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside VM</label>
<template v-if="1">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside if</label>
</template>
<template v-for="setting in settings">
<div>
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside for</label>
</div>
</template>
<button v-on:click="saveSettings">Save</button>
</div>
This is how it is outputed to the browser checkbox not having the styles it should
Any way to fix it?
Customized checkboxes are not merely styled with CSS, they are proxied: the real checkbox widget is hidden and other elements are inserted and styled in their place.
As such, there must be some call that examines the HTML and does the widget replacement. You need that to happen to each element that gets inserted. You do that by writing a wrapper component. Typically, in its mounted hook, you would apply the initialization of the widget to this.$el (or something inside it).
Related
So I'm trying to add some additional CSS on Wordpress and override the color of this form button but nothings happening. Am I entering the right code in here?
When I inspect the button this comes up...
<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-1527" method="post" data-id="1527" data-name="Get Started"><div class="mc4wp-form-fields"><div class="input-group">
<div class="input-icon"><i class="far fa-paper-plane"></i></div>
<input type="email" placeholder="Your email address" class="form-control" name="email" data-error="e-mail field is required" required="">
<button type="submit" value="Subscribe" class="item-btn">Subscribe</button>
</div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1635448917"><input type="hidden" name="_mc4wp_form_id" value="1527"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1"><div class="mc4wp-response"></div></form>
The reason why I've tried button.item-btn::before is because it shows this in the inspector
Try adding the CSS styling as inline with the button element.
Inline styling will override the styling from an external css file.
You can also try using the id selector id=mc4wp-form-1 in your form element to increase the css style specificity to help overwrite the default.
Your selector minus the pseudo-element should do the job.
Maybe there is another background-color definition for buttons in your stylesheets with higher specificity.
You could try raising the specificity of your selector like this:
#mc4wp-form-1 button.item-btn {
background-color: mycolor;
}
About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.
my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:
https://codepen.io/anon/pen/bWaYzJ
<label> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
now if i detached the plugin from element then button works again.
change your outer label to div seems to solve your problem like this codepen
<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
And make your javascript:
$(document).ready(function(){
$('#exampleFileUpload').onClick({
MultiFile();
});
});
First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).
Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):
<div> Uploads
<label class="button">Upload File
<input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
</label>
</div>
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
To hide (but retain the functionality) the ugly default input type file button for file dialog I used the following mechanism:
HTML:
<label for="file-input">
<i class="fa fa-edit"></i> <!-- acts as file input on click-->
</label>
<input type="file" id="file-input" />
CSS:
#file-input {
display: none; //hide the file input
}
This is working expectedly: I click on the font awesome edit icon and the file dialog pops up.
However, when I use a button it stops working. I get no file dialog on clicking the button:
<label for="file-input">
<button type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
The Label represents a "caption" for an item in a user interface.
The reason why your button isn't working is because a button isn't considered a valid "caption" for a "control" element because it is a "control" element.
(see: https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)
If you use an image or a piece of text inside the label it will work, because that will be considered a caption (this is why your first attempt worked). If you want to create a custom button you can use some text or an image tag otherwise you'll need some javascript.
Edit: maybe this page can be of help: http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/
The javascript they use shows the user what file (s)he has selected
Just change the jQuery code and HTML tag will be as it is.
<label for="file-input">
<button class="upload_file" type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
Jquery Code:
jquery("[for=file-input] .upload_file").on("click", function(){
jQuery("#file-input").trigger("click");
})
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.