6 Replies Latest reply on Dec 17, 2012 5:57 AM by Benedict Kennedy

    fixed header

      Hi!

      i need some help to fix the header into an erb file.

      in the file iphone.css i find that line :

      .ui-header .ui-title {

           font-size: 18px;

      }

       

      .ui-header .ui-btn {

           margin-top: 2px;

      }

      and i put to every one position:fixed;

      So my final css style code is

      .ui-header .ui-title {

          position:fixed;

          font-size: 18px;

      }

       

      .ui-header .ui-btn {

          position:fixed;

          margin-top: 2px;

      }

      But when i run, the header is back of my content (see the picture attached).

      what i must to modify?

      thk!

        • Re: fixed header
          Benedict Kennedy

          Hi,

           

          It looks like your problem is the "z-index". Try putting the header's z-index to a high value:

           

          .ui-header .ui-title {
              position:fixed;
              font-size: 18px;
              z-index: 10001;
          }
          
          .ui-header .ui-btn {
              position:fixed;
              margin-top: 2px;
              z-index: 10001;
          }
          

           

          it probably doesn't need to be such a high value, it just needs to be higher than what ever is on-top of it.


          Regards,

          Ben

          1 of 1 people found this helpful
            • Re: fixed header

              it's better but not enough!

              i put :

              .ui-header .ui-title {

                  background: none repeat scroll 0 0 #999999;

                  position:fixed;

                 font-size: 18px;

                  z-index: 10;

              }

              to highlight the title.

              but i want to make to appear the header, the content and aflter scroll the content to disappear under header.

                • Re: fixed header

                  Hi

                   

                  Below may help you.

                   

                  Use below style sheet.

                  <style type="text/css">

                                        html,body {

                                          margin: 0;

                                          padding: 0;

                                        }

                                       

                                        #top-bar {

                                          position: fixed;

                                          top: 0;

                                          left: 0;

                                          z-index: 999;

                                          width: 100%;

                                          height: 60px;

                                        }

                                       

                                        * html #top-bar {

                                          position: absolute;

                                        }

                                       

                                        #topbar-inner {

                                          overflow: scroll;

                                          overflow-y: hidden;

                                          height: 100px;

                                          background: RGB(0,0,155);

                                        }

                                       

                                        * html #topbar-inner {

                                          margin-right: 0px;

                                        }

                                       

                                        * html body {

                                          padding-top: 60px;

                                        }

                                       

                                        * html,* html body {

                                          overflow-y: hidden;

                                          height: 100%;

                                          margin-top: -60px;

                                        }

                                       

                                        #mainouter {

                                          position: relative;

                                          z-index: 2;

                                          padding-top: 60px;

                                          background: RGB(0,0,155);

                                          min-height: 100%;

                                        }

                                       

                                        * html #mainouter {

                                          height: 100%;

                                          overflow: auto;

                                          overflow-y: scroll;

                                          position: relative;

                                          z-index: 2;

                                          padding-top: 60px;

                                         

                                        }

                                     

                  </style>

                   

                  <div id="top-bar">

                       <div id="topbar-inner">

                            Place your top bar content

                      </div>

                  </div>

                                     

                  <div id="mainouter">

                       Outside top bar content.

                  </div>

                  • Re: fixed header
                    Benedict Kennedy

                    I have just realised what you are wanting to do! This doesnt seem to work on Android, but I *think* it does on IOS (I don't have a device to test with).

                     

                    The easy way to do this is to change the "data-position" HTML attribute in the header div from "inline" to "fixed". This will do what you are wanting:

                     

                    <div data-role="header" data-position="fixed">
                     <h1>Fixed Header!</h1>
                    </div>
                    

                     

                    I'd like to hear if this doesn't work for you. If it doesn't, and Vinod's solution does not work, I know of another way.

                     

                    Regards,

                    Ben