Extra space is coming in html output - html

here i am pasting html & css and when UI comes then extra space was coming. just could not understand why it is coming and how to make it look proper.
HTML
<div style="display: block; z-index: 1001; outline: 0px none; height: 400px; width: 400px; top: 77px; left: 428px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all noTitleStuff ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog2"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-dialog2"> </span><span class="ui-icon ui-icon-closethick">close</span></div><div id="dialog2" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: auto;">
<div id="Container">
<div id="acloginpod">
<div id="caption"> Enter Login Information </div>
<div class="acloginform">
<fieldset>
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label1">Email Address:</span>
<input type="text" name="ctl00$mstPartBase$rptlogin$ctl00$txtEmail" id="ctl00_mstPartBase_rptlogin_ctl00_txtEmail" tabindex="1" class="textinput">
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label2">Password:</span>
<input type="password" name="ctl00$mstPartBase$rptlogin$ctl00$txtPassword" id="ctl00_mstPartBase_rptlogin_ctl00_txtPassword" tabindex="2" class="textinput">
<div class="aclogin-action">
<div class="fl-left">
<div class="item">
<label>
<input type="checkbox" id="ctl00_mstPartBase_rptlogin_ctl00_chkRemember" name="ctl00$mstPartBase$rptlogin$ctl00$chkRemember" tabindex="3">
Remember me
</label>
</div>
<a id="ctl00_mstPartBase_rptlogin_ctl00_LinkButton1" tabindex="5" class="forgotpass" href="javascript:__doPostBack('ctl00$mstPartBase$rptlogin$ctl00$LinkButton1','')">Forgot password?</a>
</div>
<div id="btn" style="float:right;">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnLogin" value="Login" id="ctl00_mstPartBase_rptlogin_ctl00_btnLogin" class="btnlogin" de="" style="margin-left: 83px">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnRegister" value="Register" id="ctl00_mstPartBase_rptlogin_ctl00_btnRegister" class="btnlogin">
</div>
<div class="clearfix">
</div>
<br>
</div>
</fieldset>
</div>
</div>
</div>
</div></div>
CSS
#acloginpod {
background: url("../Images/acloginpodbg.gif") repeat-x scroll 0 0 #ebebeb;
border: 1px solid #d3d3d3;
}
#acloginpod label {
color: #444;
display: block;
font-size: 15px;
margin-bottom: 3px;
}
#caption {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 3px;
color: White;
font-family: arial;
font-size: 14px;
font-weight: bold;
padding: 10px;
text-align: center;
text-shadow: 0 2px 1px #000;
}
.btnlogin {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 6px;
box-shadow: 0 0 2px #333;
color: #ffffff;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: bold;
height: 33px;
padding: 3px 10px;
text-decoration: none;
text-shadow: 0 2px 1px #000;
}
.btnlogin:hover {
background: url("../Images/button-background-2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 3px #046629 inset;
text-shadow: 0 2px 3px #333;
}
.btnlogin:active {
position: relative;
top: 1px;
}
#acloginpod input.textinput {
background: url("../Images/textinputbg.gif") repeat-x scroll 0 0 #ffffff;
border: 1px solid #d3d3d3;
color: #000000;
font-size: 15px;
margin-bottom: 10px;
padding: 7px 0;
text-indent: 7px;
width: 100%;
}
#acloginpod .acloginform {
margin: 22px;
}
#acloginpod form, #acloginpod fieldset {
border-width: 0;
margin: 0 !important;
padding: 0 !important;
}
also here i am pasting screen shot.
extra space is coming between two div called dialog2 & container so just guide me which css i need to modify as a result extra space will not come in left,right,top & bottom side. thanks
here is the js fiddle demo of my code http://jsfiddle.net/tridip/jj2cM/
here is my full code which is working
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
<style type="text/css">
.noTitleStuff .ui-dialog-titlebar {display:none}
.offscreen {position: absolute; left: -999em;}
.BusyStyles
{
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#opener2").click(function () {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$("<div id='dialog2'/>").dialog(
{
autoOpen: false,
width: 50,
height: 50,
dialogClass: 'noTitleStuff',
draggable: true,
resizable: false,
open: function (event, ui) {
$(this).dialog("widget").addClass('BusyStyles');
$(this).parent().appendTo("form");
}
}).dialog('open').show()
.load('login.aspx', function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
//alert('data found');
// sHtml = responseTxt;
// var element = $(this).find('#Container'); ;
// //$(element).addClass('offscreen').show();
// var width = element.width();
// var height = element.height();
// //alert('h ' + height + ' w ' + width);
// sHtml = $(sHtml).find('#Container').html();
// $sHtml = $(sHtml)
// $sHtml.css({ 'display': 'none' }).appendTo('div#dialog2');
$(this).dialog("widget").removeClass('BusyStyles');
$("#dialog2").dialog("widget").animate({
width: '346px',
height: 'auto'
}, {
duration: 200,
step: function () {
$("#dialog2").dialog('option', 'position', 'center');
}
});
$("#dialog2").css({ height: 'auto', width: 'auto' });
//$("#dialog2").html(sHtml);
}
if (statusTxt == "error") {
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
//$("#dialog2").dialog('open').show();
}
else {
$("#dialog2").dialog("close").dialog('destroy').remove();
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<button id="opener2">open the dialog2</button>
</form>
</body>
</html>


I think you have to set padding:0 to this class:
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
fiddle

Related

I can't figure out how to control the CSS height of an ahref

I have an HTML page with embedded CSS styling. It has a form with an input button that says "Submit Payment" using #fjButton and height of 54, which gets obeyed. I also have an that has an id #fjButton2 with a height of 14... both set to !important. The #fjButton2 doesn't get obeyed. Im's sure it's some stupid thing, but i just can't figure it out... the stays at 32px no matter what i do. See it at:
https://codepen.io/johnstonf/full/YzwGqNO
<!DOCTYPE html>
<html>
<head>
<title>Test-Store</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Inter&display=swap" rel="stylesheet">
<!-- Landing page styling -->
<style type="text/css">
body{
background-color: #f2f4f9;
}
h3, h5{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
}
h3{
font-size: 36px;
}
h5{
font-size: 24px;
}
p, label{
font-family: 'Inter', sans-serif;
}
hr{
color:#fff;
background-color: #fff;
border-top:1px solid #fff;
margin-top:10px;
margin-bottom: 10px;
}
#container{
width:1200px;
margin:0 auto;
padding-top: 3%;
}
.column-6{
text-align: center;
width: 50%;
float:left;
}
#left-wrapper{
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#right-wrapper{
padding-top: 13px;
margin-top: 13px;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#profile-pic{
width:200px;
display:block;
margin: 0 auto;
border-radius: 50%;
float:left;
}
#left-wrapper-header{
min-width:50%;
float:left;
padding-left:20px;
}
#left-wrapper-header h3{
color:#fff;
}
#right-wrapper h3{
color: #10a195;
}
.Z9999{
margin-left: 1px;
width: 99%;
}
/* ------------------------ FORM FIELDS ------------------------ */
.form-field-12{
width: 100%;
margin-bottom: 6px;
padding-top: 3px;
}
.form-field-6{
width: 50%;
float:left;
margin-bottom: 1px;
}
select{
width: 100%;
height: 25px!important;
box-shadow: 0 1px 3px 0 #dce0e6;
padding: 1px 2px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
font-size: 20px;
color: #44464a;
}
input{
box-shadow: 0 1px 3px 0 #dce0e6;
height:40px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
width: 95%;
padding: 5px;
font-size: 16px;
}
input::placeholder {
color: #9fa1a6;
}
/* ------------------------ BUTTON STYLING ------------------------ */
#fjButton {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 54px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
.myButton:hover {
opacity: .6;
}
#media screen and (max-width:1200px){
#container{
width:80%;
}
.column-6{
width: 100%;
}
}
#media screen and (max-width:800px){
#container{
width:100%;
}
.Z9999{
margin-left: 20px;
width: 100px;
}
}
</style>
<!-- Success page styling -->
<style type="text/css">
h4{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
font-size: 24px;
}
#box{
max-width: 500px;
margin:0 auto;
margin-top: 100px;
padding:30px;
background-color: #fff;
text-align: center;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 4px;
border: 1px solid transparent;
}
.myButton {
background-color:#72cca7;
background-color:#26367e;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:17px;
padding:10px;
width:30%;
border-radius: 0;
text-decoration:none;
text-align: center;
transition: .3s;
}
.myButton:hover {
opacity: .6;
}
#succes-icon{
width: 100px;
}
</style>
</head>
<body>
<style type="text/css">
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
<script src="https://js.stripe.com/v3/"></script>
<div id="container">
<div class="column-6">
<div id="left-wrapper">
<img id="profile-pic" src="{% static 'images/logo-20may29.png' %}">
<div id="left-wrapper-header">
<h3>Item Purchase</h3>
</div>
<div style="clear:left"></div>
<hr>
<!-- Add form here -->
<form action="{% url 'charge' %}" method="post" id="payment-form">
<div class="form-field-12">
<label for="amount"><b>Pick a product from this dropdown:</b></label>
<select required name="amount" id="amount">
<option selected value="1">$1 CAD ------> TEST</option>
<option value="1">$1 CAD -----> 1 item</option>
<option value="2">$2 CAD -----> 2 items</option>
<option value="3">$3 CAD ----> 3 items</option>
<option value="4">$4 CAD ----> 4 items</option>
<option value="5">$5 CAD ---> 5 items</option>
</select>
</div>
<div class="form-field-6">
<label for="email"><strong>* Enter your email address:</strong></label>
<input required type="email" name="email" placeholder="* email...">
</div>
<div class="form-field-6">
<label for="username"><strong>* Desired username / login name:</strong></label>
<input required type="text" name="username" placeholder="* username...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Dogs name:</strong></label>
<input type="text" name="dog" placeholder="Dogs name...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Favorite beer:</strong></label>
<input type="text" name="beer" placeholder="Favorite beer...">
</div>
<div class="form-field-6">
<label for="country"><strong>* Enter your Country:</strong></label>
<input required type="text" name="country" placeholder="* Country...">
</div>
<div class="form-field-6">
<label for="phone"><strong>* Enter your phone number:</strong></label>
<input type="tel" id="phone" name="phone" placeholder="* Phone..."
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890</small>
</div>
<div class="form-row">
<label for="card-element">
<strong>Credit or debit card</strong>
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert">
</div>
</div>
<div style="clear:left">
</div>
<hr>
<input id="fjButton" style="background-color:#10a195;height:12px" type="submit" value="Submit Payment" name="">
<hr>
<a href="https://opp.ca" target="_blank" id="fjButton2" style="background-color:#10a195; height:77px" >OPP Homepage</a>
<br><br><br><br>
</form>
</div>
</div>
<div class="column-6">
<div id="right-wrapper">
<img class="form-field-12" src="{% static 'images/Z9999.png' %}">
<h3> We appreciate you!</h3>
<hr>
</div>
</div>
</div>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_live_blahblah');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
</body>
</html>

