0

i want to remove the vertical scrollbar that is added automatically on the canvas. I have the canvas within a div element and have a form element to the left of the canvas. Below is the code snippet,

.canvas_holder {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
     }
    .canvas {
        flex-grow: 1;
        height: 100%;
        display: block;
        position: relative;
     }
     form {
        height: 100%;
        .fields {
            background-color: #fff;
            height: 100%;
            position: relative;
            top: 0px;
            left: 0px;
            overflow: auto;
        }
        .actions {
            display: flex;
            justify-content: flex-end;
            position: sticky;
            bottom: 0px;
         }
      }
   
<form>
        <div class=fields>
            <input>
        </div>
        <div class=actions>
            <button>Create</button>
        </div>
    </form>
    <div class="canvas">
        <div class="canvas_holder">
            <canvas width="1207" height="479" style="width:1207px, 
                height:479px";>
        </div>
     </div>
Also there can be multiple input elements under form. I do not want the vertical/horizontal scrollbars added to the canvas. Could someone help me with this. Thanks.
gayana
  • 41
  • 10
  • have you tried `overflow: hidden` under `canvas`? – Abdul Ahmad Sep 05 '18 at 21:18
  • Do you want to cut off the parts that are only accessible through scrolling or show them without a scroll bar? – Kevin Lewis Sep 05 '18 at 21:18
  • You may just need to set the padding of the canvas holder to 0 – Kevin Lewis Sep 05 '18 at 21:21
  • Look at this https://www.w3schools.com/tags/att_canvas_height.asp –  Sep 05 '18 at 21:31
  • @Kevin Lewis: would like to show the content on form fields without scroll bar. and at the same time the canvas should adjust automatically to the height of form element. – gayana Sep 06 '18 at 06:28
  • @duxfox: i have tried setting overflow:hidden to canvas. it removes vertical scrollbar but then the contents on the left of canvas are cut off...i want them to be visible and user should be able to scroll it without scroll bar added. – gayana Sep 06 '18 at 06:41
  • Have you tried using a max-width in the css for the canvas? – Kevin Lewis Sep 06 '18 at 11:45
  • Oh, wait I know how to do it. Have you tried using js to get the height and width of the browser in pixels and then changing the width of the canvas to that. You can maybe also get the inner width and height of the div, but if you can’t, don’t forget to subtract by the body’s padding and the divs’s margin/padding if it exists. – Kevin Lewis Sep 06 '18 at 11:48
  • Possible duplicate of [make canvas as wide and as high as parent](https://stackoverflow.com/questions/10214873/make-canvas-as-wide-and-as-high-as-parent) – Kevin Lewis Sep 06 '18 at 11:52
  • https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll – Abdul Ahmad Sep 06 '18 at 13:43
  • @duxfox: from the link provided, used webkit-scrollbar for chrome and works. However, in firefox the scrollbar still exists. thanks. – gayana Sep 06 '18 at 21:24

0 Answers0