3 Replies - 607 Views - Last Post: 17 February 2014 - 10:12 AM

#1 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Position Issue

Posted 14 February 2014 - 10:13 AM

Hello, It's been a while ^.^. I'm trying to create some minimal designs for my sites future administration panel. And if you look here, that's the working version of my current code. What I have is navigation on the left side that slides out and pushes the rest of the pages content towards the right and hides the overflow. Where you enter post content, a textarea, is where I'm encountering my problem. If You enter a enough text that the page scrolls since I have the title and tag input fields set to absolute they stay where they are. Setting them as fixed and adding some margins does make it so they scroll with the page and look nice like that, but if you slide out the navigation the fixed elements won't move. In order to get them to do that I have to move them along with the actual main container, then a scroll bar appears on the x-axis and trying to set overflow-x: hidden; on various elements pertaining to those elements does nothing. Here's my HTML and then my CSS

<!DOCTYPE html>
<html>
	<head>
		<title>New Post</title>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
		<link href="css/main.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<link href="css/jquery.tagsinput.css" rel="stylesheet">
	</head>
	<body class="main">
		<section>
			<a href="#" class="menu-toggle fa fa-bars"></a>
			<nav class="menu-side">
				This is a side menu
			</nav>
		</section>

		<section class="content">
			<form>
				<input type="text" name="post-title" class="post-title" placeholder="Title...">
				<div class="post-content-container">
					<textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
				</div>
				<div class="post-tags-container">
					<input name="post-tags" class="post-tags">
				</div>
			</form>
		<section>

		</section>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="js/jquery.autogrow-textarea.js"></script>
		<script src="js/jquery.tagsinput.js"></script>
		<script>
		$(function() {
			$('.menu-toggle').bind('click', function() {
				$('.main').toggleClass('menu-open');
				return false;
			});

			$('.post-content').autogrow();

			$('.post-tags').tagsInput({
				'width': '100%',
				'height': '',
			});
		});
		</script>
	</body>
</html>


/* http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, * {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: 'Open Sans', sans-serif;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
 * Slide out Menu
 */

html,
body {
	height: 100%;
}

.main {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.menu-toggle {
	background-color: #333333;
	border-right: 1px solid #111111;
	border-bottom: 1px solid #111111;
	color: #ffffff;
	text-decoration: none;

	padding: 10px;
	padding-right: 11px;

	text-align: center;

	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

.menu-open .menu-toggle {
	left: 230px;
	z-index: 4;
}

.menu-open {
	left: 231px;
}

.menu-open .menu-side {
	left: 0;
}

.menu-side,
.menu-toggle,
.main {
	-webkit-transition: left 0.2s ease;
	-moz-transition: left 0.2s ease;
	transition: left 0.2s ease;
}

.menu-side {
	background-color: #333333;
	border-right: 1px solid #111111;
	color: #ffffff;

	position: fixed;
	top: 0;
	left: -231px;
	z-index: 3;

	padding: 10px;

	height: 100%;
	width: 210px;
}

.content {
	position: relative;
	height: 100%;
}

/*
 * Forms
 */

::-webkit-input-placeholder {
	color: #666666;
}

:-moz-placeholder { /* Firefox 18- */
	color: #666666;  
}

::-moz-placeholder {  /* Firefox 19+ */
  color: #666666;  
}

:-ms-input-placeholder {  
	color: #666666;  
}

.post-title,
.post-content {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

	padding: 15px;

	outline: none;

	width: 100%;
}

.post-content {
	resize: none;
}

.post-title {
	background-color: #eaeaea;

	font-size: 24px;

	padding-left: 50px;
}

.post-content-container {
	max-height: 90%;
}

.post-tags-container {
	position: absolute;
	bottom: 0;

	width: 100%;
}

div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px;  } 
div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px;  margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; } 
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}


Is This A Good Question/Topic? 0
  • +

Replies To: Position Issue

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: Position Issue

Posted 14 February 2014 - 10:27 AM

It would help if you could formulate a question.
Was This Post Helpful? 0
  • +
  • -

#3 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Position Issue

Posted 14 February 2014 - 10:41 AM

Alright, sorry, how can I either get the tags and title inputs to work like it's fixed but not create the unnecessary page scrolling on the x axis. Or is there a way I can set height of the textarea to be in between the title and the tags input, and make the text area scroll if it reaches a percent max-height or something. I'm currently using a jQuery plugin to automatically resize the textarea, I've gone through it and it's docs and haven't found anything that will help me to a great extent.
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Position Issue

Posted 17 February 2014 - 10:12 AM

I fixed it by moving the whole form outside the content section that I had, putting it above the scripts.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1