Проблема с попыткой получить желаемый эффект

Question

Проблема с попыткой получить желаемый эффект

0

Я пытаюсь создать несколько минимальных проектов для будущей панели администрирования моих сайтов. И если вы посмотрите здесь, то рабочая версия моего текущего кода. То, что у меня есть, - это навигация с левой стороны, которая скользит и подталкивает остальную часть содержимого страниц вправо и скрывает переполнение. Когда вы вводите содержимое сообщения, текстовое поле - это то место, где я сталкиваюсь с моей проблемой. Если вы введете достаточно текста, который прокручивает страницу, поскольку у меня есть поля ввода заголовка и тега, установленные в абсолютном порядке, они остаются там, где они есть. Устанавливая их как фиксированные и добавляя некоторые поля, он делает так, чтобы они прокручивали страницу и выглядели так красиво, но если вы выталкиваете навигацию, фиксированные элементы не будут перемещаться. Чтобы заставить их сделать это, я должен перемещать их вместе с фактическим основным контейнером, тогда на оси х появляется полоса прокрутки и пытается установить overflow-x: hidden; на различные элементы, относящиеся к этим элементам, ничего не делает. Вот мои html и 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="css/create-post.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">
                <ul>
                    <li class="logo">Lithium CMS</li>
                    <div class="links">
                        <a href="index.html"><li>Dashboard</li></a>
                        <a href="index.html"><li>Messages</li></a>
                        <a href="index.html"><li>Posts</li></a>
                        <a href="index.html"><li>Pages</li></a>
                    </div>
                </ul>
            </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>

Здесь мой CSS

    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: 210px;
    z-index: 4;
    }

    .menu-open {
    left: 210px;
    }

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

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

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

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


    height: 100%;
    width: 210px;
    }

    .menu li.logo {
    color: #666;
    text-shadow: 1px 0px 1px #000000;
    font-size: 16px;
    font-weight: bolder;
    padding: 10px;
    border-bottom: 1px solid #2f2f2f;
    }

    .menu a {
    color: #eaeaea;
    text-shadow: 1px 0px 1px #555555;
    text-decoration: none;
    font-weight: bolder;
    font-size: 18px;
    }

    .menu a li {
    border-bottom: 1px solid #2a2a2a;

    padding: 10px;

    -webkit-transition: background-color 0.2s ease-in;
    -moz-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
    }

    .menu .links li:hover {
    background-color: #2f2f2f;
    }

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


    .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;}

Terry Tacey 15 фев. 2014, в 00:18

Источник

0

Неработающая ссылка, мужчина: / Также добавьте соответствующий код CSS / JS / HTML к самому вопросу.
display-name-is-missing 14 фев. 2014, в 22:55
0

Извините, человек, я это исправил. Кроме того, я новичок в переполнении стека, я не совсем уверен, какой код будет иметь отношение к делу, кроме этих 3 файлов. Я буду редактировать свой пост с ними, хотя.
Terry Tacey 14 фев. 2014, в 22:57
0

Если вы исправили это, сделайте одолжение другим людям и опубликуйте свое решение в качестве ответа, чтобы другие люди тоже могли решить подобные проблемы :)
display-name-is-missing 14 фев. 2014, в 22:57
0

Исправляя это, я говорил о ссылке. LMAO
Terry Tacey 14 фев. 2014, в 23:03
0

как можно заставить теги и ввод заголовка работать так, как это исправлено, но не создавать ненужную прокрутку страницы по оси х. Или есть способ, которым я могу установить высоту текстовой области, чтобы быть между заголовком и вводом тегов, и сделать прокрутку текстовой области, если она достигает максимальной высоты в процентах или что-то еще. В настоящее время я использую плагин jQuery для автоматического изменения размера текстовой области, я прошел его, и это документы, и не нашел ничего, что могло бы мне сильно помочь.
Terry Tacey 14 фев. 2014, в 23:18
0

Вы пытались поместить .post-tags-container перед </body> ?
display-name-is-missing 14 фев. 2014, в 23:20
0

Ух, так просто, спасибо за помощь хр. Также спасибо за то, что ты не член. Мне сказали, что люди здесь в основном хаха. Вы знаете, как я могу установить это как ответ?
Terry Tacey 14 фев. 2014, в 23:23
0

Нет проблем, чувак :) Я просто добавил это как ответ. Просто нажмите на check слева от него, чтобы отметить его как ответ;)
display-name-is-missing 14 фев. 2014, в 23:25
0

Ты нашел это?
display-name-is-missing 14 фев. 2014, в 23:31

Показать ещё 7 комментариев

Теги:

javascript

jquery

html

css

overflow

1 ответ

Ещё вопросы

Неработающая ссылка, мужчина: / Также добавьте соответствующий код CSS / JS / HTML к самому вопросу.
Извините, человек, я это исправил. Кроме того, я новичок в переполнении стека, я не совсем уверен, какой код будет иметь отношение к делу, кроме этих 3 файлов. Я буду редактировать свой пост с ними, хотя.
Если вы исправили это, сделайте одолжение другим людям и опубликуйте свое решение в качестве ответа, чтобы другие люди тоже могли решить подобные проблемы :)
Исправляя это, я говорил о ссылке. LMAO
как можно заставить теги и ввод заголовка работать так, как это исправлено, но не создавать ненужную прокрутку страницы по оси х. Или есть способ, которым я могу установить высоту текстовой области, чтобы быть между заголовком и вводом тегов, и сделать прокрутку текстовой области, если она достигает максимальной высоты в процентах или что-то еще. В настоящее время я использую плагин jQuery для автоматического изменения размера текстовой области, я прошел его, и это документы, и не нашел ничего, что могло бы мне сильно помочь.
Вы пытались поместить .post-tags-container перед </body> ?
Ух, так просто, спасибо за помощь хр. Также спасибо за то, что ты не член. Мне сказали, что люди здесь в основном хаха. Вы знаете, как я могу установить это как ответ?
Нет проблем, чувак :) Я просто добавил это как ответ. Просто нажмите на check слева от него, чтобы отметить его как ответ;)

Daniel Lisik · Answer 1 · 2014-02-14T22-23-00.000Z

Вы можете избежать этой проблемы довольно легко. Просто поставьте.post-tags-контейнер прямо перед концом тела (прямо перед </body>).