Develop Reference

How to fix select drop down menu on mobile

I have the following code snippet. I'm facing an issue on mobile device. The drop down menu doesn't work at all. I've tried adding classes, tried #media query css for smaller devices, and a number of other things that didn't work. I'm beginning to suspect that it could be because of the many layers of div elements that I have?
When I try to touch/tap the drop down menu on a mobile device, the options don't show up. It feels like the drop down menu is disabled or something, but it works perfectly on a desktop. I'm trying to find a solution that keeps the drag and drop/sorting feature implemented.
/** Add sortable/draggable function **/
$('.column').sortable({
connectWith: '.column',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui)
{
/** Increment or decrement value based on element position **/
$('.currentposition').each(function (i) {
let numbering = ++i + 4;
$(this).val(numbering);
});
/** Display ordering priority number **/
$('.current_position').each(function (i) {
let numbering = ++i + 4;
$(this).text(numbering);
});
}
}).disableSelection();
.column .dragbox{
margin:5px 2px 20px;
position: relative;
border:1px solid #946553;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox{
margin:0;
/*font-size:12px;*/
color:#fff;
border-bottom:1px solid #946553;
font-family:Verdana;
cursor:move;
padding:5px;
}
.dragbox-content{
margin:5px;
font-family:'Lucida Grande', Verdana;
font-size:0.8em;
line-height:1.5em;
}
.column .placeholder{
background: #EED5B7;
border:1px dashed #946553;
}
.opIcons
{
background-image: url('iconSpirite.gif')!important;
background-repeat: no-repeat;
float:right;
height:13px;
width:13px;
margin:0px 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="column1" class="column ui-sortable">
<div class="dragbox" id="item5">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Lastname:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95009][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95009][priority]" value="5">
<label class="current_position">5</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item6">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Zipcode:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95010][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95010][priority]" value="6">
<label class="current_position">6</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item7">
<div class="dragbox-content">
</div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Phone:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95011][value]" data-form-type="phone,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95011][priority]" value="7">
<label class="current_position">7</label>
</div>
<div style="clear:both;"> </div>
</div>
<div class="dragbox" id="item8">
<div class="dragbox-content"></div>
<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Firstname:</label>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95008][value]" data-dashlane-rid="dfa7f355a521619d" data-form-type="other">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95008][priority]" value="8">
<label class="current_position">8</label>
</div>
<div style="clear:both;"> </div>
</div>
</div>

It’s because of your Javascript. Please try to add this jquery file:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
I hope this works fine.

