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

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

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>

Related

How to contain jQuery datepicker within div?

UPDATES: I tried the suggestions below but they did not work.
I want to contain the calendar within the white div with a dark grey border (class = "profileEdit"), and only have its overflow viewable by scrolling. Right now, it's spilling onto profileEdit's parent divs.
SELECTED HTML
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>
DATEPICKER JQUERY
$(function () {
$("#datepicker").datepicker();
});
DATEPICKER CSS
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
overflow-y: scroll;
position: relative;
}
#ui-datepicker-div {
position: absolute;
width: 280px;
font-family: frutigerLight;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
UPDATE: Solution works, but messes up spacing: The space between the "Starts" toggles on and off as well.

You can use an inline datepicker and control its visibility with JavaScript:
$(function() {
$('.dateParent').datepicker({ inline: true, altField: '#datepicker' });
$('#datepicker').focus(function(event) {
event.preventDefault();
$('.ui-datepicker').addClass('shown');
return false;
});
$(document).click(function(event) {
if(!$(event.target).is('.dateParent *'))
$('.ui-datepicker').removeClass('shown');;
});
});
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
position: relative;
}
.ui-datepicker {
visibility: hidden;
height: 0;
margin: 1rem auto;
}
.ui-datepicker.shown {
visibility: visible;
height: initial;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" type="text/css">
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>

Try to remove height attr from calendar element. If it doesnt work check this jQuery UI inline Datepicker auto-resize to parent container

As a UX designer I'd think that you want to either make the containing DIV larger (personally think a popup like the calendar shouldn't extend outside it's container) or possibly change the direction that the calendar control opens in relative to the mouse position. If your trigger control is at the bottom of it's container you have the calendar pop upwards instead of down.

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

How to show and hide Div by mutiple Select form after submission

I have two select form with submit button, I need to get the result of selected value for example
first select form having colours as an option and second contains another things.
and i have some items as div....red flower , red fish.
if i select red from first form its shows red value div and in second form if i select flower it should display red flower only but it's shows everything under the value red. And these all thing must work only when i submit the search button.
I have attached jsfiddle below.
Code:
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="flower">flower</option>
<option value="fish">fish</option>
<option value="toy">toy</option>
</select>
</div>
<div class="col-2">
<button id="search" class="btn btn-primary w-100">Search</button>
</div>
</div>
<div class="red all flower box">Red flower</div>
<div class="red all fish box">red fish</div>
<div class="green all toy box">green toy</div>
<div class="blue all toy box">blue toy</div>
<div class="blue all flower box">blue flower</div>
Jsfiddle :
https://jsfiddle.net/JOHN_748/v846oeab/1/

get the select's values which are the classes you are looking for
toggle the boxes that have both classes
If you have more selection criteria, we should loop, but here we just look at class1 and class2
$(function() {
const $sels = $("select");
const $boxes = $(".box");
$("#search").on("click", function() {
const vals = $sels.map(function() { return this.value }).get()
$boxes.each(function() {
const show = $(this).hasClass(vals[0]) && $(this).hasClass(vals[1]);
$(this).toggle(show)
});
}).click();
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: #ff0000;
}
.green {
background: #228B22;
}
.blue {
background: #0000ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="flower">flower</option>
<option value="fish">fish</option>
<option value="toy">toy</option>
</select>
</div>
<div class="col-2">
<button id="search" class="btn btn-primary w-100">Search</button>
</div>
</div>
<div class="red all flower box">Red flower</div>
<div class="red all fish box">red fish</div>
<div class="green all toy box">green toy</div>
<div class="blue all toy box">blue toy</div>
<div class="blue all flower box">blue flower</div>

jQuery/css make two divs display on the same line

Given that I have the following html markup:
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
How can I make div id="divTwo" and div id="divthree" appear on the same line? First divthree and then divTwo, using jQuery or css?
Update:
I can't add divs or other elements to the html code, it is rendered like that and I can only change it using js or css.

Change the display property to make them appear inline.
#divTwo, #divthree {
display: inline-block;
}

#divTwo, #divthree {
display: inline-block !important;
}

I updated my answer.
I use jQuery to append new div
var $newdiv1 = $( "<div class='selectInput'></div>"),
existingdiv2 = document.getElementById( "divTwo" ),
existingdiv3 = document.getElementById( "divthree" );
$( ".container" ).append( $newdiv1);
$( ".selectInput" ).append( [ existingdiv3, existingdiv2 ] );
.selectInput{
display: flex;
}
#divthree{
margin-right: 20px;
}
#divTwo{
margin: auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
JS Fiddle link for this code

How to make my selectbox overflow in my fixed footer if the browser resize

My problem is when mybrowser resize that the footer and my selectbox are so close the dropdown list is covered by the footer. I want the dropdown list overflow in my footer.
current output: http://jsfiddle.net/GZSH6/31/
footer:
<nav class="navbar navbar-default navbar-fixed-bottom myFooter" role="navigation">
<div class="container">
<p class="navbar-text pull-left">My Fixed Footer</p>
</div>
</nav>
css:
.myFooter { overflow: visible;}

Remove your onmousedown and onchange handlers which mess with the size attribute and it works correctly:
<select name="month" lass="btn btn-default" id="bmonth">
<option value="">Month</option>
</select>
<select name="day" class="btn btn-default" id="bday">
<option value="">Day</option>
</select>
<select name="year" class="btn btn-default" id="byear">
<option value="">Year</option>
</select>
Updated fiddle

Try:
.myFooter { overflow: hidden;}
or/ and
.dateWrap { height: 32px; margin-bottom: 1.0em; }
instead
.dateWrap { height: 32px; overflow: visible; margin-bottom: 1.0em; }

Develop Reference

JavaScript is the programming language of the Web.