library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added manual tests as requested in https://github.com/yui/pure/pull/303#issuecomment-37080933

Browse Source 
Fixed another issue with grouped inputs, where there were 4+ inputs.
This commit is contained in:
Erki Esken 2014-03-12 16:27:59 +02:00
parent 69c58f4d05
commit d826a62984
2 changed files with 38 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/forms/css/forms.css
View File

@ -241,7 +241,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
.pure-form .pure-group input {
display: block;
padding: 10px;
margin: 0;
margin: 0 0 -1px;
border-radius: 0;
position: relative;
top: -1px;
@ -252,14 +252,17 @@ since IE8 won't execute CSS that contains a CSS3 selector.
.pure-form .pure-group input:first-child {
top: 1px;
border-radius: 4px 4px 0 0;
margin: 0;
}
.pure-form .pure-group input:first-child:last-child {
border-radius: 4px;
top: 1px;
border-radius: 4px;
margin: 0;
}
.pure-form .pure-group input:last-child {
top: -2px;
border-radius: 0 0 4px 4px;
margin: 0;
}
.pure-form .pure-group button {
margin: 0.35em 0;

33
src/forms/tests/manual/forms.html
View File

@ -174,11 +174,44 @@
<fieldset class="pure-group">
<input type="text" class="pure-input-1-3" placeholder="Another Group">
<input type="text" class="pure-input-1-3" placeholder="More Stuff">
<input type="text" class="pure-input-1-3" placeholder="Even More Stuff">
<input type="text" class="pure-input-1-3" placeholder="Last Item">
<button type="submit" class="pure-button pure-input-1-3">Sign in</button>
</fieldset>
</form>
<h2>Dynamic Grouped Inputs</h2>
<form class="pure-form" onsubmit="return false">
<script type="text/javascript">
function testDynamicGroupAdd() {
var g = document.getElementById('test-dynamic-group'),
newNode = g.getElementsByTagName("input")[0].cloneNode();
g.appendChild(newNode);
}
function testDynamicGroupRemove() {
var g = document.getElementById('test-dynamic-group'),
nodeCount = g.getElementsByTagName("input").length;
if (nodeCount > 1) {
g.removeChild(g.lastChild);
}
}
</script>
<fieldset class="pure-group">
<button type="submit" class="pure-button" onclick="testDynamicGroupAdd()">Add field</button>
<button type="submit" class="pure-button" onclick="testDynamicGroupRemove()">Remove field</button>
</fieldset>
<fieldset class="pure-group" id="test-dynamic-group">
<input type="text" class="pure-input-1-3" placeholder="Add or remove fields to test">
</fieldset>
</form>
<h2>Input Sizing</h2>
<form class="pure-form">