Radio Buttons Won't Display Inline in IE7 - internet-explorer-7

I have set up radio buttons to display inline on a contact form. They display properly in all tested browsers except IE7, they will not display inline. They are set up using ul and li.
CSS for radio buttons
fieldset div ul {
margin: 5px 0 0 0;
list-style:none;
display:block;
float:left;
}
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:none;
}
fieldset div ul li label {
display: inline;
float: none;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
}
fieldset div ul li input {
background: none;
border: none;
display: inline;
margin: 0 5px 0 0;
padding: 0;
width: auto;
float:none;
}
HTML for form
<fieldset>
<!-- Your Name -->
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="required"/>
</div>
<!-- Email -->
<div>
<label for="emailAddress">Email</label>
<input type="text" name="emailAddress" id="emailAddress" class="required email"/>
</div>
<!-- Phone -->
<div>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<!-- Contact Time -->
<div>
<label for="contactTime">Best Time to Contact</label>
<ul>
<li><input type="radio" name="contactTime" value="morning" /><label for="morning">Morning</label></li>
<li><input type="radio" name="contactTime" value="day" /><label for="day">Day</label></li>
<li><input type="radio" name="contactTime" value="evening" /><label for="evening">Evening</label></li>
</ul>
</div>
<!-- Contact Method -->
<div>
<label for="contactMethod" style="margin:15px 0 0 0;">Best Method of Contact</label>
<ul>
<li><input type="radio" name="contactMethod" value="phone" /><label for="phone">Phone</label></li>
<li><input type="radio" name="contactMethod" value="email" /><label for="email">Email</label></li>
</ul>
</div>
<!-- Coments -->
<div class="floatLeft" style="margin:10px 0 0 0;">
<label for="mess">Message</label>
<textarea name="mess" id="mess" rows="15" cols="5"></textarea>
</div>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Contact Us" class="button"/>
</div>
</fieldset>
<input name="url" type="hidden" value="" class="noDisplay"/>

Try setting them to float left -
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:left;
}
Shouldn't affect any other browsers, and should sort out IE7. Don't forget to clear: left; after them though.

Related

Within a radio-group how does one target via (a) css-selector(s) unchecked controls while there is also a checked/focused control amongst the group?

Is it possible within a radio-group to change the style of a radio button that has not been checked after the other button has been checked?
I have 5 radio boxes. I gave a custom style to the checked ones with the :checked pseudo class. But when a control is checked I want the others to be less visible. I used the negation :not(:checked), but in case none of the controls is checked, all of them are less visible. I just want the unchecked controls of a radio-group to be less visible after another control of this group has been checked.
How can I do this with javascript or css?
The OP might make use of the :focus-within css pseudo class like demonstrated with the below provided example.
/*
fieldset:focus-within span {
opacity: .3;
}
fieldset:focus-within [type="radio"]:focus + span {
opacity: 1;
}
*/
fieldset:focus-within [type="radio"]:not(:checked) + span {
opacity: .3;
}
<form>
<fieldset>
<legend>1st radio group</legend>
<label>
<input type="radio" name="foo-bar"/>
<span>Foo</span>
</label>
<label>
<input type="radio" name="foo-bar" checked/>
<span>Bar</span>
</label>
<label>
<input type="radio" name="foo-bar"/>
<span>Baz</span>
</label>
</fieldset>
<fieldset>
<legend>2nd radio group</legend>
<label>
<input type="radio" name="bizz-buzz"/>
<span>Bizz</span>
</label>
<label>
<input type="radio" name="bizz-buzz"/>
<span>Booz</span>
</label>
<label>
<input type="radio" name="bizz-buzz" checked/>
<span>Buzz</span>
</label>
</fieldset>
</form>
The next provided example applies fixes and improvements (e.g. tab navigable, valid markup, no empty / or unnecessary decorating span elements) to the OP's codepen code.
body { zoom: .9; }
fieldset { margin: 0 0 5px 0; padding: 0; border: none; }
.insurance-container [type="radio"] {
/*
do not apply ... display: none; ...
for it will prevent tab navigation.
*/
position: absolute;
left: -40px;
}
.insurance-container label {
position: relative;
}
.insurance-container .insurance-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
border: 1px solid #e9e9e9;
padding: 6px;
}
.insurance-container .insurance-item::after {
/*
- do not rely on empty elements for visually
drawing a replacement of a form-control.
- use one of the pseudo elements like `::after`
or `::before` for such purpose.
*/
content: "";
height: 16px;
width: 16px;
background-color: #dddddd;
border: 1px solid #dddddd;
border-radius: 50%;
transition: 500ms all;
-webkit-transition: 500ms all;
-moz-transition: 500ms all;
-ms-transition: 500ms all;
-o-transition: 500ms all;
}
.insurance-container [type="radio"]:checked + .insurance-item::after {
border-color: #0078d6;
border-width: 8px;
}
.insurance-container [type="radio"]:checked + .insurance-item {
border: 1px solid #0078d6;
background-color: #f8f8f8;
}
.insurance-container:focus-within [type="radio"]:not(:checked) + .insurance-item {
/* make use of the `:focus-within` pseudo class */
opacity: 0.5;
}
<fieldset class="insurance-container">
<legend>first radio group</legend>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
</fieldset>
<fieldset class="insurance-container">
<legend>second radio group</legend>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
</fieldset>

