It may be a very minor thing, but a problem to me now.
I made a custom meta box on the post edit page in the WP back end, where I put two radio buttons saying "Yes" and "No". If the "Yes" radio button is selected, then on save the post will save a meta data with "Featured". By default the radio button will be on "No", because no post is Featured yet.
I checked with Inspect Element, when I opened a new post to write, my code's working well:
<input name="insert_featured_post" id="insert_featured_post" type="radio" value="yes">Yes
<input name="insert_featured_post" id="insert_featured_post" type="radio" value="no" selected="selected">No
But by default, no radio button is showing selected, not even the "No" one. ()
If I click on the "Yes" one, it's working, and the radio button is visible too. If I save the post, it's working well and saving it's value "Featured".
If I reopen a Featured Post to edit, by default the "Yes" should be highlighted, but no button is highlighted, but using Inspect Element, I saw that, the "Yes" button is highlighted.
How could I solve this UI problem?
For radio-buttons is checked attribute for default value, not selected, change selected="selected" to checked="checked".
Related
I changed the dropdown box on my product page to radio buttons using javascript, which works fine.
The problem is that now, the image does not change anymore when changing the product variation.
On the default dropdown box that woocommerce gives for variations, there was some sort of function happening, which changes the current-image attribute inside the product form element. I am trying to replicate this on my radio buttons.
My radio buttons look something like this:
<label for="green">green</label>
<input class="attached enabled" type="radio" name="colors" id="green" value="green">
I have tried to find the code where woocommerce does this inside the template folder, but I think this is happening in one of the woocommerce hooks, or in the woocommerce javascript file.
The problem: Radio Button for shipping options successfully goes to selected state which clicked, but does not show a black dot in the selected item to show to the user that it's been selected.
This is on this WooCommerce checkout page of my site. Sorry, the only way to go there is to first select an item on the store, then proceed to checkout: https://dayhikesneardenver.com/shop/
I've inspected the using google chrome inspect page and cannot for the life of me figure out if this is an issue with: 1) My Uncode theme styles, 2) WooCommerce styles, or 3) something else.
Thanks for any insight on this.
When removing the "webkit-appearance: none" property on the radio button form or changing it (webkit-appearance: checkbox) the button appears checked.
The properties
I think something else is overwritting the original style of the button.
Before
After
I have created a form where a user can pick options prior to submitting the form. I am hiding the checkboxes with display: none and am styling the <label> so that when the user clicks the label it triggers the checkbox.
I've got this to work in vanilla HTML and CSS, however when I try this in React, clicking the label doesn't do anything. ONLY if I unhide the checkbox am I able to click on the checkbox and am able to see the label styling. I want to hide the checkbox though.
Does anyone know how to hide the checkbox and still able to click the label in ReactJS?
Here is the codepen of what I am trying to build in ReactJS.
Use htmlFor instead of for in react (see react supported attributes):
<input type="checkbox" id="check3"/> Fish
<label htmlFor="check3"><span class="fa fa-check"/></label>
As it was already stated - use htmlFor and then try adding onClick event on label instead of on an input. This will add/remove checked attribute on the input itself. I assume that you already use defaultChecked attribute on your input.
I've got an jsp page. The page displays a lists of items.
These items can be
- created by clicking a link, which displays a pop up form
- edited by clicking one of the items on the list
In the form, there is a field - compensation, that's either shown or hidden based on the values of other fields.
When a new item is created, I want compensation to always be hidden.
But the problem is that depending on the state of that (compensation) field when the form was last shown, it's either shown, or hidden when the new item link is clicked.
For that field, I have the html/css as follows:
<tr id="compensation" style="display: none;"><td></td></tr>
(and then logic hides and shows the field as needed)
How can I always hide that field?
If you want the form field to always remain hidden, use:
<input type="hidden" name="compensation" value="<%= compensation %>" />
I have a web application where users can edit their profile information. This is presented as a normal web form with input fields containing the existing values:
<form action="<snipped>" method="post" accept-charset="UTF-8" id="frmEditUser">
<fieldset>
<p>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="<?= $uname ?>" size="30" title="must be unique" size="30" />
<label for="username" generated="true" class="error">*<?= form_error('username'); ?></label>
</p>
</fieldset>
</form>
There are more fields, but this simplified markup shows that I am doing nothing out of the ordinary. In both Safari and Chrome (on Windows 7) I am getting some very strange behavior when trying to select existing values in these fields:
When I select from left to right, the selected text is highlighted as expected. When I place my cursor at the end of the field and select from right to left, upon releasing the mouse button the selection is undone and the cursor sits at the end of the field again.
This problem occurs at all input fields and textareas of my application, but only in Safari and Chrome. I thought it might be a javascript problem, but the problem persists when disabling all javascript. Disabling all CSS makes the problem go away.
So the problem is in my CSS. I disabled all CSS rules that have anything to do with forms or form elements, but the problem still remains.
I was hoping there is this odd chance that somebody else encountered the same issue?
Update: The problem is even more fine-grained. It seems to only occur if I select from right to left and in this process of hovering exit the field on the left edge. Not exit as in clicking outside, exit as in hovering out of it whilst still holding the mouse button for the sake of selection.
Update II: I discovered the root of the issue. It happens when selecting from right to left and in this selection process exit the form element, not the field. I added a red border around the form element. As soon as I exit it on the left side, the selection I made is gone. If I add padding to the form element on the left, it shows that the selection remains as long as I stay inside the form element.
Still a bizarre issue that I would like to solve :(
I read your question and decided to check my site in chrome and found the same issue. Go to my site www.futurekode.com and go down to the contact form and enter your name and email and try selecting the text.
On mine, it only happens to the second input field (the email one) and not the textarea either.
I found that adding display:block to the input field fixes it in chrome but not safari :/
Very weird