1
私はノックアウトと一緒にスタイリングのためにw3.cssを試しています。フッタを使用すると、ページの下部にあるコンテンツがカバーされます。フッタはw3.cssを使用しているときにコンテンツをカバーします
私のコンテンツの下部にボタンがあります。ページのサイズが変更されるか、または十分に小さい場合、フッターがボタンをカバーします。
は:fixedの位置を持っている.w3-top, .w3-bottom要素codepen、または
function setting(color) {
this.color = ko.observable(color);
this.colorClassName = ko.computed(function() {
return "w3-hover-" + this.color();
}, this);
}
function myInput() {
this.data = ko.observable("");
this.nameValid = ko.computed(function() {
return !(this.data() == null || this.data().length == 0);
}, this);
this.error = ko.computed(function() {
//if (this.data() == null || this.data().length == 0)
if (this.nameValid() == false) {
return "Enter name";
} else {
return "";
}
}, this);
this.display = ko.computed(function() {
if (this.nameValid() == false) {
return "block";
} else {
return "none";
}
}, this);
this.ageData = ko.observable();
this.ageValid = ko.computed(function() {
var age = this.ageData() + "";
var patt = new RegExp(/^[0-9]+$/g); /// ^-from start, $-to end, [0-9] - 0 to 9 numbers only
var res = patt.test(age);
if (isNaN(age) == true || res == false) {
return false;
} else {
return true;
}
}, this);
this.ageError = ko.computed(function() {
if (this.ageValid() == false) {
return "Enter a valid age";
} else {
return "";
}
}, this);
this.ageDisplay = ko.computed(function() {
if (this.ageValid() == true) {
return "none";
} else {
return "block";
}
}, this);
this.phone = ko.observable('http://digitalbush.com/projects/masked-input-plugin/');
this.allValid = ko.computed(function() {
return this.ageValid() && this.nameValid();
}, this);
}
function myModel() {
this.name = "Ice-Cream";
this.items = [{
name: "Chocolate",
price: 10
}, {
name: "Vanilla",
price: 12
}];
this.style = new setting('pale-green');
this.input = new myInput();
this.changeColor = function() {
if (this.style.color().indexOf('blue') == -1) {
this.style.color('pale-blue');
} else {
this.style.color('pale-green');
}
};
}
ko.applyBindings(new myModel());<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" type="text/css">
<body class="w3-content w3-pale-blue" style="max-width:100%">
<header class="w3-container w3-pale-green w3-border">
<h1>Hello</h1>
</header>
<div class="w3-container w3-pale-yellow w3-border w3-padding-hor-16 w3-content" style="max-width:100%">
<a href="http://www.w3schools.com/w3css">W3.CSS</a>
<p>
The item is <span data-bind="text: name"></span> today.
<br />Available flavours are:
</p>
<div class="w3-container">
<ul data-bind="foreach: items" class="w3-ul w3-left w3-border w3-border-red">
<li class="w3-ul w3-hoverable w3-border-red " data-bind="css: $parent.style.colorClassName()">
<span data-bind="text: name"></span> is $<span data-bind="text:price" />
</li>
</ul>
</div>
<label class="w3-label w3-text-blue w3-xlarge">Name</label>
<input class="w3-input w3-border" type="text" data-bind="textInput: input.data">
<label class="w3-label w3-text-red w3-large" data-bind="text: input.error(), style: { display: input.display()}"></label>
<br />
<label class="w3-label w3-text-blue w3-xlarge">Age</label>
<input class="w3-input w3-border" type="text" data-bind="textInput: input.ageData">
<label class="w3-label w3-text-red w3-large" data-bind="text: input.ageError(), style: { display: input.ageDisplay()}"></label>
<br />
<label class="w3-label w3-text-blue w3-xlarge">Phone</label>
<input class="w3-input w3-border" type="text" data-bind="textInput: input.phone">
<!--<label class="w3-label w3-text-red w3-large" data-bind="text: input.phoneError(), style: { display: input.phoneDisplay()}"></label>-->
<br />
<button class="w3-btn w3-border w3-border-teal w3-round w3-teal" data-bind="click: changeColor, enable: input.allValid()">Test</button>
</div>
<footer class="w3-light-grey w3-bottom">
<div class="w3-container">
<p>This is my footer</p>
</div>
</footer>
代わりにスクロール 私は何らかの種類の行レイアウトを使用する必要があるかもしれません – Quintonn