Sounds oddly similar to a problem I had when trying to display my embedded audio file I put into my post.
I copied the code from my Google Drive Account (after I clicked on the menu tab to get the javaS code, went to the code editor of an article post I had there.
To my dismay, I was trying to get it to play, but noticed I couldn't get the play button to work.
Like you I was frustrated, so I went back into code editor mode (HTML) and started tinker around with the code itself, I thought it might be a certain or maybe some "whitespace" in the code that could have been interfering with the functionality of the code itself.
And come to find out it was neither!
The problem I was having was a "size-display issue" that was affecting the audio player's ability to play; I caught onto to the issue and went back into my HTML Editor and simply "adjusted the width and height" of the player itself.
Audio File (size adjustment trick helped me fix) which allow the display size of my audio player properly
Audio Player (displayed correctly and now playable after adjusting the pixel size - width and height)
And sure enough, I was able to access the play button clicking it on and off properly without further issues.
That might be your issue, maybe if you adjusted the width, height, or both in terms of size - it may be an tag source code that may also hold a clue to your issue.
The auto player on my site is coded this way --
I'm just trying give a clue to what might be the problem, and it may give you a bit more insight to finding a notable solution.
I hope this will be helpful to you! :D

CSS and JS Query

I am trying to make an HTML form, and I am trying to insert the "Plus" icon to the Input field. How would I do that, since I've already tried modifying it via CSS? Can someone help?
Also, I also want to create a "click" event which leads me to a secondary page where I can choose the Rooms and the capacity in my form, and go back once I am done with it. Any thoughts how I would do that?
This is my CSS Code:
*{
margin:0;
box-sizing: border-box;
padding:0px;
}
body{
height:100vh;
display: flex;
background-color: rgb(87,189,130);
}
.field-property,
.field-room,
.field-name-room,
.field-capacity,
.base-tariff{
position: relative;
top:30%;
left:100%;
}
.allinputs{
margin:10px;
padding:5px;
border-radius: 10px;
width:100%;
}
.client-form{
align-items: center;
justify-content: center;
display: flex;
}
This is my HTML Code:
<body>
<h1 class="client-form">Client Integration Form</h1>
<form>
<div class="field-property">
<label for="property Name">Property Name
<input type="text" class= "allinputs" name="name" placeholder="Property Name" required />
</label>
</div>
<div class="field-room">
<label for="rooms">Rooms
<input type="text" class="allinputs" name="name" placeholder="Rooms" required />
<div class="material-icon">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</label>
</div>
</div>
<!-- Adding the Icon for Adding Rooms -->
<div class="field-name-room">
<label for="room Selected">Room Selected
<!-- Adding a Drop Down Value for the rooms -->
<select class="all inputs">
<option class="options">Pink Room</option>
<option class="options">Red Room</option>
<option class="options">Green Room</option>
</select>
</label>
</div>
<div class="field-capacity">
<label for="capacity">Capacity</label>
<input type="number" class="allinputs">
</div>
<div class="base-tariff">
<label for="base Tariff">Base Tariff of the Room:</label>
<input type="value" class="allinputs" name="name" placeholder="Base Tariff">
</div>
<!-- Yet to be decided how to integrate this -->
<!-- <div class="field-billing">
<label for="billing">Billing:</label>
</div>
<div class="field-phone">
<label for="phone Number">Phone Number</label>
<input type="number" class="allinputs">
</div>
</form>
</div>
</body>
</html>

To insert the '+' sign use a placeholder.
<input type="" id="" name="" placeholder="+">
A click event could be achieved by a simple hyperlink <a href=''>Example Hyperlink</a>

how to make sure dots in the slideshow forms are after the forms instead of sitting on the labels and textbox?

I am working on making a slideshow of forms. Here is my working codepen link. As you can see I have two dots on the right side which if I click then it opens another form. Only thing is those dots are just sitting on the right side labels and texbox and that I don't want it.
For example as shown in this image. I am trying to replicate exactly like this image and as you can see those dots are on the form instead but at the very right side of it close to the right border but not lying on the labels and texbox. LAST NAME, PHONE NUMBER , PROVINCE and CITY label and its textbox are just before those dots. I want to do something similar. How can I make sure those forms are just above those dots not lying on them. I tried playing with form width but it is moving those dots as well along with it. Also I want to make dots color to orange if it is on that form (just like in the image I have). As of now it shows black.
Below is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlidesJS Standard Code Example</title>
<meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
<meta name="author" content="Nathan Searles">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- CSS for slidesjs.com example -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- End CSS for slidesjs.com example -->
<!-- SlidesJS Optional: If you'd like to use this design -->
<style>
body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232525;
}
#slides,
#slides2,
#slides3 {
display: none;
margin-bottom:50px;
}
.slidesjs-navigation {
margin-top:3px;
}
.slidesjs-previous {
margin-right: 5px;
float: left;
}
.slidesjs-next {
margin-right: 5px;
float: left;
}
.slidesjs-pagination {
margin: 6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url("https://s16.postimg.org/pt4k43i9x/pagination.png");
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
.navbar {
overflow: hidden
}
</style>
<!-- End SlidesJS Optional-->
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
<style>
#slides {
display: none
}
.container {
margin: 0 auto
}
/* For tablets & smart phones */
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto
}
}
/* For smartphones */
#media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
#media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}
/* For larger displays */
#media (min-width: 1200px) {
.container {
width: 1170px
}
}
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<h3>INSURANCE FORM</h3>
<h4><i>BASIC DETAILS</i></h4>
<br>
<div id="slides" class="container-fluid" >
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 1">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<i class="icon-chevron-left"></i>
<i class="icon-chevron-right"></i>
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 528,
navigation: false
});
/*
To have multiple slideshows on the same page
they just need to have separate IDs
*/
$('#slides2').slidesjs({
width: 800,
height: 528,
navigation: false,
start: 3,
play: {
auto: true
}
});
$('#slides3').slidesjs({
width: 800,
height: 528,
navigation: false
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>

We can do following three things to fix this
First Solution.
Increase the padding of container from 10 to 20px. sothat dots will remain at right side and some will create between form and dots.
Second Solution
Make Dots fixed with respect to screen, I think dots will always show on screen, not movable and after reduce the width of form from 100% to some less around 95%;
Third Solution
Just reduce width of form to 95%.
Provide right padding more than 10px.

jQuery and HTML - clicking on current div box id to display sub dvi box content

This is a my jQuery and HTML code.
my goal is when I click on the current box1, box2 or box3 , I want to display current sub box.
For example : when I click on current box1 should be open current sub_box_1, and so. I did some jQuery code but I can't get result.
Thanks!
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).$('#sub_box_1').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

Try using this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).children('.sub_box').show();
});
});
jsfiddle example: https://jsfiddle.net/d6zf0n1b/

