Guys I have a very simple but complex problem in the same way.
I'm building my custom wordpress theme, using the MDB framework (Bootstrap material design).
And when I go to implement my form via wordpress cf7, the two styles conflict. Generating a problem that the checkbox is displayed but cannot be used.
I have been around a lot in google but I have not found any resolution.
How can I solve this?
Checkbox in mdb:
<!-- Default checked -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="defaultChecked2" checked>
<label class="custom-control-label" for="defaultChecked2">Default checked</label>
</div>
Checkbox in cf7:
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="defaultChecked2">Default checked</label>
[checkbox checkbox-887 id:defaultChecked2 class:custom-control-input]
</div>
It would be hard to troubleshoot without a link to the malfunctioning checkbox.
However if I were to take a wild guess you could try this CSS:
input[type="checkbox"] {
-webkit-appearance: checkbox;
}
Add that CSS to your theme's CSS. And if it fails send us a link.
Related
Let's say I have HTML like this:
...
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="invalidCheck">
<label class="form-check-label" for="invalidCheck">
Agree to something
</label>
</div>
<div class="invalid-feedback">
I am outside of `form-check`!
</div>
</div>
...
I want to force to show the <div class="invalid-feedback">... without using JavaScript (want to use Bootstrap CSS only). And I know I can use CSS classes like was-validated or is-invalid, but invalid-feedback is outside of form-check. Is there an easy and simple way to show invalid-feedback by adding Bootstrap related CSS classes?
I found one solution:
<div class="invalid-feedback d-block">
Now I am visible!
</div>
But I feel like it's a hacky solution. Please advise!
Use display classes to display it manually for example d-block
use it like so
<div class="valid-feedback d-block">
or
<div class="invalid-feedback d-block">
Find more in documentation
There are better ways.
1)
Look into a was-validated class, that you can set on the form like so
<form action="..." class="was-validated" method="POST" novalidate>
When set on the form it displays validation feedback and also colorcodes the input field.
Just add it conditionally on your form, when validation failed on the server side.
2)
Or you can use some JavaScript to be in control of what is displayed. You can add this class dynamically
$('form').addClass('was-validated');
and you can also dynamically check if the form is valid like so
if ($('form').checkValidity()) {...
I am using jquery steps and icheck with bootstrap. The problem I am having is with my jquery steps I can not get the icheck radio buttons to work. In the picture below when you try to change the radio buttons in the table nothing happens. But on the bottom of the picture I am using the same exact code and when you hover or select a radio button it is working perfect. I am thinking the css for the jquery steps has some sort of code that just appearing to make the radio buttons just look like there not selected. Is there a way to make sure my radio button are forced on top of any background image or use !important so that there functionality can be used correctly?
$(document).ready(function() {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<div class="i-checks">
<label>
<input type="radio" value="option1" name="a"> <i></i> Option one</label>
</div>
<div class="i-checks">
<label>
<input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked</label>
</div>
<div class="i-checks">
<label>
<input type="radio" name="a" value="option2"> <i></i> Option three checked and disabled</label>
</div>
<div class="i-checks">
<label>
<input type="radio" name="a"> <i></i> Option four disabled</label>
</div>
js
https://jsfiddle.net/yf1q3scc/5/
In my fiddle I could not get the example exactly correct how I have it on mine. But you will notice that the radio buttons are still functionable on the bottom of the fiddle when you hover over or select one of them but not where I am using jquery steps. Any help with this would be greatly appreciated!
I had this fiddle with Bootstrap, jQuery Steps and iCheck working together https://jsfiddle.net/rpw2Lx41/
<div id="example-basic">
<h3>Step 1</h3>
<section>
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>
</section>
<h3>Step 2</h3>
<section>
<p>Simple text.</p>
</section>
</div>
Of course my example it's a lot simple than yours, but we can say it is not a bug or an incompatibility problem like you're thinking this could be.
Besides, i realize that your code has a lot of markup errors. I'm sure if you rewrite your code, doing it step by step, and paying a little more attention you will be able to accomplish the expected result.
After pulling my hair out quite a bit this week, finally found it:
https://jsfiddle.net/xx9jr1z3/ shows the issue.
$('input').iCheck({
//settings
});
before $(...).steps(...) causes the iCheck inputs to not be clickable. Reversing them (steps before iCheck) corrects it.
I am seeing an issue when viewing a website in IE8 (but which works fine when using the emulation mode in dev tools in IE 11).
In modern browsers I see what I would expect:
But in IE, I see the following:
I've added the html5 shim and respond,.js as suggested in the docs, and I've tried wrapping the controls in divs to manually size them, but I end up with gaps between the inputs that look pretty bad. Is there something obvious that I'm doing wrong here?
<form class="form-horizontal" role="form" style="max-width: 500px">
...
<div class="form-group">
<label class="control-label col-sm-2">Phone</label>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="SearchMethod" value="2" class="radio-inline" />
</span>
<input type="text" id="phone" class="form-control" placeholder="Phone" />
<input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext" />
</div>
</div>
Your input group is invalid since it has two text input form-controls. Per the docs:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
So you'll need to either hack together some custom styles, or restructure your form.
Ok, im NOT a desginer and my CSS skills suck.
So I have a styling issue with buttons\submit
On most of my pages im using jquery mobile and jquery UI.
The problem is I want to apply jquery mobile style to particular buttons\submit and not jquery UI.
So by default jquery UI is applying its style to the button, but I want to use jquery mobile.
<input type="submit" value="Save">
how to tell that submit to use jquery mobile css? (I still need to use both styles on the page, just want to tell the button to use the mobile style)
You must read the documentation for buttons.
As per the documentation, all following code will generate jQuery mobile style button
Anchor
<form>
<button>Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
If it is not working, the reference to the jquery-UI would be the culprit.
Have your tried:
<input type="button" value="Input">
If it does not work, you might have an issue somewhere else on the page.
I'm using jquery mobile for my project. It automatically converts all radio buttons in its inputs with its styles. The major problem is that in different situations i have different number of buttons (it depends on user) with its different width and i need it every time center.
<div data-role="fieldcontain" id="inline" >
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
{section name=i loop=$data['input'] start=0}
<input name="position" id="radio{$smarty.section.i.index}" value="{$data['input'][i]}" type="radio" />
<label for="radio{$smarty.section.i.index}">
{$data['input'][i]}
</label>
{/section}
</fieldset>
</div>
As you see each button has his size (for example Up and Zoom In are different). As i said before - i don't know what buttons will be for each users - it depends on their own settings, so i need somehow automatize process of centering it - is some ideas?
You could try it with <a> instead of <input> as done in the documentation, if at all possible in your situation.