I have input fields which trigger a popover when getting focused (I chose a "top" placement).
<div class="form-group has-success">
<label class="control-label" for="formRegister_email">Your e-mail</label>
<input name="email" type="email" class="form-control" id="formRegister_email" placeholder="E-mail address" value="" data-toggle="popover" data-content="Please fill in a valid e-mail address" data-trigger="focus" data-placement="top" required="required" data-original-title="" title="">
</div>
It works fine, but my input is about 600px in width and the popover is horizontaly centered with the form field.
I want it to be aligned with the left border of the form field. How can I do?
Thank you in advance
Ok, I've found the solution :
.on('shown.bs.popover', function () {
var offset = $(this).offset();
$('.popover').css('left', Math.round(offset.left) + 'px');
});
Related
I have this problem: In a form, I want to display the info from a box (idCreditorCnpCui) only if the second or the third option is selected from the form (if "P" or "O" option is selected). While I select any of these options, the box appears as it should. The problem I encountered is that when I press the "sent" button (with O or P option), the idCreditorCnpCui box disappears from the view.
This is the HTML with the options of the form:
<div class="form-field">
<label for="payment.creditorOrganizationOrPerson"><localization:localize key="creditorOrganizationOrPerson.label"/></label>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="N" onclick="display();" /> N <br>
</div>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="P" onclick="display();" /> P <br>
</div>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="O" onclick="display();" /> O
</div>
</div>
This is the box I want to be display or no according the option selected:
<div class="form-field" id="idCreditorCnpCui" style="display:none">
<label for="payment.creditorCnpCui"><localization:localize key="creditorCnpCui.label"/></label>
<div class="form-field-element">
<input type="text" property="payment.creditorCnpCui" size="36" maxlength="35" styleClass="input-field" styleId="payment.creditorCnpCui"/>
</div>
And this is the js
function display(toDisplay,idDiv){
if(toDisplay == false){
document.getElementById(idDiv).style.display = "none";
}else{
document.getElementById(idDiv).style.display = "block";
}
}
display(false,"idCreditorCnpCui");
If I turn the final line to "display(true, "idCreditorCnpCui"), the box appear even when the option "N" is selected by default. That should not happen since the N option means the idCreditorCnpCui box is hidden. Any idea please.
I want a field to be display just if an option is selected. But when I send the form, the field disappears even when the option that display that field is selected
I tried to find the x-path of a text field username and password, but it keeps on changing dynamically.I won't be able to use starts-with or contains in a findelement using x-path. Here's the HTML DOM-
<div id="contents">
<h1 style="white-space:pre; width:80px; float:left;line-height:35px;">Login</h1>
<span style="float:left; padding-top:13px; COLOR:#990033; font-weight:bold;"> Student | Parent | Faculty</span>
<div class="form-elements">
<div class="form-elements">
<div class="form-elements">
<div class="label-txt">Password</div>
<input id="rcnr2uew1m0rkikeaaniwk" type="password" style="display:none;" name="rcnr2uew1m0rkikeaaniwk"/>
<input id="ko2xs123ebqyoluh15bulu" type="password" style="display:none;" name="ko2xs123ebqyoluh15bulu"/>
<input id="cuouek4bfz41etm4hroj0r" type="password" style="display:none;" name="cuouek4bfz41etm4hroj0r"/>
<input id="u2ta3gv2o2ce0azx5plpuh" type="password" name="u2ta3gv2o2ce0azx5plpuh"/>
<input id="g03nwjuzhqnkuwgsl4q2mu" type="password" style="display:none;" name="g03nwjuzhqnkuwgsl4q2mu"/>
<input id="gddwv4z3amojk0yvoxi2v4" type="password" style="display:none;" name="gddwv4z3amojk0yvoxi2v4"/>
<input id="kxecmkho2vf1vcfb42icjr" type="password" style="display:none;" name="kxecmkho2vf1vcfb42icjr"/>
<span id="ctl04" style="color:Red;visibility:hidden;">*</span>
</div>
I tried to find the input[4] with no style.
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[4]
Next time how it changes-
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[17]
id and name of the input also keeps on changing without any common trait
You can do it by locating sibling of the User name label that is displayed, i.e. without attribute style="display:none;"
User Name
"//div[contains(text(), 'User Name')]/following-sibling::input[not(#style='display:none;')]"
Password
"//div[contains(text(), 'Password')]/following-sibling::input[not(#style='display:none;')]"
Or something similar using type attribute:
//input[#type='password'][not(#style)]
I'm using Vue for the first time, with Vue Validator. Here is an example of my code:
<label for="first_name">First name:
<span v-if="$validation1.first_name.required" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
The only issue at the moment is that when I land on the page with my form, the whole thing is covered in errors. Is there a way I can suppress the errors and only show them on input blur / form submit?
Argh, the Google-able word isn't about blur, or on submit – its about timing and initial:
http://vuejs.github.io/vue-validator/en/timing.html
<input id="first_name" initial="off" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
you need to add .dirty or .touched to your validation
<label for="first_name">First name:
<span v-if="$validation1.first_name.required && $validation1.first_name.touched" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
I was dealing with a similar problem. I had to have an initialized variable for the input name: "" but I also wanted to have a required attribute in element.
So I add required when the event onblur occurs.
<input name="name" type="number" v-model="name" #blur="addRequired" />
const app = Vue.createApp({
data() {
return {
name: ""
}
},
methods:{
addRequired: function(event){
event.target.setAttribute("required", true);
}
}
});
Can any one please help me out how to select a radio button if it is inside a fieldset??
I can access individual radio button using foreach but when i try to select it or click it its giving some Ajax error.
HTML code is given below
I have tried to select it with radio button's label as well as given in above comment but not able to select it.
<fieldset id="edit-cvs-options" class="form-wrapper">
<legend>
<div class="fieldset-wrapper">
<div class="ios-content" style="display: none;">test</div>
<div class="form-item form-type-radio form-item-use-stored">
<label for="edit-use-stored">
<span>test</span>
<input id="edit-use-stored" class="form-radio" type="radio" name="use_stored" checked="TRUE" value="on" display-title-fix="1"/>
</label>
</div>
<fieldset id="edit-cvs-1" class="form-wrapper" style="display: inline-block;">
<div>
<div class="form-item form-type-radio form-item-use-uploaded">
<label for="edit-use-uploaded">
<span>test</span>
<input id="edit-use-uploaded" class="form-radio" type="radio" name="use_uploaded" display-title-fix="1" value="off"/>
</label>
</div>
</div>
</fieldset>
This is my Behat step definition:
$session = $this->getSession(); // get the mink session
$escapedValue = $session->getSelectorsHandler()->xpathLiteral('use_uploaded');
$radioButton = $session->getPage()->find('named', array('radio', $escapedValue));
$radioButton ->click();
I've noticed strange behavior of the Twitter Bootstrap 3: size of the input box depends on the size of its label when they are grouped with form-group:
<form class="form-inline">
<div class="form-group">
<label>A</label>
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name">
</div>
</form>
Here is demo: http://jsfiddle.net/a3vAP/4/
Is this feature or bug? What would be the fix? I need input boxes of the same size.
The longer label is causing the input to be longer since they're both contained in the same form-group which uses display:inline-block so it's automatically sizing to the width of the label.
According the Bootstrap docs..
"Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within."
So, you'd need to add some simple CSS to control the width..
.form-inline .form-group input {
width:140px;
}
Demo: http://bootply.com/87747