When you are using $(this).$('#sub_box_1'). you are trying to execute the $ function of the return of $(this). There is no $ function of $(this). Hence you are getting an error.
The other problem is that you are trying to access by the "#" accessor which matches the id not the class.
So this is why Andre's answer works. He is starting from the box that was clicked and looking for immediate children that have the class "sub_box".
One thing to keep in mind is that the children method will only search one level down from the parent. If the box could be deeper down, you should use the 'find' method.

You can use the jQuery find method (https://api.jquery.com/find/), which will find elements inside the the element matching the selector you use, try this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).find('.sub_box').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

How to cleanly put HTML elements on the same line using CSS

My question is how to cleanly put two elements on the same line.
Here is my fiddle: https://jsfiddle.net/duqpn0wd/
CSS:
.inline-block {
display: inline-block;
}
Wrapper:
<div class="inline-block">
</div>
In the fiddle you can see a text with a button underneath it but I need them to be left align and right align like so:
TEXT BUTTON
Right now using inline-block helps but I would need each element to be an inline and the line after that would also be inline so that would merge into my existing first line like so:
TEXT BUTTON TEXT BUTTON
Any ideas on how to do this properly?

Use float: left; for the p inside .inline-block:
.inline-block {
display: inline-block;
width: 100%;
}
.inline-block p{
float: left;
}
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="collapsible">
<h3> Alarm </h3>
<div class="inline-block">
<p>Alarm Horn:</p>
<select name="flipswitch-1" id="flipswitch-1" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
<div class="inline-block">
<p>Alarm Light:</p>
<select name="flipswitch-2" id="flipswitch-2" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
</div>
<div data-role="collapsible">
<h3> Fault </h3>
<div class="inline-block">
<label for="number-input-1">Start Fault Time:</label>
<button id="number-input-1" class="keyboard-input" data-inline="true">100</button>
<label for="number-input-1">seconds</label>
</div>
</div>

Just add this code to your CSS
.inline-block > p {
float: left;
}

You can specify your CSS as :
.inline-block { /* select the class */
display: inline-block;
}
.inline-block *{ /* select all the child element */
display: inline-block;
}
Adding any element to your class will be aligned in a single line.

Just modify your css with this
.inline-block {
display: inline-block;
}
p{
display:inline-block;
}
select{
display:inline-block;
}
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="collapsible">
<h3> Alarm </h3>
<div class="inline-block">
<p>Alarm Horn:</p>
<select name="flipswitch-1" id="flipswitch-1" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
<div class="inline-block">
<p>Alarm Light:</p>
<select name="flipswitch-2" id="flipswitch-2" data-role="flipswitch" data- wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
</div>
<div data-role="collapsible">
<h3> Fault </h3>
<div class="inline-block">
<label for="number-input-1">Start Fault Time:</label>
<button id="number-input-1" class="keyboard-input" data- inline="true">100</button>
<label for="number-input-1">seconds</label>
</div>
</div>