We Keep Coding

Overlaping text with radio buttons in bootstrap col

I have a radio button with .html added to it. But the result it's a overlap text with the radio button.
Overlapping Radio buttons with text.
Also as you can see the text goes downward instead of covering all of the bootstrap col-4 , col-4, col-4.
function addQAs() {
randQuestion = Math.floor(Math.random() * library.length); //this is a nuber, dont forget!
console.log(randQuestion);
$("#question").html(library[randQuestion].question);
$("#answer1").html(library[randQuestion].answer[0]);
$("#answer2").html(library[randQuestion].answer[1]);
$("#answer3").html(library[randQuestion].answer[2]);
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-4">
<input type="radio" id="answer1" value="answer1" index="0">
<label for="answer1"></label>
</div>
<div class="col-4">
<input type="radio" id="answer2" value="answer2" index="1">
<label for="answer2"></label>
</div>
<div class="col-4">
<input type="radio" id="answer3" value="answer3" index="2">
<label for="answer3"></label>
</div>
</div>
</form>
</div>
I havent tried any CSS for this issue.
Thanks

try to add this css
.col-4 {
position: relative;
}
input[type="radio"] {
position: absolute;
left: -15px; // set as per your requirement
top: 5px; // set as per your requirement
}

Jquery validation engine wrong position

I have been facing this issue. I tried many things but no one worked. My validation error on this page always visible on left side. This is my vaildation engine jquery. Please help.
$("#register_form").validationEngine({
showOneMessage: true,
scroll : false,
maxErrorsPerField: 1,
promptPosition: "bottomLeft",
updatePromptsPosition: true,
autoPositionUpdate: true,
});
});
HTML
This is my form.
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="register_form">
<div class="col-100">
<input type="text" class=" twidh validate[required, minSize[2]] " maxlength="60" placeholder="Your Name" name="name" id="rname" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[email]]" maxlength="100" placeholder="Your Email Address" name="remail" id="remail" onblur="validateEmail()" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="password" class=" twidh validate[required, minSize[6]]" placeholder="Your Password" name="password" id="rpassword" />
<span class="errroes" id="rpwd"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[onlyNumber] ,minSize[10],maxSize[10]]" maxlength="10" maxlength="10" placeholder="Enter Mobile Number" name="mobile" id="phone" />
</div>
<div class="col-100">
<div class="text-hea" id="gender">Gender</div>
<div class="twidh">
<div class="names">
<input type="radio" class="radioo" value="M" id="male" name="sex" /> Male </div>
<div class="names">
<input type="radio" class="radioo" value="F" id="female" name="sex" checked="checked" /> Female
</div>
</div>
</div>
</div>
<div class="link" style="text-align:left !important"> By clicking Register, you agree to <strong>Terms of Use</strong> and <strong>Privacy Policy.</strong>
</div>
<div class="col-100">
<div class="col-md-2">
<input type="submit" class="ss1 st" name="register" value="Register Now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

I found your HTML on your website. The problem is caused by a style position: relative on your .link class. You have applied it on your OR block, just above the form.
You can fix this quite easily by apply another position: relative style on your form element. So it would become like this:
<form action="/sregister.php" method="post" id="register_form" style="
position: relative;
">
I just tested this on your live website, and it works pretty well.

Checked issue on your site. You are using below inline styling.
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px;
but in this case "left" is not recognized as already this property is given important in strap.css.
check below code in strap.css
.formError {
left: 30px !important;
}
Now you can update your inline styling as
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px !important;
It will work.

Error displaying image preview in angularjs

