Results 1 to 4 of 4

Thread: Webview: Should a CSS Style for a body element work?

  1. #1
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    2,060

    Webview: Should a CSS Style for a body element work?

    I have a CSS style defined in a webview, defined in the <style> section:

    Code:
    <style>
    .verticalhorizontal {
        display: table-cell;
        height: 300px;
        text-align: center;
        width: 300px;
        vertical-align: middle;
    }
    </style>
    And a <div that uses the style in the body:

    Code:
    <div class="verticalhorizontal">    <img src="loadDatalg.gif" alt="centered image" />
    </div>
    The image loads (and twirls nicely) but the style settings have no effect.

    Clearly I'm missing something...

    thanks,

    Hank

  2. #2
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    6,176
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  3. #3
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    2,060
    Hi Barry,

    Yes, all the horizontal center CSS methods I've tried work.

    None of the vertical center methods I've tried work.

    And my goal was to do both.

    thanks,

    Hank

  4. #4
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    2,060
    OK, so the code here almost works: https://philipwalton.github.io/solve...cal-centering/ when the class code from the linked github page is used: https://github.com/philipwalton/solv...ts/aligner.css

    I made 3 changes.

    width: 108vw; -- in order to get the image centered horizontally
    height: 100vh -- In order to get the image centered vertically

    body set to overflow: hidden; -- in order to deep the scrollbars from showing up (they were turned off in the page already.

    Here's the code that worked:

    Code:
    ... (boilerplate webview code above)
    <style>
    .Aligner {
      display: flex;
      align-items: center;
      min-height: 24em;
      justify-content: center;
      height: 100vh;
      width: 108vw;
    }
    
    
    .Aligner-item {
      flex: 1;
    }
    
    
    .Aligner-item--top {
      align-self: flex-start;
    }
    
    
    .Aligner-item--bottom {
      align-self: flex-end;
    }
    
    
    .Aligner-item--fixed {
      flex: none;
      max-width: 50%;
    }
    body {
      overflow: hidden;
    }
    
    
    </style>
    </head>
    <body>
    <div class="Aligner">
      <div class="Aligner-item Aligner-item--top"><p>top</p></div>
      <div class="Aligner-item"><img src="loadDatalg.gif" alt="centered image" /></div>
      <div class="Aligner-item Aligner-item--bottom"><p>bottom</p></div>
    </div>
    </body>
    </html>
    The top and bottom were left just for testing.

    Hank

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us