Develop Reference

Activate button when file is selected [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I know a lot of people asked for this question but i cant do that.
I need to activate button when label "Select file" will change. I'm already made js that "Select file" label is changing to filename.
var submit = $(".attachment_add_inlay input[type='submit']");
if ($(".attachment_add_inlay label.custom_button").val('Select file') == true) {
submit.removeClass('disabled');
submit.removeAttr('title');
submit.removeAttr('disabled');
} else {
submit.addClass('disabled');
submit.attr('title', 'Należy dodać plik');
submit.attr('disabled', 'disabled');
}
.inputs_inline {
display: table;
width: 100%;
padding-bottom: 30px;
}
.inputs_inline.edit {
background: #f7f8fa;
border-top: 1px solid #c8c9cc;
border-bottom: 1px solid #c8c9cc;
margin-bottom: -1px;
}
.inputs_inline.edit .inside {
padding-right: 0;
}
.inputs_inline .headline {
border-bottom: 0;
}
.inputs_inline .inside {
white-space: normal;
padding-right: 0;
}
.inputs_inline .form-group {
display: inline-table;
margin-right: 15px;
margin-bottom: 0;
}
.inputs_inline .form-group label {
display: block;
color: #1c1f24;
font: 500 10px 'Roboto', sans-serif;
text-transform: uppercase;
margin: 10px 0 5px 0;
}
.inputs_inline .form-group label.custom_button {
white-space: nowrap;
}
.inputs_inline .form-group input,
.inputs_inline .form-group select,
.inputs_inline .form-group textarea {
border: 1px solid #c8c9cc;
}
.form-group-full {
width: 100%;
padding-right: 15px;
}
.form-group-half {
width: 48.4%;
padding-right: 15px;
}
.form-control-label {
display: block;
font: 500 10px 'Roboto', sans-serif;
text-transform: uppercase;
color: #1c1f24;
margin: 10px 0 5px 0;
}
.inputs_inline .date {
display: inline-table;
width: 200px;
}
.inputs_inline .phone_inputs * {
display: inline-block;
}
.inputs_inline .phone_inputs select {
padding: 0 6px;
width: 70px;
}
.inputs_inline .phone_inputs span {
margin-left: -4px;
margin-right: 1px;
}
.inputs_inline .phone_inputs input {
width: 135px;
}
.inputs_inline .phone_inputs.edit textarea {
max-width: 643px;
}
.inputs_inline span.check_box label {
display: inline;
}
.inputs_inline .date-picker.input-group .form-control {
float: none;
}
.inputs_inline .form-group>span {
display: block;
margin-top: 15px;
}
.inputs_inline .form-group input[type="checkbox"] {
margin-top: 10px;
}
.inputs_inline .date-picker.input-group .form-control {
float: none;
}
.label-server {
display: block;
font: 500 10px 'Roboto', sans-serif;
text-transform: uppercase;
color: #1c1f24;
margin: 10px 0 5px 0;
}
.section_inputs label {
display: block;
font: 500 10px 'Roboto', sans-serif;
text-transform: uppercase;
color: #1c1f24;
margin: 10px 0 5px 0;
}
.section_inputs .phone_inputs {
overflow: auto;
clear: both;
display: flex;
}
.section_inputs .phone_inputs * {
float: left;
}
.section_inputs .phone_inputs select {
padding: 0 6px;
width: 70px;
}
.section_inputs .phone_inputs span {
margin: 10px 5px;
margin-top: 38px;
margin-left: 78px;
}
.section_inputs .phone_inputs input {
width: 116px;
margin-left: 8px;
}
.section_inputs .section_tabs label {
margin-top: 0;
}
.section_inputs span.check_box label {
display: inline;
}
.section_inputs .both_inline {
display: inline;
width: 46%;
margin-right: 10px;
}
.section_inputs input[type="text"],
.section_inputs input[type="number"] select,
.section_inputs textarea {
border: 1px solid #c8c9cc;
}
.section_inputs input[type="text"],
.section_inputs input[type="number"] select {
height: 34px;
}
.custom_button {
font: 500 12px Roboto, sans-serif;
background-color: #014890;
color: #FFF;
min-width: 76px;
height: 29px;
border: 0;
border-radius: 5px;
cursor: pointer;
transition: all .2s;
}
.custom_button:hover {
text-decoration: none;
border: 0;
}
.headline {
display: flex;
font: 500 18px 'Roboto';
height: 48px;
padding-left: 10px;
border-bottom: 1px solid #cdced1;
}
.headline .left {
display: inline-flex;
align-self: center;
align-items: center;
font-size: 16px;
}
.headline .left img {
align-self: center;
width: 15px;
margin: 0 8px 0 5px;
}
.headline .left.bold {
font: 'Roboto', sans-serif;
margin-left: 5px;
}
.headline .left>div {
align-self: center;
}
.headline .left i {
cursor: default;
}
.headline .right {
display: inline-flex;
align-items: center;
align-self: center;
margin-left: auto;
margin-right: 15px;
}
.headline .right input,
.headline .right button {
margin-left: 10px;
}
.headline_main {
box-sizing: content-box;
height: 89px;
border-bottom: 1px solid #cdced1;
}
.headline_main .inside {
display: flex;
height: 48px;
padding-left: 10px;
}
.headline_main .inside .text {
width: auto;
color: #555;
font: 500 16px Roboto, sans-serif;
display: inline-flex;
align-items: center;
}
.headline_main .inside .text img {
align-self: center;
width: 15px;
height: 100%;
margin: 0 8px 0 5px;
}
.headline_main .inside .text i {
cursor: default;
}
.headline_main .inside .btns {
margin-left: auto;
margin-right: 8px;
margin-top: 14px;
}
.inputs_headline_select {
margin-top: 9px;
border: none;
padding: 0;
height: 40px;
}
.inputs_headline_select.margin_headline_select {
margin-top: 22px;
}
.inputs_headline_select .right {
margin-right: 0;
}
.inputs_headline_select a {
background: none;
border: 0;
border-bottom: 1px solid #e1e1e1;
border-radius: 0;
padding: 0;
height: 19px;
}
.inputs_headline_select a:hover {
border: 0;
border-bottom: 1px solid #e1e1e1;
background: none;
}
.inputs_headline_select a:hover div {
color: #b5b5b5;
}
.inputs_headline_select a:active {
text-decoration: none;
}
.inputs_headline_select a div {
font: 500 12px 'Roboto', sans-serif;
color: #b3b3b3;
}
.panel_buttons .disabled {
pointer-events: none;
opacity: .5;
}
input[type="submit"].disabled {
/*pointer-events: none;*/
opacity: .5;
}
.inputs_inline {
display: table;
width: 100%;
padding-bottom: 30px;
}
.inputs_inline.edit {
background: #f7f8fa;
border-top: 1px solid #c8c9cc;
border-bottom: 1px solid #c8c9cc;
margin-bottom: -1px;
}
.inputs_inline.edit .inside {
padding-right: 0;
}
.inputs_inline .headline {
border-bottom: 0;
}
.inputs_inline .inside {
white-space: normal;
padding-right: 0;
}
.inputs_inline .form-group {
display: inline-table;
margin-right: 15px;
margin-bottom: 0;
}
.inputs_inline .form-group label {
display: block;
color: #1c1f24;
font: 500 10px 'Roboto', sans-serif;
text-transform: uppercase;
margin: 10px 0 5px 0;
}
.inputs_inline .form-group label.custom_button {
white-space: nowrap;
}
.inputs_inline .form-group input,
.inputs_inline .form-group select,
.inputs_inline .form-group textarea {
border: 1px solid #c8c9cc;
}
.custom_button {
font: 500 12px Roboto, sans-serif;
background-color: #014890;
color: #FFF;
min-width: 76px;
height: 29px;
border: 0;
border-radius: 5px;
cursor: pointer;
transition: all .2s;
}
.custom_button:hover {
text-decoration: none;
border: 0;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select {
height: 34px;
}
input[type="file"] {
margin-top: 10px;
}
.inputfile {
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile+label {
display: inline-block;
width: 100px;
height: 34px;
color: #FFF !important;
margin-top: 0 !important;
padding-top: 10px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_OperatingPanel" class="inputs_inline edit attachment_add_inlay">
<div class="headline">
<div class="left bold">
<div id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_dodaj">
Add
</div>
</div>
<div class="right">
<input type="submit" value="Upload" id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_AddNewButton" class="custom_button">
<a id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_CancelButton" class="exit_navigate" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$DetailsControl$RepairTabContainer$ctl04$AttachmentsTabPanel$CancelButton", "", true, "", "", false, true))'>
<i class="ico-exit"></i>
</a>
</div>
</div>
<div class="col-xs-12 inside">
<div class="form-group">
<label>File</label>
<div id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_ctl06">
<input type="file" name="ctl00$MainContent$DetailsControl$RepairTabContainer$ctl04$AttachmentsTabPanel$AttachmentFileUpload" id="AttachmentFileUpload" class="inputfile">
<label class="custom_button" for="AttachmentFileUpload">Select file</label>
</div>
</div>
<div class="form-group">
<label>Description</label>
<input name="ctl00$MainContent$DetailsControl$RepairTabContainer$ctl04$AttachmentsTabPanel$DescriptionTextBox" type="text" maxlength="255" id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_DescriptionTextBox" class="form-control"
style="width:298px;">
</div>
</div>
</div>
Jsfiddle Demo link:
Don't look so much for JS code there. It's wrong.
THANK YOU!

Update
I updated the code below and check out this fiddle
https://jsfiddle.net/2j9s3e4L/
Add the following code to you script.
And change you ID names because they are chaotic.
$(".custom_button").prev("input[type='file']").on('change', function(){
var description = $(this).closest('.form-group').next('.form-group').find("input[type='text']");
if( $(this).val().length ){
description.val($(this).val())
submit
.removeClass('disabled')
.removeAttr('title')
.removeAttr('disabled');
}else{
description.val('')
}
})

To do so you have to trigger some action everytime users change their selection. So let's consider a more simple HTML to start with:
<input type="file" id="AttachmentFileUpload">
<BR>
<input type="submit" value="Submit">
First, you need to set a default state for submit button, which is DISABLED until users select a file.
$("input[type='submit']").attr('disabled','disabled');
Secondly, you need to check if some file was selected in order to enabled the submit button
$("#AttachmentFileUpload").change(function(){
if(this.value == ''){
$("input[type='submit']").attr('disabled','disabled');
}
else{
$("input[type='submit']").removeAttr("disabled");
}
});

Center HTML Div Using CSS

How would I horizontally center the following div with the following css. I've tried various methods but nothing seems to work. What can I do to fix this problem? Thank you very much.
CSS:
#import "compass/css3";
.flexsearch--wrapper
{
max-width: 90%;
overflow: hidden;
background: transparent;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--input-wrapper {
padding: 0 66px 0 0; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
width: 100%;
}
/***********************
* Configurable Styles *
***********************/
.flexsearch {
padding: 0 25px 0 200px; /* Padding for other horizontal elements */
}
.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 60px;
padding: 0 46px 0 10px;
border-color: #333;
border-radius: 35px; /* (height/2) + border-width */
border-style: solid;
border-width: 5px;
margin-top: 15px;
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 26px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
position: absolute;
right: 0;
top: 0;
display: block;
width: 60px;
height: 60px;
padding: 0;
border: none;
margin-top: 20px; /* margin-top + border-width */
margin-right: 5px; /* border-width */
background: transparent;
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 40px;
line-height: 60px;
}
.flexsearch--input:focus {
outline: none;
border-color: #333;
}
.flexsearch--input:focus.flexsearch--submit {
color: #333;
}
.flexsearch--submit:hover {
color: #333;
cursor: pointer;
}
::-webkit-input-placeholder {
color: #333;
}
input:-moz-placeholder {
color: #333
}
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="#" method="post">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="search" placeholder="Search">
</div>
<input class="flexsearch--submit" type="submit" value="➜"/>
</form>
</div>
</div>
Thanks in advance.

add margin: auto; to .flexsearch--wrapper.
Then, remove the padding from .flexsearch and add max-width: 350px; margin: auto;. That way the input looks good and won't break when using small width viewport.
Thanks #NewToJS.
.flexsearch--wrapper
{
max-width: 90%;
overflow: hidden;
background: transparent;
margin: auto;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--input-wrapper {
padding: 0 66px 0 0; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
width: 100%;
}
/***********************
* Configurable Styles *
***********************/
.flexsearch {
/* padding: 0 200px 0 200px; Padding for other horizontal elements */
margin: auto;
max-width: 350px;
}
.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 60px;
padding: 0 46px 0 10px;
border-color: #333;
border-radius: 35px; /* (height/2) + border-width */
border-style: solid;
border-width: 5px;
margin-top: 15px;
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 26px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
position: absolute;
right: 0;
top: 0;
display: block;
width: 60px;
height: 60px;
padding: 0;
border: none;
margin-top: 20px; /* margin-top + border-width */
margin-right: 5px; /* border-width */
background: transparent;
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 40px;
line-height: 60px;
}
.flexsearch--input:focus {
outline: none;
border-color: #333;
}
.flexsearch--input:focus.flexsearch--submit {
color: #333;
}
.flexsearch--submit:hover {
color: #333;
cursor: pointer;
}
::-webkit-input-placeholder {
color: #333;
}
input:-moz-placeholder {
color: #333
}
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="#" method="post">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="search" placeholder="Search">
</div>
<input class="flexsearch--submit" type="submit" value="➜"/>
</form>
</div>
</div>

Divs not lining up in Bootstrap/Javascript checkbox menu

I made this checkbox menu. I want all divs to line up under and around each other when each box is checked, which some do beautifully, using Bootstrap. However, when you check "Research Methods," the two divs are separated from eachother and don't line up at the top/next to each other. I am wondering why this is? Here is a live demo:
http://dev.wwnorton.com/sandbox/showcase2015/test/OEBPS5/1-ChooseANorton.html
Here is the code:
Javascript:
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych').show():$('#dvIntroPsych').hide();
});
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych1').show():$('#dvIntroPsych1').hide();
});
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych2').show():$('#dvIntroPsych2').hide();
});
$('#chkResearch').click(function(){
this.checked?$('#dvResearch').show():$('#dvResearch').hide();
});
$('#chkResearch').click(function(){
this.checked?$('#dvResearch2').show():$('#dvResearch2').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych').show():$('#dvSocPsych').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych2').show():$('#dvSocPsych2').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych3').show():$('#dvSocPsych3').hide();
});
$('#chkCogPsych').click(function(){
this.checked?$('#dvCogPsych').show():$('#dvCogPsych').hide();
});
$('#chkCogPsych').click(function(){
this.checked?$('#dvCogPsych2').show():$('#dvCogPsych2').hide();
});
$('#chkPersonPsych').click(function(){
this.checked?$('#dvPersonPsych').show():$('#dvPersonPsych').hide();
});
$('#chkPersonPsych').click(function(){
this.checked?$('#dvPersonPsych2').show():$('#dvPersonPsych2').hide();
});
$('#chkDevPsych').click(function(){
this.checked?$('#dvDevPsych').show():$('#dvDevPsych').hide();
});
$('#chkHistory').click(function(){
this.checked?$('#dvHistory').show():$('#dvHistory').hide();
});
});
And CSS:
.spacer {
height: 10px;
width: 100%;
clear: both;
}
.bookcontainer {
width: 100%;
float: left;
display: block;
min-height: 260px;
margin: 5px;
padding: 20px;
-moz-box-shadow: 0 0 5px #acacac;
-webkit-box-shadow: 0 0 5px #acacac;
box-shadow: 0px 0px 5px #acacac;
border-radius:5px;
vertical-align: top;
background-color: #ffffff;
}
.bookcontainer .book img {
border: 1px solid #bbbbbb;
width: 20%;
height: 20%;
float: left;
margin-right: 15px;
vertical-align: top;
padding: 0;
position: relative;
top: 5px;
overflow: hidden;
}
.maintoc {
width:100%;
clear: both;
margin-top: 30px;
margin-bottom: 30px;
}
.maintoc a {
text-decoration: none;
}
label {
text-align:center;
line-height:18px;
font-family:Lato;
font-weight:bold;
color:#0092c8;
font-size:15px;
}
input[type="checkbox"]{
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: white;
box-sizing: border-box;
position: relative;
box-sizing: content-box ;
width: 25px;
height: 25px;
border-width: 0;
position: relative;
margin-right: 5px;
margin-bottom: -5px;
}
input[type="checkbox"]:checked{
background-color: #0092c8;
}
input[type="checkbox"]:focus{
outline: 0 none;
box-shadow: none;
}
.ckbatch {
float: left;
display: inline-block;
height: 100%;
margin: 10px;
}
.ckbatchcontainer {
float: left;
display: inline-block;
height: 100%;
margin-bottom: 5px;
padding: 0;
}
.TOCtext {
text-align:center;
line-height:18px;
font-family:Lato;
font-weight:bold;
color:#948973;
font-size:15px;
}
.TOCtext a {
margin: 0;
padding: 0;
}
.TOCimage {
height: 150px;
margin: 0 auto;
position: relative;
display: block;
padding-bottom: 10px;
}
Thank you in advance for any and all help! I've been wracking my brain for a week and in forums to try and fix this simple issue.

