Html code is as follows:
<li>
<form action="/en/pune/dsf/media/create" enctype="multipart/form-data" method="post">
<div style="margin: 0px; padding: 0px; display: inline;">
<input name="authenticity_token" type="hidden" value="DD9PUpCMWTGs66fHEZutO+9RFjcf68xH+T9DMXv1JnA="/>
</div>
<div class="media_upload_submit">
<span class="icon-camera"/>
<span class="al">Add photos</span>
</div>
<input class="media_image_file" data-track="photo_upload,spot_page,user" name="media[image]" type="file"/>
</form>
</li>
I have tried using
#browser.file_field(:xpath, "//input[#type='file' and #class='media_image_file']/").set "Complete file path name"
but I get the following error:
Failure: Unable to locate an element with the xpath expression //input[#type='file' and #class='media_image_file']/ because of the following error:
I have tried using many different ways but get different errors.
There is a extra / after ..and #class='media_image_file']/". Remove it and write like :
#browser.file_field(:xpath, "//input[#type='file' and #class='media_image_file']")
Related
this is my email form
<form action="https://gmail.us11.list-manage.com/subscribe/post?u=XXXXXX" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll" style="display: flex;flex-direction: row;">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fb16c0b54b243c41cf0ba431c_6cbe3da72c" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="rehab-btn-secondary">Send</button>
</div>
</div>
</div>
</form>
however if I input "aaa" as email address which is wrong. I am getting this error
Which obviosly breaks our UI,
by checking on the HTML in dev tools, it creates a new div with id "mce-inline-error"
out of the blue, how can i control this error so i can style it properly in our UI?
This is getting annoying google cant give me answer.
If there are no answers, what type of work around can you guys suggest?
I know little about Laravel and Masonry grid layout, but I know how Bootstrap framework works.
I need to change the number of columns in a Boostrap grid for small size devices like a mobile phone. Currently, the number of columns is 3 because the class used is col-xs-4. However, I need to change it to col-xs-6, so that it shows 2 columns.
I don't think it's that hard, but I don't know how Laravel works.
I tried searching for those divs in the whole project so that I could directly change those classes, but I couldn't find anything.
This is an example of one column in a row:
<div class="container-fluid">
<div class="row">
<div class="fw-divider-space hidden-below-xl pt-70"></div>
<div class="col-lg-12">
<div data-animation="fadeInDown" class="row isotope-wrapper masonry-layout c-gutter-5 c-mb-5 animate animated fadeInDown" style="position: relative; height: 798px;">
<div class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 col-xs-4 col-4" style="position: absolute; left: 0%; top: 0px;">
<div class="vertical-item item-gallery content-absolute text-center ds">
<a href="https://www.tusencuentros.cl/modelo/9/ver" class="item-media h-100 w-100 d-block"><img src="https://www.tusencuentros.cl/storage/fotos_perfil/9-1.jpg" alt="Modelo">
<div class="media-links"></div>
</a>
<img src="https://clubvip.cl/storage/watsapp_logo.png" style="width: 40px; height: 40px; margin-top: 5px;"> <i aria-hidden="true" class="fa fa-phone-square" style="font-size: 36px; color: rgb(255, 255, 255); float: right;"></i>
<div class="item-content" style="background-color: rgb(233, 11, 165);">
<div class="item-title" style="top: -80px; width: 100%;">
<div style="display: inline-flex;">
<p style="font-size: 14px;">CARLITA </p>
</div>
<div>
<p style="font-size: 12px;">CHILENA, 20</p>
</div>
<div>
<p style="font-size: 10px;">Medidas: 94-62-98</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I expect the classes col-xs-4 to be col-xs-6.
I assume you use laravel blade
You can use dynamic css class in here like
class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 {{ $isMobile ? 'col-xs-6' : 'col-xs-4' }} col-4"
In the curly blackets : is this mobile device? if yes, I will use col-xs-6 if not I will use col-xs-4
But you need to send the checking of $isMobile from your controller and there is a very simple component for that here jenssegers/agent
After installation you can perform check for mobile device by using $agent->isMobile() method
Finally I could fix it by finding out that the folder with the file that contains those divs was inside a non-public location called "resources". Since I know little about Laravel Blade, I didn't know the directory structure.
I'm trying to create a textbox with an attached button that looks similar to a Kendo DatePicker or NumericTextBox. This is close, but it doesn't quite line up. Any help straightening this up would be appreciated.
<style>
.unselectable
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<span class="k-widget k-datepicker k-header" style="width: 136px">
<span class="k-picker-wrap k-state-default">
<input class="k-input" type="text" name="searchParam" id="searchParam" placeholder="Name ..." />
<span class="unselectable k-button k-select">
<img class="unselectable" src="~/Images/search_flashlight_16.png" />
</span>
</span>
</span>
Everything you should need is this:
See jsFiddle DEMO
<span class="k-textbox k-button k-space-right">
<input value="This is the value" />
<a class="k-icon k-filter"></a>
</span>
Also see the "documentation" (Look at the source for the example) for this here.
EDIT:
Since the asker really wanted it to behave as a button (i.e. the click-effect), just add the k-button class to the outter span.
I know that this is an old question, but I felt like Shion's answer wasn't quite what I was looking for. So after a bit of experimenting I came up with this which doesn't give you the flicker of the button:
<span class="k-picker-wrap k-state-default">
<input style="width: 100%;" type="text" class="k-input">
<span unselectable="on" class="k-select" aria-label="select" role="button">
<span class="k-icon k-i-filter"></span>
</span>
</span>
Live Example: Dojo
I'm using the free version of kendo UI web. I'm showing a progress indicator using the code:
kendo.ui.progress($('#loginform'), true);
where $('#loginform') is the div that I'd like to show the progress indicator over. I was under the impression the progress indicator would be contained and centered within the div that I provide to the function. However, it appears to be showing over the entire page instead. I've also tried:
kendo.ui.progress('#loginform', true);
and
kendo.ui.progress('loginform', true); (which caused an error).
I assume I'm not wrong about the way it's supposed to work, otherwise why would the function take the name of a div at all. Any ideas as to what I'm doing wrong?
As far as I can tell, I'm doing the same thing. Here is my HTML:
<form class="form-signin" id="loginform">
<h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
<input type="text" id="username" class="input-block-level" placeholder="Username" />
<input type="password" id="password" class="input-block-level" placeholder="Password" />
<label class="checkbox" style="color:whitesmoke;">
<input type="checkbox" id="remember" value="remember-me" /> Remember me
</label>
<button type="button" id="login" class="btn btn-large btn-success">OK</button>
<button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>
Sorry, I can't seem to figure out how to format it correctly.
I think the jsFiddle example only looks centered because that tab is the entire page in the example.
You need to define positioning for loginform either relative, absolute or fixed.
Try adding the following CSS definition:
#loginform {
position: relative;
}
You need this because the progress tries to completely cover the HTML element that contains it. To do that, it defineswidth and height as 100%. So, to constrain its size to the size of the container (and do not overflow it), you need to define the position as one of these.
It might also work if some of the ancestor have one of these positioning. In this case it will cover the 100% of this and not the 100% of the immediate ancestor.
Example: Define the following styles
#container1 {
position: fixed;
border: 1px solid red;
margin: 3px;
}
#container2 {
position: static;
border: 1px solid green;
margin: 30px;
}
and the HTML as:
<div id="container1">
<div id="container2">
<form class="form-signin" id="loginform">
<h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
<input type="text" id="username" class="input-block-level" placeholder="Username"/>
<input type="password" id="password" class="input-block-level" placeholder="Password"/>
<label class="checkbox" style="color:whitesmoke;">
<input type="checkbox" id="remember" value="remember-me"/> Remember me </label>
<button type="button" id="login" class="btn btn-large btn-success">OK</button>
<button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>
</div>
</div>
You will see that it covers 100% of container1 since this is fixed while container2 is static.
Folks,
My web app has a date widget and I am trying to enter a date and I get the above exception, my HTML code looks like this:
<form id="order_form" class="h" method="post" action="/order/orders/1000">
<div style="margin: 0pt; padding: 0pt; display: inline;">
</div>
<input id="order_type_description" type="hidden" value="Order" name="order[type_description]">
<fieldset>
</fieldset>
<fieldset id="simple">
<legend>Order terms</legend>
<div class="field clear">
<label class="_"> </label>
<textarea id="order_sorder_for" rows="5" name="order[order_for]" cols="80"></textarea>
</div>
</fieldset>
<fieldset id="basic" style="display: none;">
</fieldset>
<fieldset id="change" style="display: none;">
</fieldset>
<fieldset>
<legend>Optional</legend>
<fieldset>
<div class="field clear">
</div>
<div class="field clear">
<label class="_">Range</label>
<select id="smart_date" onchange="process_date(this, true);" name="order[smart_date]">
</select>
<p class="tip"> Select . </p>
</div>
<div class="field clear">
<label class="_">Begins on</label>
<input id="order_begin_string" class="custom_date_range calendar hasDatepicker" type="text" size="30" readonly="readonly" name="order[begin_string]">
<img class="ui-datepicker-trigger" src="/images/calendar.gif" alt="..." title="...">
</div>
<div class="field clear">
<label class="_">Ends on</label>
<input id="order_end_string" class="custom_date_range calendar hasDatepicker" type="text" size="30" readonly="readonly" name="order[end_string]">
<img class="ui-datepicker-trigger" src="/images/calendar.gif" alt="..." title="...">
</div>
How do I enter the date? I was considering running javascript in the watir code like this:
##browser.execute_script("document.order_form.order_begin_string.value = 'March 01, 2011'")
But the above does not work, I get the following error for that:
document.order_form is undefined (Selenium::WebDriver::Error::UnexpectedJavascriptError)
Any help is much appreciated. thanks a lot
The locating of the element should be done using the getElementById (or similar) method.
The following worked with your sample HTML (tested in Firefox):
##browser.execute_script("document.getElementById('order_begin_string').value='March 01, 2011'")