ng-show is not working for one of the similar input fields

I have a multistep form. I have ng-show which depends whether or not the input[type="text"] is empty.
Now, it works for one section of the form, but doesn't work for another section of the form.
<div id="wrapper-signup">
<h1>Borrower Signup</h1>
<p>Register and start borrowing money online.</p>
<div class="element-wrap">
<label>NAME<br>
<div class="name-wrap">
<input type="text" ng-model="newuser.firstname" name="firstname" id="firstname" value="" placeholder="First Name">
<input type="text" ng-model="newuser.lastname" name="lastname" id="lastname" value="" placeholder="Last Name">
</div>
<p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.firstname.$dirty && newuser.firstname.length === 0">Firstname required</p>
<p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.lastname.$dirty && newuser.lastname.length === 0">Lastname required</p>
</label><br>
</div>
<div class="element-wrap">
<label for="email">EMAIL
<div class="email-num-wrap">
<span class="awesome-icon"><i class="fa fa-envelope-o fa-lg email-icon" aria-hidden="true"></i></span><input type="email" id="email" ng-model="newuser.email" name="email" value="" placeholder="Email ID" required>
</div>
<p class="error" style="color: red; font-size: 0.9em;" ng-show="signForm.email.$invalid && signForm.email.$dirty">Enter a valid email</p>
</label>
</div>
<div class="element-wrap">
<label>MOBILE NUMBER
<div class="email-num-wrap">
<span class="awesome-icon"><i class="fa fa-mobile fa-lg mobile-icon" aria-hidden="true"></i></span><input type="number" id="number" ng-model="newuser.number" name="mobile" ng-minlength="10" ng-maxlength ="10" value="" placeholder="Enter 10 digit number" required>
</div>
<p class="error" style="color: red; font-size: 1em;" ng-show="signForm.mobile.$dirty && (signForm.mobile.$error.minlength || singForm.mobile.$error.maxlength)">Please enter a 10 digit number</p>
</label>
</div>
<div class="clear">
</div>
<div class="checkbox-wrap">
<input type="checkbox" class="checkbox" name="terms" value="" ng-model="tcheck" required><p class="checkbox-text">I have read and agree to the Privacy Policy, Terms of Use and consent to Electronic Disclosures.</p>
</div>
<div class="checkbox-wrap">
<input type="checkbox" class="checkbox" name="condiiton" value="" ng-model="ccheck" required><p class="checkbox-text">I authorize RupaiyaExchange to share my details with other Financial Institutions for credit card check and faster processing of loan.</p>
</div>
<a ui-sref='index.otp' ng-show="signForm.email.$valid && tcheck && ccheck && signForm.mobile.$valid && newuser.firstname.length !== 0 && newuser.lastname.length !== 0 " class="submit-signup">SIGNUP</a>
</div>
It works for above view, but doesn't work for below view
<div id="wrapper-identity">
<p>Please enter the following details</p>
<div class="aadhar-wrap">
<label for="aadhar">Aadhar Card</label><br>
<input type="text" name="aadhar" ng-model="newuser.aadhar" id="aadharN" value="" placeholder="Enter Aadhar Card No" required>
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && newuser.aadhar.length === 0">Aadhar number required</p>
</div>
<div class="pan-wrap">
<label for="pan">PAN</label><br>
<input type="text" name="pan" ng-model="newuser.pan" value="" id="panN" placeholder="Enter PAN No" required>
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && newuser.pan.length === 0">PAN number required</p>
</div>
<input type="submit" ng-hide="signForm.aadhar.$dirty && newuser.pan.length === 0 && signForm.pan.$dirty && newuser.aadhar.length === 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">
</div>
I don't want to populate this place, since the css file is very large.
Here's the plunker https://plnkr.co/edit/PEhGJ50XGjYxQcetTxNV?p=preview
Do not check for length rather check for the value newuser.pan
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && !newuser.aadhar">Aadhar number required</p>
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && !newuser.pan">PAN number required</p>
Try to investigate the values returned by each condition in each situation.
For example, try to use this in your partial:
<p>
DEBUG: {{ signForm.aadhar.$dirty }} && {{ newuser.pan.length === 0 }} && {{ signForm.pan.$dirty }} && {{ newuser.aadhar.length === 0 }}
</p>
The mistake is in the ng-hide expression. You should use ng-show, also inverting the length controls:
<input type="submit" ng-show="signForm.aadhar.$dirty && newuser.pan.length != 0 && signForm.pan.$dirty && newuser.aadhar.length != 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">
It controls if both of the inputs have been changed an there is some value in them. If the condition holds, Submit button appears, otherwise it's hidden.