I found this finally... CSS - Why am I not able to set height and width of <a href> elements? and as it states...
"As the others have said, by default is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this":
a {
display: block;
}
Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.
a {
display: inline-block;
}

Height won't have any effect on that <a> tag as it has a display of inline, so you simply need to change its display to something like inline-block to make it obey the set height, like
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
display:inline-block;
}
Hope it helps.

why is my button not appearing next to my <textarea> tag?

why isn't by button named "copy" appearing next to my second textarea tag and instead appearing under it even though im sorting elements with display: flex; in css? I have tried putting the display: flex;in the css for my second form tag but that does not work. Thank you for taking the time to read this, my code is below.
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function idk() {
/* Get the text field */
var copyText = document.getElementById("ascii");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
body {
margin-top: 2px;
margin-left: 20px;
display: flex;
}
.button {
margin-top: none;
}
.txt {
margin-right: 20px;
background: #ffffff;
border: 0;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 0px;
}
.text {
border: none;
margin-top: 18px;
margin-left: 18px;
height: 660px;
width: 630px;
outline: none;
font-size: 22px;
resize: none;
}
.asci {
background: #ffffff;
border: #4CAF50;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.ascii {
margin-top: 20px;
margin-left: 10px;
height: 660px;
width: 630px;
outline: none;
font-size: 22px;
resize: none;
}
<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="alphabetical.css">
</head>
<body>
<form class="txt">
<textarea class="text" id="input" type="text" placeholder="type your text here" onkeyup="myFunction()"></textarea>
</form>
<form class="asci">
<textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="idk()">
</form>
<script src="alphabetical.js"></script>
</body>
</html>

How to set the div to take the space to the end of the container?

I have section that has few elements inside. They are all on the same line/row. I used div elements combined with CSS to put all elements next to each other. I'm not sure if this is the best practice to layout the elements and I'm open to suggestions. My problem is message box that is triggered if user didn't meet search criteria. Field box is set to display:none. After user clicks on the Search if message shows up everything shifts to the left. I'm wondering if message can expand to the right side of the screen instead of pushing elements to the left? Also I'm wondering how that would affect smaller screen and what would be the best option in that case?
$('#searchBtn').on('click',searchFun);
function searchFun(){
var menuVal = $.trim($('#menu').val()),
searchFldVal = $.trim($('#searchFld').val());
if(!searchFldVal){
$('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){
$(this).removeClass("error").dequeue();
});
}else if(searchFldVal.length < 3){
$('#searchMsg').addClass("error").show().text('You must enter at least 3 characters to search on.').delay(4000).fadeOut('slow').queue(function(){
$(this).removeClass("error").dequeue();
});
}else{
console.log('Search record.');
}
}
section.mainBox{
width: 100%;
padding-top: 0;
background-color: white;
border: 2px solid #000099;
}
div#Container {
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
background-color: #B0C4DE;
border-bottom: 2px solid #000099;
}
div.nextTo {
display: inline-block;
margin-left: 5px;
}
span.msgMainBox {
display:none;
margin: 2px 5px;
padding:2px 25px 2px 35px;
}
span.error {
border: 1px solid;
margin: 5px;
padding:5px 10px 5px 40px;
background-repeat: no-repeat;
background-position: 10px center;
border-radius: 3px;
display: block;
}
span.error {
color: #D8000C;
background-color: #FFBABA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="mainBox">
<div id="Container">
<div class="nextTo">
<select name="menu" id="menu">
<option value="1">Name</option>
<option value="2">DOB</option>
<option value="3">City</option>
</select>
</div>
<div class="nextTo">
<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: Marco Polo" />
</div>
<div class="nextTo">
<input type="button" name="searchBtn" id="searchBtn" value="Search"/>
</div>
<div class="nextTo">
<input type="button" name="lockBtn" id="lockBtn" value="Unlock" style="display:none" />
</div>
<div class="nextTo">
<span id="searchMsg" class="msgMainBox"></span>
</div>
</div>
</section>

You can make the element absolute position to avoid having the push effect. And for small screen it will go to the bottom:
$('#searchBtn').on('click', searchFun);
function searchFun() {
var menuVal = $.trim($('#menu').val()),
searchFldVal = $.trim($('#searchFld').val());
if (!searchFldVal) {
$('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function() {
$(this).removeClass("error").dequeue();
});
} else if (searchFldVal.length < 3) {
$('#searchMsg').addClass("error").show().text('You must enter at least 3 characters to search on.').delay(4000).fadeOut('slow').queue(function() {
$(this).removeClass("error").dequeue();
});
} else {
console.log('Search record.');
}
}
section.mainBox {
width: 100%;
padding-top: 0;
background-color: white;
border: 2px solid #000099;
}
div#Container {
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
background-color: #B0C4DE;
border-bottom: 2px solid #000099;
}
div.nextTo {
display: inline-block;
margin-left: 5px;
}
div.nextTo:last-child {
position: absolute;
top: 6px;
}
span.msgMainBox {
display: none;
margin: 2px 5px;
padding: 2px 25px 2px 35px;
}
span.error {
border: 1px solid;
margin: 5px;
padding: 5px 10px 5px 40px;
background-repeat: no-repeat;
background-position: 10px center;
border-radius: 3px;
display: block;
}
span.error {
color: #D8000C;
background-color: #FFBABA;
}
#media all and (max-width:800px) {
div.nextTo:last-child {
position: static;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="mainBox">
<div id="Container">
<div class="nextTo">
<select name="menu" id="menu">
<option value="1">Name</option>
<option value="2">DOB</option>
<option value="3">City</option>
</select>
</div>
<div class="nextTo">
<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: Marco Polo">
</div>
<div class="nextTo">
<input type="button" name="searchBtn" id="searchBtn" value="Search">
</div>
<div class="nextTo">
<input type="button" name="lockBtn" id="lockBtn" value="Unlock" style="display:none">
</div>
<div class="nextTo">
<span id="searchMsg" class="msgMainBox"></span>
</div>
</div>
</section>

You can do it with the positioning, some modifications to margins and padding and #media queries which, when screen width gets too narrow, display the error message below and horizontally centered:
$('#searchBtn').on('click',searchFun);
function searchFun(){
var menuVal = $.trim($('#menu').val()),
searchFldVal = $.trim($('#searchFld').val());
if(!searchFldVal){
$('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){
$(this).removeClass("error").dequeue();
});
}else if(searchFldVal.length < 3){
$('#searchMsg').addClass("error").show().text('You must enter at least 3 characters to search on.').delay(4000).fadeOut('slow').queue(function(){
$(this).removeClass("error").dequeue();
});
}else{
console.log('Search record.');
}
}
section.mainBox{
width: 100%;
padding-top: 0;
background-color: white;
border: 2px solid #000099;
}
div#Container {
position: relative; /* added */
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
background-color: #B0C4DE;
border-bottom: 2px solid #000099;
}
div.nextTo {
display: inline-block;
margin-left: 5px;
}
span.msgMainBox {
display: none;
margin: 2px 5px;
padding: 2px 25px 2px 35px;
}
span.error {
border: 1px solid;
/* added */
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%); /* vertically centered */
margin: 0 5px; /* modified */
padding: 0 5px; /* modified */
/***/
background-repeat: no-repeat;
background-position: 10px center;
border-radius: 3px;
display: block;
}
span.error {
color: #D8000C;
background-color: #FFBABA;
}
/* added */
#media screen and (max-width: 630px) { /* adjust to your needs */
span.error {
top: calc(100% + 5px); /* + 5px "margin-top" */
left: 50%;
transform: translateX(-50%); /* horizontally centered */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="mainBox">
<div id="Container">
<div class="nextTo">
<select name="menu" id="menu">
<option value="1">Name</option>
<option value="2">DOB</option>
<option value="3">City</option>
</select>
</div>
<div class="nextTo">
<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: Marco Polo" />
</div>
<div class="nextTo">
<input type="button" name="searchBtn" id="searchBtn" value="Search"/>
</div>
<div class="nextTo">
<input type="button" name="lockBtn" id="lockBtn" value="Unlock" style="display:none" />
</div>
<div class="nextTo">
<span id="searchMsg" class="msgMainBox"></span>
</div>
</div>
</section>

How to show an HTML page of a submit form in a new div

I have a submit form for my customers to track their orders with a tracking code. I want to show the result of order status which is checking from the shipping company's website.
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 0px;
margin-bottom: 5px;
resize: vertical;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 14px;
font-weight: bold;
}
input[type=submit] {
background-color: #000;
color: white;
padding: 10px 20px;
border: none;
border-radius: 20px;
font-weight: bold;
cursor: pointer;
}
input[type=submit]:hover {
color: #FFF;
background-color: #dd0017;
}
input[type=submit]:active {
box-shadow: inset 0px 0px 10px #000;
color: #FFF;
background-color: #dd0017;
}
.container {
border-radius: 5px;
background-color: rgba(241, 98, 114, 0.25);
padding: 0px;
margin-bottom: 20px;
}
<div class="container">
<div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div>
<form action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" onsubmit="window.open('','top','resizable=1, scrollbars=1,width=790,left=25,top=25')" target="top">
<h2><label for="takipnoalani">Takip NO :</label></h2>
<input id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." type="text" />
<input name="action" style="font-size:16px;float:right;" type="submit" value="Getir" /> </form>
</div>
<div id="show_result" style="border:2px solid red;">
I want to show the result of query here<br/>But I couldn't :( <br/> And it would be better if this red bordered div is not shown until the customer click the "Getir" button.
</div>
My code is opening it in a new page. However, I want to show it on the same page exactly under that form with a new (or existing but hidden) div. I don't know if it is possible or not. I looked at every question similar to this, but couldn't find a solution.
I would greatly appreciate it if someone could help me.