I'm working with ng-file-upload to work with images. In yes I have two options to upload an image for each one. When displaying the first image is displayed in my first ng-model but when I display my second image in my second ng-model it is not shown but it is over write my first ng-model. Then I share my html view:
<div class="row">
<div class="col s12 m12 hide-on-med-and-down">
<div class="image-upload">
<label for="file-input">
<i class="material-icons left teal-text">photo_camera</i>
Agrega imagen 1...
</label>
<input
id="file-input"
type="file"
ngf-select
ng-model="data.imagen_promocion"
name="file"
ngf-pattern="'image/*'"
accept="image/*"
ngf-max-size="3MB"
/>
</div>
<img ngf-thumbnail="data.imagen_promocion || '/thumb.jpg'"/>
</div>
<div class="col s12 m12 hide-on-med-and-down">
<div class="image-upload">
<label for="file-input">
<i class="material-icons left teal-text">photo_camera</i>
Agrega imagen 2...
</label>
<input
id="file-input"
type="file"
ngf-select
ng-model="data.imagen_promocion2"
name="file"
ngf-pattern="'image/*'"
accept="image/*"
ngf-max-size="3MB"
/>
</div>
<img ngf-thumbnail="data.imagen_promocion2 || '/thumb.jpg'"/>
</div>
</div>
I have seen my error is in css:
.image-upload > input{
display: none;
}
.image-upload i{
font-size: 30px;
cursor: pointer;
}
When I delete this css style it works fine. this is my jsfiddle
How can I fix this error? I thank you in advance

Although your fiddle works fine, there is a problem with the label usage:
<label for="file-input">
<input id="file-input">
pair should be unique, you shouldn't write double pairs. It will cause some problem there.
Change the label input to below styles, i think it will solve the problem:
<label for="file-input-1"></label>
<input id="file-input-1"></input>
<label for="file-input-2"></label>
<input id="file-input-2"></input>
It seems fine when i tried on your fiddle:

Logging into website failure

I did look into tutorials obviously but the html I have is different and I tried a lot of things (the code I will post is the last thing I tried). I will provide you with the html too.
WebBrowser1.Navigate("THE_WEBSITE")
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("onfocus", "javascript:$(this).val('ID_GOES_HERE');$('#wrong_password_board').css('display','none');")
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "PASS_PROBABLY_GOES_HERE")
WebBrowser1.Document.GetElementById("div_123").SetAttribute("onpress", "rockLogin($('#loginform'))")'
And this is the HTML (I think it's everything that matters, the website is
www.microvolts.com anyway)
<form id="loginform" action="/Account/login" method="POST">
<div class="left1"> </div>
<div class="login_info1">
<div class="icon_rh">
</div>
<div class="floatleft" style="margin-bottom: 2px;">
<input id="tbtLoginID" width="110px" maxlength="25" height="17px" class="text_box" value="Login ID" tabindex="1" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); ">
</div>
<div class="floatleft">
<div id="loginLoginIdDiv1">
<input type="text" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); " value="Password" tabindex="2" class="text_box" name="passwordFaked" size="20" width="110px" style="display: none;">
<div id="loginPasswordDiv2" style="">
<input id="tbtPassword" width="110px" type="password" tabindex="2" maxlength="25" height="17px" class="text_box">
</div>
</div>
<div id="wrong_password_board" class="wrong_password wrong_passwordid ErrorMsg" style="display: none;">
<div class="topleft"></div>
<div class="topmiddle">Invalid Login ID and/or Password.</div>
<div class="topright"></div>
</div>
</div>
</div>
<div class="login_info2">
<div class="row1">
<span class="left"></span><span class="middle">Login</span><span class="right"></span>
</div>
<div class="row1" style="width: 80px">
<span style="float: left; margin-right: 3px;">
<div id="div_123" class="toplogin RockButton" style="width: 60px; height: 19px;">
<div id="123" onclick="rockLogin($('#loginform'))" style="width: 100%; height: 100%;" class="rbtdiv">
<div class="text">
Login</div>
</div>
<div class="rbtmask" style="z-index: 100; position: absolute; display: none; background: grey;
opacity: 0.2; cursor: default; width: 100%; height: 100%; top: 0px; left: 0px;">
</div>
</div>
</span>
<div class="btn_question forgetPasswordButton ">
<div id="ifClickThisBtn" style=" display:none;" data-ifclick="false"></div>
</div>
<div id="forgetPassword" class="tip_forgot_password">
<div class="ajaxLoadingMask">
<img src="/images/ajaxLoading2.gif" style="margin-left: 150px; margin-top: 9px; position: absolute; display: block;" class="ajaxLoading" alt="">
</div>
<div class="lefttfp">
<div class="l1l"></div>
<div class="l1r"></div>
</div>
<div class="middletfp">
<div class="closetfp"></div>
<div class="title">Forgot Password or Login ID</div>
<div class="email_form">
<input type="text" value="Enter registered email" name="emailAddress" class="password_recovery_textbox">
<div class="wbtn1 formSubmitBtn" onclick="javascript:forgetPassword();return false;" style="float: left; margin: 2px 0px 0px 5px; cursor: pointer;">
<span class="wbtn1_left"></span><span class="wbtn1_middle" style="padding-left: 10px;
padding-right: 10px;">Submit</span><span class="wbtn1_right"></span></div>
<div class="wrong_email"></div>
</div>
<div id="invalideEmailAddress" style="display:none;"> Please enter a valid email address.</div>
</div>
<div class="righttfp"></div>
</div>
</div>
</div>
<div class="right1"> </div>
</form>
The login form has javascript elements so I figured I could just write it with the right login into it, but nah.
When I run it I get an error from the first line: System.NullRefferenceException, all my codes gave that.
I have to admit I probably didn't do all the research I could but I need to do this fast and this is the last thing that may help me.

