Two really weird form CSS form element behaviors

a_gunslinger · ‎03-19-2018

At ucstroke.com on a mobile phone my checkboxes are behaving oddly. PC or laptop version fine.

In phone responsive mode the checkbox selected shows 2 checkmark...

And radio buttons show one button and one vertical line. The line is a button, select it and it becomes a button and the other one becomes just a line.

Im baffled.

Adam7 · ‎03-20-2018

It looks like our default mobile styling is overriding your custom form. Add this to an Embed Code element directly above your form:

<style>
	@media screen and (max-width: 767px)
	{
		input[type="checkbox"]
		{
			-webkit-appearance: checkbox !important;
		}
	}
</style>

a_gunslinger · ‎03-20-2018

Thanks Adam. Didnt work. But I probably do have multiple conflicting code. Im embedding data from a Caspio database that also contains its own CSS code. They recommend we insert thier Responsive Code into our web forms via header and footer code wrapped around thier form code. They also ask us to make sure we add the following to the Header on the Weebly page.

Weebly Header:

<meta name="viewport" content="width=device-width, initial-scale=1">
<!DOCTYPE html>

Involves putting this in the <header>:

<!-- Responsive Code Begin -->
<style>
/* Change max-width to what size you want the form to change at */
 @media (max-width: 768px) {
     * {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
    }
     #datapage-form table {
         width: 100% !important;
         margin: 0px !important;
    }
     #datapage-form td {
         display: block;
    }
     #datapage-form input, #datapage-form select, #datapage-form textarea {
         width: 100% !important;
    }
     #datapage-form input[type=radio], #datapage-form input[type=checkbox] {
         width: auto !important;
    }
     #datapage-form img[alt~="Calendar"] {
         position: relative;
         left: -19px;
         top: 4px;
    }
     #datapage-form img[alt~="Audio"] {
         position: relative;
         left: -19px;
         top: 4px;
    }
     #datapage-form img[alt~="Download"] {
         position: relative;
         left: -46px;
         top: 4px;
    }
     #datapage-form input + span > a {
         display: inline-block;
         width: 1px;
         overflow: visible;
         position: relative;
         left: -8px;
    }
     #datapage-form input + a[href="#"], #datapage-form input + a[href="#"] + a {
         display: inline-block;
         width: 1px;
         overflow: visible;
         position: relative;
         left: -8px;
    }
}
</style>
 
<div id="datapage-form">
<!-- Responsive Code End -->

Then this in the <footer>

<!-- Responsive Code Begin -->
</div>
<!-- Responsive Code End -->

As soon as I removed the Caspio responsive code from header and footer the my radio button and check boxes were happy again. Im getting confused on which cimbination of setting works best. Im going to check with Caspio as to why thier Responsive Code would conflict with the weebly Template code (Sights and Sounds).

From a CSS perspective, does the Caspio CSS brought in via the API embed insert its code into the Weebly CSS or does it probaby just come in alongside the Weebly CSS and they do battle?

Adam7 · ‎03-20-2018

I'm guessing Caspio's CSS is being applied after Weebly's, though it depends at what point during page render it adds it and where in all the code it does it. Sounds like you're on the right path to getting it fixed, though!