pt789 pt789 - 1 month ago 5
CSS Question

Vertically center search box before and after inserting another elements



$(function() {

$('.forminput input[type="text"]').on('input propertychange', function() {
var $this = $(this);
var visible = Boolean($this.val());
$this.siblings('.glyphicon').toggleClass('hidden', !visible);
}).trigger('propertychange'); //nema potrebe za njim

$('.glyphicon').click(function() {
$(this).siblings('input[type="text"]').val('')
.trigger('propertychange').focus();
$('.results').empty();
});

$('.forminput').on('submit', function(event) {
event.preventDefault();
var typed = $('.nice').val();
$.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
action: 'query',
srsearch: typed,
format: 'json',
list: 'search'
}, function(data) {
$('.results').empty();
console.log(data);
$.each(data.query.search, function(index, item) {
$('.results').append("<a class='append' href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + "<div class='appendsearch'><h1>" + item.title + "</h1><p>" + item.snippet + "</p></div></a>")
})
})
})
})

body {
background: rgb(9, 43, 64);
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
height: 90vh;
}

.wrapper {
display: flex;
justify-content: center;
align-items: center;
}

.container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}

.glyphicon {
color: #B2DFDB;
}

.textbox {
text-align: center;
}

.randomArticle {
color: #B2DFDB;
font-size: 1.4em;
}

.randomArticle:hover {
text-decoration: none;
color: pink;
cursor: pointer;
}

.randomArticle:link {
text-decoration: none;
color: #B2DFDB;
}

form {
margin-top: 30px;
margin-bottom: 30px;
}

form .nice {
width: 300px;
border-radius: 10px;
border: 5px solid orange;
background: transparent;
color: white;
padding: 7px 15px;
}

form .nice:focus {
outline: none;
}

.button {
border-radius: 10px;
border: 5px solid orange;
padding: 7px 15px;
margin-left: 20px;
background: transparent;
color: #B2DFDB;
}

.button:hover {
background: #00897B;
}

.button:focus {
outline: none;
}

.append {
color: black;
}

.append:hover {
text-decoration: none;
}

.appendsearch {
background: rgb(230, 230, 231);
margin: 20px 70px 20px 70px;
padding: 10px 20px;
color: black;
border-left: 4px solid rgb(9, 43, 64);
font-weight: 500;
}

.appendsearch h1 {
font-size: 20px;
font-weight: bold;
}

.appendsearch p {
font-size: 15px;
}

.appendsearch:hover {
border-left: 4px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='wrapper'>
<div class='textbox'>
<a class='randomArticle' href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>Click here for a random article</a>
<form class='forminput'>
<input class='nice' type='text'>
<span class='glyphicon glyphicon-remove hidden'></span>
<input class='button' type='submit' value='Search'>
</form>
</div>
<div class='results'></div>
</div>
</div>
</body





I cant get elements to be vertically centered before and after search results are inserted. I tried a lot of options but all I get is situation where search box is inserted on the left side of search result.
Here is the sample > http://codepen.io/Todorovic/pen/PGrqOp

Answer

What I did to make this work, is to add some line of code with jQuery. To to center div horizontally and vertically change css:

 $('.textbox').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : function() {return -$(this).outerWidth()/2},
        'margin-top' : function() {return -$(this).outerHeight()/2}
    });

For working with dimensions if you are not familiar check:

http://api.jquery.com/outerwidth/

http://api.jquery.com/outerheight/

And down in your code after submit form change again css of div to put it on top of page:

 $('.textbox').css({
    'position' : 'absolute',
    'left' : '50%',
    'top':'0%',
    'margin-top' : '30px',
    'margin-left' : function() {return -$(this).outerWidth()/2},
}); 

After append results add margin-top for div:

  $('.results').css({       
          'margin-top': $('.textbox').height()
      })     
  })

Here is CodePen example: http://codepen.io/anon/pen/NRZwEJ