Angular - ng-hide animation doesn't fully hide

The repo is here: https://github.com/sjzerneri/mad-lib-project/ and the live preview is here: http://sjzerneri.github.io/mad-lib-project/
I have an ng-hide in my html that operates correctly before I start trying to adjust the css to animate it.
When I try to animate it with ng-hide-add and ng-hide-remove, the section fades out, and then promptly reappears instead of hiding. Why doesn't the section stay hidden?
Here's my HTML for the section:
<section class="word-inputs" ng-hide="hideForm && myForm.$valid">
<h3> Provide The Following Words:</h3>
<div class="all-words">
<form name="myForm" ng-submit="submitted=true;submit()">
<div class="word-selection">
<input type="text" ng-model="name" placeholder="name" required>
<input type="text" ng-model="jobtitle" placeholder="job title" required>
<input type="text" ng-model="tedioustask" placeholder="tedious task" required>
</div>
<div class="word-selection">
<input type="text" ng-model="dirtytask" placeholder="dirty task" required>
<input type="text" ng-model="celebrity" placeholder="celebrity" required>
<input type="text" ng-model="uselessskill" placeholder="useless skill" required>
</div>
<div class="word-selection">
<input type="text" ng-model="obnoxiousceleb" placeholder="obnoxious celeb" required>
<input type="number" ng-model="hugenumber" placeholder="huge number" required>
<input type="text" ng-model="adjective" placeholder="adjective" required>
</div>
<div class="hor-line"> </div>
<div class="submission">
<button type="submit">Generate Mad Lib</button>
</div>
</form>
</div>
</section>
Here's my css:
.word-inputs {
padding-top: 2rem;
margin: 0 auto;
width: 90%;
text-align: center;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
display: block!important;
}
.word-inputs.ng-hide-add.ng-hide-add-active,
.word-inputs.ng-hide-remove {
opacity: 0;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
Add an extra div for your animation class
like
<section ng-hide="hideForm && myForm.$valid">
<div class="word-inputs" >
<h3> Provide The Following Words:</h3>
.....
</div>
</section>

How to apply operation for the first ng-model of same model name

I have 2 radio buttons of the same ng-model now I want to make textbox disabling and enabling on based on first radio button clicking. How to get the individual status of first radio button to enable my text box
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng- disabled="!remind.daily">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays">
<p id="type-recurrence">Every WeekDays</p>
</div>
i have created a plunker:https://plnkr.co/edit/6zrIOUwRh7IczufnMGa6?p=preview
html:
<body ng-controller="radioController">
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every" ng-click="getRadioValue()">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!flag">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays" ng-click="getRadioValue()">
<p id="type-recurrence">Every WeekDays</p>
</div>
</body>
js:
var APP = angular.module("APP",[]);
APP.controller("radioController", function($scope){
$scope.remind = {};
$scope.getRadioValue = function(){
if($scope.remind.daily == "Every"){
$scope.flag = true;
}
else {
$scope.flag = false;
}
}
})
hope it works!
First of all the ng-model (confirmed) set for the radio button should have a boolean value, and then you can directly use that model for ng-disabled directive of your text field.
//controller
function Controller($scope){
$scope.confirmed=true;
...
}
//html code
<div ng-app>
<div ng-controller="Controller">
<input type="checkbox" ng-model="confirmed" ng-change="change()"/>
<div>{{confirmed}}</div>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!confirmed">
</div>
</div>
Live Demo # JsFiddle

IE7 overflow:auto bug [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Does anybody knows where is the problem here http://jsfiddle.net/jDNFU/ in IE7? I've already tryed everything I could do.
Can't you use something like this? What are you trying to do? What does it need to look like?
<ul id="mytest">
<li><input type="text" value="" name="test1" /></li>
<li><input type="text" value="" name="test2" /></li>
<li><input type="text" value="" name="test3" /></li>
<li><input type="text" value="" name="test4" /></li>
<li><input type="text" value="" name="test5" /></li>
<li><input type="text" value="" name="test6" /></li>
</ul>
#mytest {list-style:none; width:254px; max-height:328px; overflow-y:auto; display:block;}
#mytest li {position:relative; display:inline; zoom:1; height:25px;}
#mytest input {position:absolute;}
EDIT:
Since you fixed it yourself and all, this is how I would've slice it. Because you don't need to resize your inputs, you can take just full background images, no?
.clr { clear: both; }
#myform { width: 800px; }
#myform fieldset { display: block; float: left; margin: 0; padding: 0; border: medium none; }
#myform input.txt { display: block; width: 200px; border: medium none; background: transparent url('bg_input.jpg') no-repeat scroll 0 0; height: 30px; text-indent: 2px; }
#myform label { float: left; width: 120px; height: 30px; }
#myform textarea { display: block; border: medium none; height: 180px; background: transparent url('bg_textarea_large.jpg') no-repeat scroll 0 0 !important; resize: none; }
#myform .large { width: 378px; background: transparent url('bg_input_large.jpg') no-repeat scroll 0 0; }
#myform .button { }
#myform fieldset.addfriends { width: 300px; }
#myform fieldset.personal { width: 500px; }
<form id="myform">
<fieldset class="addfriends">
<p>Enter at least 3 email addresses of your friends</p>
<input type="text" class="txt" />
<br />
<input type="text" class="txt" />
<br />
<input type="text" class="txt" />
</fieldset>
<fieldset class="personal">
<label for="name">Your name:</label><input type="text" id="name" class="txt" />
<br />
<label for="email">Your e-mail:</label><input type="text" id="email" class="txt" />
<br />
<label for="subject">Subject:</label><input type="text" id="subject" class="txt large" value="You'll love it!" />
<br />
<label for="message">Message:</label><textarea id="message" class="large"></textarea>
<br />
<input type="submit" class="button" value="Send" />
</fieldset>
<div class="clr"></div>
</form>

Resources