Languages

Menu
Sites
Language
Header Icon is too small

I have a header with a title, subtitle, and icon and for some reason the icon is being scaled down. The app icon is 117 x 117 and the code is below.

 

<div data-role="header" data-position="fixed">


<img src="icon.png"/>


<h1>Here I Am</h1>


<span class="ui-title-text-sub">The easy way to share your location</span>


</div>


 


 


Any Ideas as to why the icon is scaled down? I have tried specifing a width and height but the image remains scaled down.


 


Header with squished icon

                      

        

      

    

    

          

        
Edited by: Brock Boland on  17 Mar, 2014   Reason: Paragraph tags added automatically from tizen_format_fix module.      

          

  


  
      

          
          

                              List
              
              
              
          

          
      

  



  

    
Responses

    

      2 Replies    

  

  

                        
              

              

          
                    

            
             Josh Dobbs
            
          

          
          
          

            
            
            

              

                

                  

                    I think this is a bug. I just created a new tizen web app ui project and added the default icon to the header and got the same results as above. 
If you look at the image on the bottom of this page you see that the icon is much larger https://developer.tizen.org/documentation/ux-guide/design-library/header.

So im wondering if this is a bug or if the spec has changed since the screenshot on the documentation was taken.
                  

                

              

            

            
          

          

          

            
            

              
            

          

          

        

      

                            
              

              

          
                    

            
             Raghu Kona
            
          

          
          
          

            
            
            

              

                

                  

                    Hi,

The size of icon, font and style of title fields are fixed, when you are using Tizen Web UI Framework.
The default size is 20 x 20.
But if you would like to resize or modify you may need to alter every field such as

Change the size of icon:

.ui-header.ui-bar-s img {
    height: 45px;
    width: 45px;
}

Height of header:

.ui-header.ui-bar-s {
    min-height: 3.5rem;
}

Left padding for Title:

.ui-header.ui-bar-s > img + h1 {
    padding-left: 50px;
}

Left spacing for sub-text:

.ui-header.ui-bar-s.ui-title-multiline img + .ui-title + .ui-title-text-sub {
left: 70px;
}

Top spacing for Title:

.ui-header.ui-bar-s.ui-title-multiline .ui-title {
margin: 20px;
}

Top spacing for sub-text: 
.ui-header.ui-bar-s .ui-title-text-sub {
top: 50px;
}


Regards,
Raghu Kona