locked
Snap view help

    Question

  • Hey Guys. I've been trying to change the snap view settings, but nothing seems to work. I tried some samples, but I don't really get it. As you can see below this, doesn't it look good in the snapped view, and that's what I'm going to change. I have these 6 big buttons with a single line of text in it, and every of them is a link to another page.

    What I want is that the buttons will be like 200px width and 25-50px tall in snapped view (fullscreen, 250x250px). I also want to set the left-margin to 20px. They are placed in -ms-grid-box and I don't know how to handle it while snapped, cause the size of the grid-box will change.

     

     

    Fullscreen:

     

    Snapped:

    I tried to do something, but it really didn't do anything... But here is my css and html codes:

     

    CSS:

    @media screen and (-ms-view-state: snapped) {
        .homepage section[role=main] {
        }
    
        #contentGrid {
            margin-left: 20px;
        }
    	
    	/*The buttons in a class below*/
    	#Hovedgruppe {
    		width: 250px;
    		height: 50px;
    		
    	}
    	
    
    }
     

    HTML:

    <section aria-label="Main content" role="main"> <div style="width: auto; height: auto; border: 0px; display: -ms-grid; -ms-grid-columns: 250px 10px 250px 10px 250px; -ms-grid-rows: 250px 10px 250px;"> <button id="div0" class="Hovedgruppe" onclick="javascript:WinJS.Navigation.navigate('/pages/bmi/bmi.html')"> Secret txt </button> <button id="div1" class="Hovedgruppe" onclick="javascript:WinJS.Navigation.navigate('/pages/bmr/bmr.html')"> Secret txt </button> <button id="div2" class="Hovedgruppe" onclick="javascript:WinJS.Navigation.navigate('/pages/calories/calories.html')"> Secret txt </button> <button id="div3" class="Hovedgruppe" onclick="javascript:WinJS.Navigation.navigate('/pages/protein/protein.html')"> Secret txt </button> <button id="div4" class="Hovedgruppe" onclick="javascript:WinJS.Navigation.navigate('/pages/zones/zones.html')"> Secret txt

    </button> <button id="div5" class="Hovedgruppe" onclick="javascript:WinJS.Navigation.navigate('/pages/about/about.html')"> Secret txt </button> </div> </section>


    I really hope that some of you guys either can tell me what to do, or maybe give me some sort of code that I can look at and 'copy'.

     


    • Edited by Potices Wednesday, March 27, 2013 6:53 PM Changed the button text
    Wednesday, March 27, 2013 6:51 PM

Answers

  • Your problem is the "div" that contains all your buttons. Your are using an inline style and defining 250px columns, which looks good when its not snapped, but when it is, it stretches beyond the screen.

    A good solution would be to put the "div" style on a class and change the class using the media queries:

    .divContainer{
    width: auto; 
    height: auto; 
    border: 0px; 
    display: -ms-grid;
    -ms-grid-columns: 250px 10px 250px 10px 250px; 
    -ms-grid-rows: 250px 10px 250px;
    }
    
    
    
    @media screen and (-ms-view-state: snapped) {
    	#contentGrid {
    	    margin-left: 20px;
        }
    	.divContainer{
    		/* redefine the column widths, you can posibly switch columns for rows, 1 column of 200px and rows of 50px for each button with a 10px separation */
    		-ms-grid-columns: 200px;
    		-ms-grid-rows: 50px 10px 50px 10px 50px 10px 50px 10px 50px 10px 50px;		
    		
    	}
    	#div0{
    		-ms-grid-row:1;
    	}
    	#div1{
    		-ms-grid-row:3;
    	}
    	#div2{
    		-ms-grid-row:5;
    	}
    	#div3{
    		-ms-grid-row:7;
    	}
    	#div4{
    		-ms-grid-row:9;
    	}
    	#div5{
    		-ms-grid-row:11;
    	}
    }

    • Marked as answer by Potices Thursday, March 28, 2013 8:31 AM
    Thursday, March 28, 2013 2:38 AM

All replies

  • Your problem is the "div" that contains all your buttons. Your are using an inline style and defining 250px columns, which looks good when its not snapped, but when it is, it stretches beyond the screen.

    A good solution would be to put the "div" style on a class and change the class using the media queries:

    .divContainer{
    width: auto; 
    height: auto; 
    border: 0px; 
    display: -ms-grid;
    -ms-grid-columns: 250px 10px 250px 10px 250px; 
    -ms-grid-rows: 250px 10px 250px;
    }
    
    
    
    @media screen and (-ms-view-state: snapped) {
    	#contentGrid {
    	    margin-left: 20px;
        }
    	.divContainer{
    		/* redefine the column widths, you can posibly switch columns for rows, 1 column of 200px and rows of 50px for each button with a 10px separation */
    		-ms-grid-columns: 200px;
    		-ms-grid-rows: 50px 10px 50px 10px 50px 10px 50px 10px 50px 10px 50px;		
    		
    	}
    	#div0{
    		-ms-grid-row:1;
    	}
    	#div1{
    		-ms-grid-row:3;
    	}
    	#div2{
    		-ms-grid-row:5;
    	}
    	#div3{
    		-ms-grid-row:7;
    	}
    	#div4{
    		-ms-grid-row:9;
    	}
    	#div5{
    		-ms-grid-row:11;
    	}
    }

    • Marked as answer by Potices Thursday, March 28, 2013 8:31 AM
    Thursday, March 28, 2013 2:38 AM
  • Hi,

    Another way is to use a list view with Grid layout (with items being buttons/ div). To attach click event you can use a templating function.

    In normal view you can use the grid layout (with max rows as 2) and in snapped view just change the layout to ListView.

    For a sample create a Grid project (default) in VS and see how the grouped list reacts and is implemented.

    Let me know if you have any other questions.

    - Girija

    Thursday, March 28, 2013 3:41 AM
  • Thank you man. I used this as a template, and edited a few Things, and it's working very properly now. Thank you very much!
    Thursday, March 28, 2013 8:32 AM