Then i try to change year in Bootstrap DateTimePicker i see the strange result - yers shows in one line and out of widget borders. How it can be fixed?
attach
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
use it. if posible please attached the code:)
Related
I have a textbox bound with datetime picker. What I have to do is on change of value in the text box if another input textbox (which also bound with datetimepicker) is empty I have to fill the value from initial textbox.
at the moment just trying to catch events but unable to success
my asp.net core razor code is given below
<div class="filters-list">
<div class="form-group">
<div class="input-group date">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
#section Scripts {
<script>
$(document).ready(function () {
//try to print date value of txtFirst text box at on change event
});
</script>
}
if i put datetimepicker in js I got double date time picker
Do you mean you want to bind a datetime picker change event? Try this way:
$(document).ready(function () {
$("#txtFirstDate").datetimepicker();
$("#txtSecondDate").datetimepicker();
$('#txtFirstDate').on('dp.change', function (e) {
console.log(e.date._d);
})
});
Test Result:
Update:
It seems that the components we use and the methods we call are not the same. I will share all the libraries I use and the calling methods, I hope it will help you.
View:
<div class="filters-list">
<div class="form-group">
<div class="input-group date" id="datetimepicker">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date" id="datetimepicker2">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#datetimepicker").datetimepicker();
$('#datetimepicker').on('dp.change', function (e) {
console.log(e.date._d);
})
$("#datetimepicker2").datetimepicker();
$('#datetimepicker2').on('dp.change', function (e) {
console.log(e.date._d);
})
});
</script>
_Layout.cshtml:
//...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
//...
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="~/lib/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
//...
I'm facing a problem with a stale element under the shadow DOM, scenario below:
hover to the video and the dock is shown and vice versa
HTML Dom changes from not hovering to hovering and vice versa:
The below html is for not hovering.
<div class="base overlay hidden" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
After hovered, the change is:
<div class="base overlay" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
The code to get the Element after mouse hover as below:
public static WebElement getElementFromShadow(String jsPath) {
WebElement element = null
WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor jse = ((driver) as JavascriptExecutor)
int attempts = 0;
while (attempts < 5) {
try {
element = ((jse.executeScript('return ' + jsPath)) as WebElement)
if (element != null) {
break;
}
else {
WebDriverWait wait = new WebDriverWait(driver, 10, 100);
element = wait.until(ExpectedConditions.elementToBeClickable(((jse.executeScript('return ' + jsPath)) as WebElement)))
}
} catch (Exception e) {
e.printStackTrace()
}
attempts++
Thread.sleep(2000)
}
return element
}
but when run it, I got org.openqa.selenium.StaleElementReferenceException: stale element reference: stale element not found
(Session info: chrome=91.0.4472.124)
PS: the above code works fine with the normal shadow element(No DOM is changed).
Could anyone know any idea/solution to solve the issue, thank you in advance!
I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?
Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;
In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}
try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();
I am having issues making the text area fill the width of the panel any ideas??
My code is below
<div class="panel panel-primary">
<div id="div_EssentialInformation" class="panel-heading">Essential information</div>
<div id="content" style="display:none;">
<div class="panel-body">
<textarea class="form-control" rows="3" style="resize:none;"></textarea>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a id="btn_edit" class="btn btn-primary">Edit</a>
<a id="btn_save" class="btn btn-danger" style="display:none">Save</a>
</div>
</div>
</div>
</div>
i have a script that toggles the display of the content div, below is the js script
$("#div_EssentialInformation").click(function () {
$("#content").slideToggle(500);
})
I am getting this
Add this to your css
textarea {
width: 100% !important;
}
I'm trying to implement input field with additional options similar to gmail search box. You can see it on the screenshots below.
When you click on a caret sign then additional form is shown up:
Currently, I'm struggling with making a nice looking form shown after clicking on the caret sign. Anyone knows how to achieve that with Bootstrap?
Here is a jsfiddle link:
https://jsfiddle.net/x1sfs9xb/1/
<div class="container">
<div class="row">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="#" class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input 1</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input1" type="text" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input2</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input2" type="text" />
</div>
</div>
</div>
</div>
<p>
<input class="btn action-button pull-right" name="commit" type="submit" value="Save">
</p>
</form>
</li>
</ul>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div><div class="row">
<div class="col-md-12">
<h1>Some content</h1>
</div>
</div>
</div>
You can achieve that by using a little CSS and JS:
CSS (your dropdown menu is relative to input-group-btn so you have to change position of that to static - now your dropdown menu is related to the input-group):
.input-group-btn {
position: static;
}
.dropdown-menu {
left: 0;
}
JS (get width of the input and assign it to your dropdown menu, also change it on browser resize):
var inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
$(window).resize(function () {
inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
});
JSFIDDLE