As already mention above in the comment's by #Visual Vincent you need to add the DocumentCompleted event. This event is raised when the document has finished loading.
Private docCompleted As Boolean = False 'put this at class level
Private Sub WebBrowser1_DocumentCompleted(sender As Object, e As WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
If docCompleted Then Exit Sub
If WebBrowser1.Document.GetElementById("tbtLoginID") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("value", "YOURUSERNAME")
End If
If WebBrowser1.Document.GetElementById("tbtPassword") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "YOURPASSWORD")
End If
If WebBrowser1.Document.GetElementById("div_123") IsNot Nothing Then
WebBrowser1.Document.InvokeScript("rockLogin")
End If
docCompleted = True
End Sub
The code above check's each element to ensure it not nothing and if it's not then we can set the attributes we would need. Also we can InvokeScript of the document for example: rockLogin, this script does the login. The docCompleted prevents the page from doing postback's as when it's finished and you set the attributes it want's to reload the page etc... it's not required but it prevented multiple postbacks when I tried.
On another note you didn't mention if you were doing this in a click event or what, if so set the docCompleted to false before navigating to your page so the variable is reset each time...
Note: Tried and Tested - please don't post your login credentials either on a public forum...

jQuery hover effect on current element only

I have a list of Divs which contain an image. When I hover over a div, I want the image to move up (I'm doing this by altering the image css on hover). The issue I'm having is that when I hover over one div, all the images in all divs are changing. Instead, I want the hover effect just to take place on the div I'm hovering over. Here is my current jQuery:
jQuery(document).ready(function($){
screenshotHeight = $('.l_admin-product-screenshot img').height();
$('.l_admin-product').hover(function () {
$('.l_admin-product-screenshot img').css({
top: -screenshotHeight
});
},
function () {
$('.l_admin-product-screenshot img').css({
top: '0'
});
});
});
Here is my html structure:
<div class="l_admin-products">
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-1-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-1-radio">
<input id="layers-preset-layout-skizzar-homepage-1-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-1-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage21_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-1" data-key="layers-preset-layout-skizzar-homepage-1">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-2-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-2-radio">
<input id="layers-preset-layout-skizzar-homepage-2-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-2-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage2_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-2" data-key="layers-preset-layout-skizzar-homepage-2">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-3-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-3">
<label for="layers-preset-layout-skizzar-homepage-3-radio">
<input id="layers-preset-layout-skizzar-homepage-3-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-3-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage3_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-3" data-key="layers-preset-layout-skizzar-homepage-3">
Select </a>
</div>
</label>
</div>
</div>

$('.l_admin-product').hover(function () {
$this = $(this);
$this.find('.l_admin-product-screenshot > img').css({
top: -screenshotHeight
});
},function () {
$this.find('.l_admin-product-screenshot img').css({
top: '0'
});
});
Try with $this to point current image.