11 Replies Latest reply on Oct 11, 2011 12:50 PM by Robert Galvin

    Dropping controls to the bottom of the screen - Micro Kiosks

      Trying to crank out a customer-specific demo with little time to spare.

       

      I have been successful in having a no-border table that filled the screen and left cells at the bottom for Micro Kiosk buttons to match the MK3000s buttons and supply functionality to the MK4000.  However I have a few screens that have variable content that made the table-technique sloppy or dependent upon all images being identically sized.  There has to be a better way.

       

      This HTML newbie could use some guidance.  Looks like LAYER might be the answer, but alas, time is short.

       

      Carl ~ Texas

        • Re: Dropping controls to the bottom of the screen - Micro Kiosks
          James Morley-Smith

          Hi Carl

           

          If you create a <div> and specify its size to be 100% in height (and potentially in width too if that's what you require), you can than specify your controls bottom in CSS.  Therefore, if you want it to be on the bottom of the screen, specify the bottom to be 0 (zero);

           

          I shall post an example in a few minutes...watch this space...

           

           

          James.

          1 of 1 people found this helpful
          • Re: Dropping controls to the bottom of the screen - Micro Kiosks
            Benedict Kennedy

            Hi Carl,

             

             

            I would create a <div> tag with fixed positioning, and align it with the bottom of the screen:

            <html>
                <head>
                    <style>
                        #navigation
                        {
                            width: 100%;
                            position: fixed;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            z-index: 100;
                            background: #00A0DF;
                            color: white;
                        }
                    </style>
                </head>
                <body>
                    <div id="navigation">
                        Hello
                    </div>
                </body>
            </html>
            

             

            This will put a bar to the bottom of the screen. You just need to put your buttons in this div container and it will always stay at the bottom of the screen, even if the content is scrollable.

              • Re: Dropping controls to the bottom of the screen - Micro Kiosks

                PERFECT!

                 

                It is quite the mindset change going from C# and WinForms to HTML and wanting location control.

                 

                Let's see if this old dog can come up to speed before the next turn of the century.

                 

                Carl

                ;^))

                  • Re: Dropping controls to the bottom of the screen - Micro Kiosks
                    Benedict Kennedy

                    Haha! Glad to help!

                     

                    I have enhanced the previous example with by adding some buttons. These can be styled to match your look-and-feel by changing the CSS (in the <style> tag).

                     

                    <html>
                              <head>
                                        <style>
                                                  #navigation
                                                  {
                                                            width: 100%;
                                                            position: fixed; 
                                                            bottom: 0;
                                                            left: 0;
                                                            right: 0;
                                                            z-index: 100;
                                                            background: #00A0DF;
                                                            color: white;
                                                            text-align: center;
                                                  }
                                                  .navbutton
                                                  {
                                                            display: inline;
                                                            font: bold 20px Arial;
                                                            margin: 0px 20px;
                                                            padding: 5px 10px;
                                                  }
                                        </style>
                              </head>
                              <body>
                                        <div id="navigation">
                                                  <button class="navbutton">Button1</button>
                                                  <button class="navbutton">Button2</button>
                                                  <button class="navbutton">Button3</button>
                                                  <button class="navbutton">Button4</button>
                                        </div>
                              </body>
                    </html>
                    

                     

                    I find this site very useful for HTML and CSS tutorials and reference tables, it may be of some use:

                    http://www.htmldog.com

                      • Re: Dropping controls to the bottom of the screen - Micro Kiosks

                        Cut/Pasted into web page.  Also started a new web page for testing. (2nd image)

                        Works great on my PC, MK3000 with Pocket Browser 3, it doesn't drop to the bottom.

                         

                        4000 MK3000s are in play ....

                         

                        Buttons.GIF

                        Buttons2.GIF

                          • Re: Dropping controls to the bottom of the screen - Micro Kiosks
                            Benedict Kennedy

                            Oh sorry, I thought it was for RhoElements which has WebKit at its core. As PocketBrowser uses IE6 as its rendering engine, we need to use more legacy code. James's suggestion should work.

                             

                            <html>
                                      <head>
                                                <style>
                                                          html, body
                                                          {
                                                                    height: 100%;
                                                                    margin: 0px;
                                                                    padding: 0px;
                                                          }
                                                          #navigation
                                                          {
                                                                    position: absolute;
                                                                    width: 100%; 
                                                                    bottom: 0;
                                                                    left: 0;
                                                                    right: 0;
                                                                    z-index: 100;
                                                                    background: #00A0DF;
                                                                    color: white;
                                                                    text-align: center;
                                                          }
                                                          .navbutton
                                                          {
                                                                    display: inline;
                                                                    font: bold 20px Arial;
                                                                    margin: 0px 20px;
                                                                    padding: 5px 10px;
                                                          }
                                                </style>
                                      </head>
                                      <body>
                                                <div id="navigation">
                                                          <button class="navbutton">Button1</button>
                                                          <button class="navbutton">Button2</button>
                                                          <button class="navbutton">Button3</button>
                                                          <button class="navbutton">Button4</button>
                                                </div>
                                      </body>
                            </html>
                            

                             

                            I won't be able to test on PocketBrowser until tomorrow unfortunately but it works with IE6 so it probably will work in PocketBrowser.

                            1 of 1 people found this helpful