0

I want to be able to scroll through the div content without scrollbar visible. Below is the code snippet,

.topic_editor {
              background-color: $light_gray;
              height: 100%;
              overflow: auto;
              header {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;

             .back {
                   margin-right: 10px;
              }

              h4 {
                 flex-grow: 1;
                 overflow: hidden;
              }
           }
           form {
                height: calc(100% - 105px);
               .viewpoint_thumb {
                               position: relative;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                               width: 105px;
                               height: 105px;
                               border: 2px solid blue;
                               cursor: pointer;
                               img {
                                  display: block;
                                  position: absolute;
                                  width: 100%;
                                  height: 100%;
                                  top: 0;
                                  left: 0;
                               }
                              }
                       .fields {
                               padding: $padding $gutter $padding $gutter;
                               background-color: #fff;
                               flex-grow: 1;

                               textarea {
                                     overflow: auto;
                                }
                         }
                       .actions {
                            padding: 8px;
                            background-color: gray;
                            border-top: 2px solid $color;
                            display: flex;
                            justify-content: flex-end;
                            position: sticky;
                            bottom: 0px;
                        }

html code below,

<div class="topic_editor">
    <header>
        <button class="button"></button>
        <h4>new</h4>
     </header>
     <form>
         <div class="fields">
             <label>
                 <span>Name</span>
                 <input name="name" type="text">
              </label>
              <label>
               Description
                  <textarea name="text"></textarea>
              </label>
         </div>
         <div class="actions">
             <button> Cancel</button>
             <button type="submit"></button>
          </div>
       </form>
    </div>

Within the form div element i have input fields which add dynamically. The content of form element overflows and the cta button cancel and ok are not seen. How can i set the div element (form or form-container) such that the user would be able to scroll through the form fields and at the same time the scroll bar is not visible. I have tried hiding scrollbar using webkit-scrollbar none. But the firefox doesnot support hiding scrollbar without css.

gayana
  • 41
  • 10
  • there is nothing to display in your code – Bhargav Chudasama Sep 07 '18 at 09:39
  • your code not working on my local machine. – Hariom Singh Sep 07 '18 at 09:51
  • Possible duplicate of [Hiding the scrollbar on an HTML page](https://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) –  Sep 07 '18 at 10:08
  • If you want to hide the scrollbar/s, are you planning to implement your own scroll then? – Mario Vázquez Sep 07 '18 at 11:14
  • @Mario: I want the scrollbar to appear when needed. for instance, if there are only two input fields (div content fits) no scroll bar needed. if the content flows out of height of div element then scroll bar should appear. – gayana Sep 07 '18 at 11:48
  • Then `overflow:auto` should work. The `position:sticky` might affect. Your code snipped is showing nothing. Could you please update it? – Mario Vázquez Sep 07 '18 at 11:58

1 Answers1

-1

You can use overflow hidden, scroll and auto properties to your classes

Parent use over-flow:hidden;

Child use over-flow:auto; or overflow-y: scroll;

webcodesnip.com
  • 145
  • 3