4

I am new to developing Windows 8 store apps, and I am in the process of creating my first one.

The app I am making is a note taking app. I only started the app yesterday, so it's still very basic, but I am having a problem with the scrolling. Here is a screen shot displaying the problem:

enter image description here

As you can see, when a certain number of notes are entered, they start overlapping the screen. What I need to do is make it so that when the notes a certain amount of pixels from the side of the display, it makes it scroll-able.

The divs that the notes are contained in are created as the note is written. The notes also auto change size depending on the amount of text entered.

Does anyone know how I would make it so that they scroll to the left and right instead of overlapping?

EDIT: Here is the CSS:

body {

      overflow-x:auto;

}

#textInput {
    padding:20px;
    float:left;
    margin-top: 20px;
    margin-left: 20px;

    position:fixed;




}
#noteInput {
    display:block;
    border-width:5px;
    border-color:purple;
    box-shadow: 5px 5px 5px;


}

#titleInput {
    border-width:5px;
    border-color:purple;
    width:285px;
    box-shadow: 5px 5px 5px;


}

#noteSubmit {
    width:295px;
}

#headers {
    margin-left:100px;
    margin-top:80px;

}

#hr {
    margin-right: 40px;
    margin-left: 40px;
}

#noteContainer {
    float:left;
    margin-right:5px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:400px;





}

I haven't really bothered with the UI and design much yet, as I want to get all the background stuff like javascript, jquery, and azure working first.

I am only doing this app as a project for practice, for the 70-481 and 70-482 exams I have in two months, so its never going to be in the store or anything. Thanks for your help

Cheers Corey

4

2 回答 2

1

I agree with @ma_il, but if you do want to add scrolling functionality to custom elements, you simple wrap those elements in a div and add some CSS properties to that div...

overflow-x: auto; /* to scroll horizontally / overflow-y: auto; / to scroll vertically / overflow: auto; / to scroll in both directions */

If the contents of that div are wider (or taller or both) than the screen then your screen will automatically become scrolling and touch will be supported.

于 2013-04-03T15:07:43.397 回答
1

我强烈建议使用 WinJS.UI.ListView 控件而不是自己编写 div 元素。

这样，您不仅可以获得与用户对 Windows 8 现代 UI 应用程序的期望一致的应用程序外观和感觉，而且还可以为您处理 DOM 元素的滚动和管理。

请参阅本教程，了解如何创建和设置 ListView 控件的样式。

于 2013-04-03T14:39:35.213 回答