[Gmod-ajax] embedding jbrowse in a bootstrap grid html page

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

[Gmod-ajax] embedding jbrowse in a bootstrap grid html page

Jillian Rowe
Hello,

I would like to embed jbrowse within a page that uses the bootstrap
framework, specifically the grid with rows and columns and all that.

What I have is a page with a header, logo, footer, navigation. I would
like to have the "GenomeBrowser" div appear within a particular subset
of that, and I'm not exactly sure how to go about it since I am not so
familiar with css.

I took out a lot of things, but I'm hoping you can still get my meaning.

I have seen that if I add GenomeBrowser within a div like this it shows,
although I would have to fiddle quite a bit with the height and width to
get it right, and I don't know how that would scale with different screens.

                     <div style="height:  800px; width: 500px;">

                         <div id="GenomeBrowser" style="height: 100%;
width: 100%; padding: 0; border: 0;"></div>

                     </div>

But I feel it should 'just work' within the grid system as well.

                 <!--[>/section: page-content<]-->
                 <div class="page-content">

                     <div class="row">
                     <div class="col-xs-12">
                         <div id="GenomeBrowser" style="height: 100%;
width: 100%; padding: 0; border: 0;"></div>
                     </div>
                     <!-- /.col-xs-12 -->
                     </div>
                     <!-- /.row -->

                 </div>
                 <!--[> /.page-content <]-->

Does anyone have any experience with this?

Thanks!
Best,
Jillian

Here is the whole page.

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>[% page.title || "Qatari Genome Browser" %]</title>

         [% INCLUDE 'declare_bootstrap.tt2' %]

     </head>

     <style>
         body {
             padding-top: 100px;
         }
     </style>

     <body class="cornell no-skin">
         <!-- #section:basics/navbar.layout -->
         <div id="navbar" class="navbar navbar-fixed-top navbar-default">
             <script type="text/javascript">
                 try{ace.settings.check('navbar' , 'fixed')}catch(e){}
             </script>

                 <div class="navbar-container" id="navbar-container">

                     <div class="navbar-header pull-left">
                         <!--Custom cornell logo and title-->
                     </div>
                 </div>
                 <!--[> /section:basics/navbar-container <]-->
         </div>
         <!-- /section:basics/navbar.layout -->

         <div class="main-container" id="main-container">
             <script type="text/javascript">
                 try{ace.settings.check('main-container' ,
'fixed')}catch(e){}
             </script>

             <div class="main-content">

                 <!--[>/section: page-content<]-->
                 <div class="page-content">

                     <div class="row">
                     <div class="col-xs-12">

                     <div style="height:  800px; width: 500px;">

                         <div id="GenomeBrowser" style="height: 100%;
width: 100%; padding: 0; border: 0;"></div>

                     </div>

                     </div>
                     <!-- /.col-xs-12 -->
                     </div>
                     <!-- /.row -->

                 </div>
                 <!--[> /.page-content <]-->
             </div>
             <!--[> /.main-content <]-->

             <!--Begin footer-->
             <div class="footer">
                 <div class="footer-inner">
                     <!--[> #section:basics/footer <]-->
                     <div class="footer-content">
                     <!--- Some things for the footer -->
                     </div>

                     <!--[> /section:basics/footer <]-->
                 </div>
             </div>
             <!--End footer-->

         </div>
         <!--[ /.main-container <]-->

     </body>
</html>

------------------------------------------------------------------------------
Infragistics Professional
Build stunning WinForms apps today!
Reboot your WinForms applications with our WinForms controls.
Build a bridge from your legacy apps to the future.
http://pubads.g.doubleclick.net/gampad/clk?id=153845071&iu=/4140/ostg.clktrk
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax