I am creating an app similar to LeanKit's Kanbanize app. LeanKit
Here is my HTML Code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign In</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mycss.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
</head>
<script>
var onDragEnter = function(event) {
event.preventDefault();
$("#dropzone").addClass("dragover");
},
onDragOver = function(event) {
event.preventDefault();
if(!$("#dropzone").hasClass("dragover"))
$("#dropzone").addClass("dragover");
},
onDragLeave = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
},
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
console.log(event.originalEvent.dataTransfer.files);
};
$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);
</script>
<body style="margin:0; background-color: #F2F2F2;">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Welcome to Kanban View</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" style="width:900px; height:500px;padding-top:70px;">
<div class="row">
<div class="col-md-3">
<h4>Ready to Start</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test1">Test 1</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test2">Test 2</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test3">Test 3</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test4">Test 4</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<div class = "col-md-3">
<h4>In Progress</h4>
<div id='dropzone'><ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Search Results Page</div>
</div>
</div>
</li>
</div> </div>
<div class = "col-md-3">
<h4>Ready for Review</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Welcome Page</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "col-md-3">
<h4>Recently Finished</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Login Functionality</div>
</div>
</div>
</li>
</ul></div>
</div>
</div>
<!--Footer-->
<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
</div> <!-- container-->
</div> <!-- navbar navbar-default navbar-fixed-bottom" -->
</div>
</body>
</html>
I added the drag and drop code based on this question. I can see by cards are dragging but cannot drop to In Progress section. The functionality is I should be able to drag a card from anywhere and drop to any of the 4 sections, based on the number of cards, each section should be responsive so they can fit the new card. Any advice would really be appreciated. Thank you so much.
You need to actually move the DOM element. Here's one way you could do it:
https://jsfiddle.net/z3o28qut/
var dragItem;
// You should make this selector more specific to your card elements
$("div")
.on("dragstart", function(event) {
dragItem = $(event.currentTarget).find('li') && $(event.currentTarget).find('li')[0];
});
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
var ul = $(this).find('ul')[0];
if (dragItem) {
ul.appendChild(dragItem);
}
};
Related
My problem is I have created a sidebar but when I hide it using transform and translate, It hides in laptop but not in smaller devices.
I have used tailwind css
Mobile Device Problem screenshot
My code is:
import Image from "next/image";
import Link from "next/link";
import { AiOutlineShoppingCart, AiFillCloseCircle,AiOutlinePlusCircle,AiOutlineMinusCircle } from "react-icons/ai";
import { useRef } from "react";
const Navbar = () => {
const toggleCart = () => {
if (ref.current.classList.contains('translate-x-full')) {
ref.current.classList.remove('translate-x-full')
ref.current.classList.add('translate-x-0')
}
else if (!ref.current.classList.contains('translate-x-full')) {
ref.current.classList.remove('translate-x-0')
ref.current.classList.add('translate-x-full')
}
}
const ref = useRef()
return (
<div>
<header className="text-gray-600 body-font shadow-xl">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<Link
href={"/"}
className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
>
<a>
<Image src={"/mithanSweets.png"} height={45} width={256} />
</a>
</Link>
<nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<Link href={"/categories/burger"}>
<a className="mr-5 hover:text-gray-900">Burgers</a>
</Link>
<Link href={"/categories/italian"}>
<a className="mr-5 hover:text-gray-900">Italian</a>
</Link>
<Link href={"/categories/noodles"}>
<a className="mr-5 hover:text-gray-900">Noodles</a>
</Link>
<Link href={"/categories/pizza"}>
<a className="mr-5 hover:text-gray-900">Pizzas</a>
</Link>
</nav>
<div
onClick={toggleCart}
className=" cursor-pointer inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"
>
<AiOutlineShoppingCart className="mr-3 text-2xl" />
Cart
</div>
</div>
<div
ref={ref}
className=" w-72 sideCart absolute top-0 right-0 bg-gray-200 px-8 py-10 transform transition-transform translate-x-full"
>
<h2 className="font-bold text-xl text-center">Shopping Cart</h2>
<span
onClick={toggleCart}
className="absolute top-5 right-2 cursor-pointer text-2xl text-gray-600"
>
<AiFillCloseCircle />
</span>
<ol className="list-decimal font-semibold">
<li>
<div className="item flex my-5">
<div className="w-2/3 font-semibold">Spicy Seafood Pasta</div>
<div className="w-1/3 font-semibold flex items-center justify-center text-lg"><AiOutlineMinusCircle className="cursor-pointer" /><span className="mx-2">1</span><AiOutlinePlusCircle className="cursor-pointer" /></div>
</div>
</li>
</ol>
</div>
</header>
</div>
);
};
export default Navbar;
And It is working fine in laptop device
Laptop screenshot
but not in inspect mode
Inspect mode screenshot
First thing you can do is to refresh the page. Secondly below is another approach, although its not the perfect solution but it works for me.
Solution
One thing you can do is that instead of translating you can hide and unhide the side bar like this
const toggleCart = () => {
if (ref.current.classList.contains("hidden")) {
ref.current.classList.remove("hidden");
ref.current.classList.add('block');
}
else if (!ref.current.classList.contains("hidden")) {
ref.current.classList.remove('block');
ref.current.classList.add('hidden');
}
}
And then change the sidecart as
<div
ref={ref}
className=" w-72 sideCart absolute top-0 right-0 bg-gray-200 px-8 py-10 transform transition-transform hidden"
>
<h2 className="font-bold text-xl text-center">Shopping Cart</h2>
<span
onClick={toggleCart}
className="absolute top-5 right-2 cursor-pointer text-2xl text-gray-600"
>
<AiFillCloseCircle />
</span>
<ol className="list-decimal font-semibold">
<li>
<div className="item flex my-5">
<div className="w-2/3 font-semibold">Spicy Seafood Pasta</div>
<div className="w-1/3 font-semibold flex items-center justify-center text-lg"><AiOutlineMinusCircle className="cursor-pointer" /><span className="mx-2">1</span><AiOutlinePlusCircle className="cursor-pointer" /></div>
</div>
</li>
</ol>
</div>
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section class="home">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'img/slide-1.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-2.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-3.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
custom.css
.carousel-item {
height: 24rem;
background: #000;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
opacity: 0.5;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption{
bottom: 25%;
}
.carousel-caption h5{
font-size: 30px;
margin-bottom: 20px;
}
.carousel-caption p{
font-size: 20px;
}
To make testing easier i added some grey color to the background (you can remove it later).
What I think you are missing, is to add the Bootstrap scripts, you can see the code for an example.
Here you have how to do it, from Bootstrap documentation.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
>>>>>>>>>> SCRIPTS HERE <<<<<<<<<<<<<
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
>>>>>>>>>>> UP HERE <<<<<<<<<<<<<<<<<
<title></title>
</head>
<body style="background-color: gray">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="IMAGE 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
Regarding your question about "where" to put the text, after the images will be ok.
Here you have a working example (from one of my portfolio projects):
<!-- Testimonials -->
<section id="testimonials" class="colored-section">
<div id="testimonials-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
</html>
Please, mark the answer as accepted ;)
below things worked for me
<div class="carousel-caption d-block">
Instead of
<div class="carousel-caption d-none d-md-block">
read here display properties
I have used dropdown for search form like when the search icon is clicked the search form appears. It works and is positioned as expected but when the breakpoint reaches the small screen size, the search form doesn't get properly append with the search icon. You can observe that by running the code and viewing on small screen.
html,body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #f0f0f0;
width: 100%;
}
#NavigationSection .bg-light{
background: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles/stle.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<!-- Navigation -->
<section id="NavigationSection">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
LOGO
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="search" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-bottom: 0px;padding-top: 3px;"><i class="fas fa-search fa-2x"></i></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="search" style="min-width:17rem;padding: 0.5rem;float:left">
<form class="form-inline my-lg-0" method="get" action="results.php">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" name="user_query" required>
<div class="input-group-append"><button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search"><i class="fas fa-search" aria-hidden="true"></i>
</button></div>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
In the following line,
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search">
Remove my-2, see below (which is responsible for margins in the y axis).
<button class="btn btn-outline-success my-sm-0" type="submit" value="Search" name="search">
I am sure this will do the trick. I hope this helps. Thanks.
how to make the toolbar remains at the bottom, do not go up on top after the keyboard appears ??
what's wrong with my code or less some plugins for cordova or framework7! maybe someone can help me to solve this problem.
<div class="views">
<div class="view">
<div class="pages">
<div data-page="viewprofil" class="page navbar-fixed toolbar-fixed">
<div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);">
<div class="navbar-inner" >
<div id="kembali" class="left sliding button">
<i class="icon icon-back"></i>
</div>
<div class="left sliding">Akun</div>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a id="kembali">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</a>
<a href="{{pathFor 'history'}}" >
<i class="fa fa-clock-o fa-2x"></i>
</a>
<a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif">
<i class="fa fa-user fa-2x"></i>
</a>
</div>
</div>
<div class="page-content" style="background-color: #ecf0f1;color: #444444;">
<div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div>
<div class="list-block">
<ul class="box-data">
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">person</i></div>
<div class="item-inner">
<div class="item-input">
<input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">email</i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" value="{{email}}" disabled>
</div>
</div>
</div>
</li>
<li>
<li class="accordion-item">
<a class="item-content item-link">
<div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div>
<div class="item-inner">
<div class="item-title">Kata Sandi</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Kata Sandi baru">
</div>
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Ulangi Kata Sandi">
</div>
</div>
</li>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">call</i></div>
<div class="item-inner">
<div class="item-input">
<input type="tel" placeholder="No. Handphone" value="{{notelp}}">
</div>
</div>
</div>
</li>
</ul>
<div class="content-block">
<div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i> Keluar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After
Before
I never came out of an idea to keep it in the bottom, but here is a quick fix:
var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main', {
});
$$ = Dom7;
$$('#my-input').on('focus', function() {
mainView.hideToolbar();
});
$$('#my-input').on('blur', function() {
mainView.showToolbar();
});
Simply show and hide the toolbar on input focus and blur events.
Live Example: https://jsfiddle.net/wowq3n64/
So in upgrading from DevExpress to DevExtreme, DE seems to have gone out of their way to block any automation engine but their own.
Select boxes are build as a layer of custom DIV tags with a read-only input tag in the middle.
When selected, the dropdown list is generated as a DIV list structure tied to the /body/ level of the page source.
This list unloads when the dropdown list closes.
Waitr can see and interact with the list the first time it appears on the page, but once it unloads I cannot get it to find it again.
I have tried Page Object references, native Watir dynamic references, nothing works.
Interestingly I do not get the common 'no longer attached to the DOM' error, just an empty string.
All of the workarounds from DevExpress have been deactivated or blocked.
Has anyone found a way to automate these controls besides exposed JS calls?
Select Box:
<div class="dx-texteditor dx-dropdowneditor-button-visible dx-widget dx-textbox dx-dropdowneditor-field-clickable dx-dropdowneditor dx-selectbox dx-validator dx-visibility-change-handler" id="Active_Y_or_N" typeof="drpdown" validations="[{"type":"required"}]" value="1" items="[{"Value":1.0,"Text":"Yes","DropDownType":"Active Y or N"},{"Value":2.0,"Text":"No","DropDownType":"Active Y or N"}]" originalvalue="1">
<div onclick="void(0)" class="dx-dropdowneditor-input-wrapper dx-selectbox-container">
<div class="dx-texteditor-container">
<input id="Active_Y_or_N_1" aria-expanded="false" role="combobox" tabindex="0" spellcheck="false" readonly="" aria-autocomplete="list" aria-haspopup="true" autocomplete="off" class="dx-texteditor-input" type="text">
<div class="dx-placeholder dx-state-invisible" data-dx_placeholder="Select..."></div>
<div class="dx-texteditor-buttons-container">
<div role="button" onclick="void(0)" class="dx-widget dx-button-normal dx-dropdowneditor-button">
<div class="dx-dropdowneditor-icon"></div>
</div>
</div>
</div>
</div>
List:
<div style="width: 212px; height: 61px; z-index: 1001; margin: 0px; left: 0px; top: 0px; transform: translate(264px, 365px); transition: none 0s ease 0s ; visibility: visible; opacity: 1;" class="dx-overlay-content dx-popup-normal dx-popup-draggable dx-resizable">
<div style="height: 60px;" id="2ceea1a1-35ca-5e1d-72c1-17ca0c70daa9" class="dx-popup-content">
<div aria-activedescendant="3cc4c726-d65a-4248-b16c-6cd8ed666d08" tabindex="-1" role="listbox" class="dx-scrollable dx-scrollview dx-scrollable-customizable-scrollbars dx-scrollable-vertical dx-scrollable-simulated dx-visibility-change-handler dx-list dx-widget dx-collection" id="2779756d-884a-7d65-dd53-5ab194255698">
<div class="dx-scrollable-container">
<div style="transform: translate(0px, 0px);" class="dx-scrollable-content">
<div class="dx-scrollview-top-pocket">
<div style="display: none;" class="dx-scrollview-pull-down">
<div class="dx-scrollview-pull-down-image"></div>
<div class="dx-scrollview-pull-down-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-pull-down-text">
<div style="opacity: 1;">Pull down to refresh...</div>
<div style="opacity: 0;">Release to refresh...</div>
<div style="opacity: 0;">Refreshing...</div>
</div>
</div>
</div>
<div onclick="void(0)" class="dx-scrollview-content">
<div id="3cc4c726-d65a-4248-b16c-6cd8ed666d08" aria-selected="false" role="option" class="dx-item dx-list-item dx-state-focused">
<div class="dx-item-content dx-list-item-content">Yes</div>
</div>
<div aria-selected="false" role="option" class="dx-item dx-list-item">
<div class="dx-item-content dx-list-item-content">No</div>
</div>
</div>
<div class="dx-scrollview-bottom-pocket">
<div style="display: none;" class="dx-scrollview-scrollbottom">
<div class="dx-scrollview-scrollbottom-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content">
</div>
</div>
</div>
</div>
<div class="dx-scrollview-scrollbottom-text">Loading...</div>
</div>
</div>
</div>
<div style="display: none;" class="dx-scrollable-scrollbar dx-widget dx-scrollbar-vertical dx-scrollbar-hoverable">
<div style="transform: translate(0px, 0px); height: 58px;" class="dx-scrollable-scroll dx-state-invisible">
<div class="dx-scrollable-scroll-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-loadpanel dx-overlay dx-widget dx-visibility-change-handler dx-state-invisible dx-loadpanel">
<div aria-hidden="true" style="width: 222px; height: 90px;" class="dx-overlay-content"></div>
</div>
code (one version anyway):
self.send("#{field}_element").div(:class => 'dx-dropdowneditor-icon').click
drpdwn = #browser.div(:class => 'dx-scrollview-content')
if drpdwn.text.include? value
drpdwn.div(:text => value).click
else
fail "value (#{value}) not found in list (#{self.drop_list_element.text})"
end
It is very hard to answer because I can't see your code and I have no example. So maybe it's a wrong answer. But if your statement:
On the second load of the list, Watir can see it as existing, but not visible.
is correct. Then you can force watir to work with not visible elements using:
browser.hidden(id: "your_element").click
Try it please.