To answer in a well explaining way probably bust this comment, therefore I'll provide only a working solution for your problem. So just add these lines of Javascript:
$('.ckbatchcontainer [type=checkbox]').click(function(){
var id=$(this).attr('id').replace(/chk/, '[id^=dv') + ']';
var target = $(id).parent();
target.siblings(':not([style])').hide();
this.checked ? target.show() : target.hide();
});

Responsive search box issue, need help please

Currently, I use PrestaShop, and I wanted to change the width of search box, but, when I change the width of search box to 650px, on desktop it's ok, but on mobile the search box is very long — not responsive at all. Can you help with this issue please?
#search_block_top {
padding-top: 30px;
width: 650px;
}
#search_block_top #searchbox {
float: left;
width: 100%;
margin-top: -20px;
}
#search_block_top .btn.button-search {
background: #7ab55c;
display: block;
position: absolute;
top: 0;
right: 0;
border: none;
color: #fff;
width: 80px;
height: 40px;
text-align: center;
padding: 10px 0 11px 0;
}
#search_block_top .btn.button-search span {
display: none;
}
#search_block_top .btn.button-search:before {
content: "\f002";
display: block;
font-family: "FontAwesome";
font-size: 17px;
width: 100%;
text-align: center;
}
#search_block_top .btn.button-search:hover {
color: #6f6f6f;
}
#search_block_top #search_query_top {
display: inline;
padding: 13px 60px 13px 13px;
height: 40px;
background: #fbfbfb;
margin-right: 1px;
}
.ac_results {
background: #fff;
border: 1px solid #d6d4d4;
width: 271px;
margin-top: -1px;
}
.ac_results li {
padding: 0 10px;
font-weight: normal;
color: #686666;
font-size: 13px;
line-height: 22px;
}
.ac_results li.ac_odd {
background: #fff;
}
.ac_results li:hover,
.ac_results li.ac_over {
background: #fbfbfb;
}
form#searchbox {
position: relative;
}
form#searchbox label {
color: #333;
}
form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: left;
}
form#searchbox .button.button-small {
float: left;
}
form#searchbox .button.button-small i {
margin-right: 0;
}
enter image description here

Try setting max-width
#search_block_top {
padding-top: 30px;
width: 100%;
max-width: 650px;
}

You can maybe use media queries and write something like that:
#search_block_top {
padding-top: 30px;
width: 650px;
#media screen and (max-width: 650px) {
width: 95%;
}
}

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.