zoukankan      html  css  js  c++  java
  • View and Data API Tips: Constrain Viewer Within a div Container

    By Daniel Du

    When working with View and Data API, you probably want to contain viewer into a <div> tag, the position and size of <div> can be defined with CSS. The HTML can be simple as below, a <div> tag as a container, the position and style is defined in a CSS class named as “viewer”:

        <h2>Autodesk View and Data API</h2>
        <div id="viewer" class="viewer">
    
        </div>

    For example, here is my css class, make the viewer container with 800px * 500px, and to make it easy to see, I also add a background color:

    .viewer {
    
        background-color: darksalmon;
        height: 500px;
         800px;
      }

    Here is how it looks like, seems good:

    Screen Shot 2016-01-31 at 2.29.30 PM

    Now let’s add viewer, the code snippet is simple, you can go to github for complete code:

            var viewerContainer = document.getElementById(containerId);
            var viewer = new Autodesk.Viewing.Private.GuiViewer3D(
                viewerContainer);

    But just with this style, the viewer is “overflow” out of the <div> container,:

    Screen Shot 2016-01-31 at 2.39.12 PM

    Here is a tip to contains the viewer into the <div> container, just edit the CSS as below, add “position : relative” :

    .viewer {
    
        background-color: darksalmon;
        height: 500px;
         800px;
        position: relative;
    }

    Here is how it looks after the change, the viewer is constrained within the div tag:

    Screen Shot 2016-01-31 at 2.43.25 PM

    Not a big deal, just a small tip in case you do not know.

  • 相关阅读:
    无需破解:Windows Server 2008 R2 至少免费使用 900天
    delphi简单单向字符串加密函数
    窗体的基本属性
    delphi property read writer 如何使用
    2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛 J过河
    2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛 J过河
    2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛 A PUBG(bfs求最短路径)
    2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛 A PUBG(bfs求最短路径)...
    2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛 H程序员的好印象(最长不降子序列)...
    2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛 H程序员的好印象(最长不降子序列)
  • 原文地址:https://www.cnblogs.com/junqilian/p/5173316.html
Copyright © 2011-2022 走看看