I recommend you to use Ajax to load the content and show it in form. Note I commented out the part which I use Ajax to load the content from the action because the action is not available here but it should be pretty straightforward.
$(document).ready(function() {
var result = "Result from your action.";
$('#form1').on('submit', function(e){
e.preventDefault();
$('#show_result').html("Result will show up here").slideDown('slow');
/*
var $form = $(this);
$.post($form.attr('action'), $form.serialize(), function(data){
$('#show_result').html("Result will show up here").slideDown('slow');
});*/
return false;
});
});
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 0px;
margin-bottom: 5px;
resize: vertical;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 14px;
font-weight: bold;
}
input[type=submit] {
background-color: #000;
color: white;
padding: 10px 20px;
border: none;
border-radius: 20px;
font-weight: bold;
cursor: pointer;
}
input[type=submit]:hover {
color: #FFF;
background-color: #dd0017;
}
input[type=submit]:active {
box-shadow: inset 0px 0px 10px #000;
color: #FFF;
background-color: #dd0017;
}
.container {
border-radius: 5px;
background-color: rgba(241, 98, 114, 0.25);
padding: 0px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div>
<form action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" onsubmit="window.open('','top','resizable=1, scrollbars=1,width=790,left=25,top=25')" target="top" id="form1">
<h2><label for="takipnoalani">Takip NO :</label></h2>
<input id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." type="text" />
<input name="action" style="font-size:16px;float:right;" type="submit" value="Getir" /> </form>
</div>
<div id="show_result" style="display:none;border:2px solid red;">
</div>

After I searched for hours, I found a similar question here:
Similar Question but opening a PHP file
And design it for my solution.
Thanks to everyone. Here is my solution:
$('#kargotakip').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#sonucgoster').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 0px;
margin-bottom: 5px;
resize: vertical;
font-family:"Comic Sans MS", cursive,sans-serif;
font-size: 14px;
font-weight: bold;
}
input[type=submit] {
background-color: #000;
color: white;
padding: 10px 20px;
border: none;
border-radius: 20px;
font-weight: bold;
cursor: pointer;
}
input[type=submit]:hover {
color: #FFF;
background-color: #dd0017;
}
input[type=submit]:active {
box-shadow: inset 0px 0px 10px #000;
color: #FFF;
background-color:#dd0017;
}
.container {
border-radius: 5px;
background-color: rgba(241, 98, 114, 0.25);
padding: 0px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div>
<form id="kargotakip" method="GET" action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" >
<h2><label for="takipnoalani">Takip NO :</label></h2>
<input type="text" id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." />
<input type="submit" name="action" value="Getir" style="font-size:16px;float:right;" />
</form>
</div>
<div id="sonucgoster" style="background-color:rgba(241, 98, 114, 0.25);border-radius: 5px; border:1px solid #ff60cd;"></div>

Aligning + and - for shopping basket incrementer

I want to have my code like in this image
It is a simple shopping basket incrementer. I put the border around for 1 but i'm not sure how to align + and - and put the border around. I searched for many incrementers but I couldn't find one like in the image.
Someone please give me a help.
$(function() {
$(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
$(".button").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
});
input[type=text] {
float: left;
width: 40px;
font: bold 20px Helvetica, sans-serif;
padding: 3px 0 0 0;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
<div class="numbers-row">
<input type="text" id="incrementer" value="1">
</div>
</form>
</body>
</html>

Forget JavaScript. Just use a number input in the first place.
input[type=number] {
float: left;
width: 40px;
font: bold 20px Helvetica, sans-serif;
padding: 3px 0 0 0;
text-align: center;
}
<form method="post" action="#">
<div class="numbers-row">
<input type="number" id="incrementer" min="0" value="1">
</div>
</form>

You have to just add some icons in place of + and minus sign and there you go.
$(function() {
$(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
$(".button").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
});
input[type=text] {
float: left;
width: 40px;
font: bold 20px Helvetica, sans-serif;
padding: 3px 0 0 0;
text-align: center;
position: absolute;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border: 1px solid #C9C6C6;
}
.inc.button {
display: inline-block;
position: relative;
border: 1px solid #C9C6C6;
left: 41px;
height: 13px;
top: 2px;
border-top-right-radius: 3px;
}
.dec.button {
display: inline-block;
position: relative;
border: 1px solid #C9C6C6;
left: 30px;
height: 7px;
top: 16px;
width: 9px;
border-bottom-right-radius: 3px;
padding: 0px 0px 5px 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
<div class="numbers-row">
<input type="text" id="incrementer" value="1">
</div>
</form>
</body>
</html>

try below code:
$(function() {
$(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
$(".button").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
});
input[type="text"] {
float: left;
font: bold 20px Helvetica,sans-serif;
padding: 5px 11px;
text-align: left;
width: 50px;
}
.inc.button {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
left: 57px;
padding: 0 6px 0 8px;
position: absolute;
}
.dec.button {
border-left: 1px solid #ccc;
left: 57px;
padding: 0 10px;
position: absolute;
top: 25px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
<div class="numbers-row">
<input type="text" id="incrementer" value="1">
</div>
</form>
</body>
</html>