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

Text alignment without using table in html and css

I'm trying to learn HTML and CSS and using the old-school approach by creating a login page with three input controls (two text and one button). However, I'm using <table></table> for the alignment issues of textboxes. But I've read somewhere that using tables is not considered a good approach. This is what I'm doing:
Home.html
<div>
<table>
<thead>
<tr><th><span>Login Page</span></th></tr>
</thead>
<tbody>
<tr>
<th><label>Username:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th><label>Password:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="button" value="Submit" /></td>
</tr>
</tbody>
</table>
</div>
However, I'm using some beginner stuff of CSS to align input controls without using tables and this is what I'm trying:
Home.html
<div class="box">
<span>Login Page</span>
<br />
<span>
<label>Username:</label>
<input type="text" value="" />
<br />
<label>Password:</label>
<input type="text" value="" />
<br />
<input type="button" value="Submit" />
</span>
</div>
style.css
.box {
margin: 10px 10px 10px 10px;
border: dotted 2px #fff;
width: 500px;
}
.box span:first-child {
border: dotted 1px;
margin-left: 30%;
font-family: Arial, sans-serif;
width: 50%;
}
.box span label:nth-of-type(odd)
{
color:blue;
font-family: Arial, sans-serif;
}
.box span label:nth-of-type(even)
{
color: red;
font-family: Arial, sans-serif;
display: inline-block;
}
My concern is using css, I'm able to align the input controls but I have to use multiple break tags (<br />) and also extra code for alignment which is easier by simply using the <table> tag. Can someone suggest me the standard approach and either I'm on the right path or not?

#iSahilSharma Please find following code without using table. I hope you were expecting the same. A part from it just a suggestion that start using Bootstrap framework instead of using custom coding.
.main_container{
width:100%;
}
.inner_box {
margin: 40px auto;
width: 30%;
}
.inner_box span{
clear: both;
display: block;
}
.inner_box span:first-child{
margin-bottom:10px;
}
.inner_box span:nth-child(n+2){
margin-bottom:20px;
}
<div class="main_container">
<div class="inner_box">
<span>Login Page</span>
<span>
<label>Username:</label>
<input type="text" value="" />
</span>
<span>
<label>Password:</label>
<input type="text" value="" />
</span>
<span>
<input type="button" value="Submit" />
</span>
</div>
</div>

Although tables are a very good approach for forms but I prefer the much shorter and easier method ie CSS tables
Here is a code:
form {
display: table;
}
p {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>

As a small addition to the things that are said already, I would recommend you to consider an option to use a separate container for a single form control and its label. Like this:
<form>
<div class="input-group">
<label for="name">Username:</label>
<input type="text" id="name" value="" />
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="text" id="password" value="" />
</div>
</form>
Perhaps, one might say this is redundant, but from my perspective, it gives you more control during positioning. On the other hand, Michael Seltenreich is making a good point. I still find tables used for forms in many places, although I'd prefer to keep away from this method.
P.S. In case you want to spread labels and inputs horizontally, you would probably want to use flexboxes.

Using table is not always good. One way to do is
<div class="form-wrap">
<h2>Login Form</h2>
<div class="form-field">
<label>User Name</label>
<input type="text" value="" />
</div>
<div class="form-field">
<label>Password</label>
<input type="text" value="" />
</div>
<input type="button" value="Submit" />
</div>
CSS:
.form-field label {
width: 80px;
display: inline-block;
}
.form-field {
margin-bottom: 10px;
}
link to codepen

Tables are not a good approach for many reasons, but tables ARE ideal for forms of the type you are trying to create.

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>

Trying to move the submit button to the bottom of the page

How do you move the move the button to the bottom of the page? I tried and its not working. I have tried margin-bottom: 0px; but the button still not move the bottom
<form tag="Create Logon">
<div id="layer">
</div>
<div class="left">
Fistname *:
</div>
<div class="right">
<input type="firstname" name="firstname" style="width: 300px; font-size: 14pt; margin-left: 40px;" />
</div>
<div class="right">
<input type="Username" name="username" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<div class="left">
Password *:
</div>
<div class="right">
<input type="password" name="password" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!</p>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
alert("Thank you for registering with GreenB!");
}
</script>
</div>

Use absolute positioning:
button {
position:absolute;
bottom:0;
}
jsFiddle example

button {position: absolute; bottom: 0}

How to show the text in the corner of border of a div?

I want to show a text like below in the html page, how to do this?
This is what I tried up to now.
<div class="filterleft" style="display: inline-block;">
<div id="filterleft_border" style="border-style:solid; border-width:1px;" >
<label class="category-label" for="category">Filter: </label>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="filterValue" style="width: 50px"/>
</div>
</div>
I created a fiddle for this,
http://jsfiddle.net/KendoDev/kzf6257h/
But what I want is,

You'll have to use HTML <fieldset> and <legend> to make that work.Its really simpler to use it..See more about this in W3Schools
See the
fiddle
HTML
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px;" >
<legend>Filter: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 50px"/>
</fieldset>
</div>

If you dont want to use fieldset use it like below.
.category-label
{
position:absolute;
top:0px;
left:12px;
padding-left:3px;
padding-right:3px;
background:white;
}
DEMO

If you wanted it to be specifically the label that was positioned like the legend you could do:
http://jsfiddle.net/ahallicks/kzf6257h/5/
#filterleft_border {
padding: 10px;
position: relative;
}
.category-label {
background: #FFF;
left: 5px;
position: absolute;
top: -10px;
}
Note, the relative positioning will keep the label within the confines of the border in cae you needed to use it more than once.

It's a fieldset. I tried to change your code a little bit. Check it out.
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px; border-radius:6px;" >
<legend style="font-family:Tahoma;font-size:11px;font-weight:bold">Filters: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 150px"/>
</fieldset>
</div>
Here is the document in W3schools