is it wrong if I use span-x to define element width?
<div class="search span-7 prepend-17 last">
<fieldset>
<form action="index.php" method="get">
<input type="hidden" name="page" value="found"/>
<input class="span-4" type="text" MAXLENGTH="25" placeholder="Enter text to search" name="search"/>
<input class="span-3 last" type="submit" value="search" />
</form>
</fieldset>
</div>
Not at all. Span only assigns a width, float and margin. As long as this is what you want for your element there's no problem using it.
Related
I have been trying to figure out how to make a custom field form that is responsive on Shopify.
<div class="one-whole">
<div class="one-half">
<label for="groom_name">Groom's First Name</label>
<input required type="text" id="groom_name" name="properties[groom_name]" placeholder="Groom">
</div>
<div class="one-half">
<label for="bride_name">Bride's First Name</label>
<input required type="text" id="bride_name" name="properties[bride_name]" placeholder="Bride">
</div>
<label for="last_name">Last Name</label>
<input required type="text" id="last_name" name="properties[Last Name]" placeholder="Last Name">
<label for="wedding_date">Wedding Date</label>
<input required type="date" name="wedding_date">
<label for="city">City</label>
<input required type="text" id="city" name="properties[City]" placeholder="City">
<label for="state">State</label>
</div>
That is the code and this is what I get.
I have tried doing whole and one-half and separating each input into its own div. The always seem to be left justified and now wrapping.
I would like Groom Name and Bride Name to be on the same line. But when on mobile to collapse.
This question is about css not liquid or shopify.
The classes your are looking for are documented here.
Try something like grid__item small--one-whole medium--one-half
What's the best way to get the mins below next to the hr?
-I tried using columns and rows, but it de-centered everything.
-I tried floats, but it makes everything misaligned
-I tried boxes, but similar problems to columns and rows.
Thank you so much! :)
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>
Replace your code with this one:
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>
as #Pyromonk mentioned p is a block element so use span instead
p is a block element and so is fieldset. input is an inline element. If linebreaks are the problem you are facing, you should look into using a set of inline elements in succession, for example a label and an input. Block elements force a linebreak after themselves and inline elements don't, to put it in simple terms. I see absolutely no reason for using fieldset and p in your scenario, unless you absolutely have to. If you do, you can try setting their display to inline-block.
Further reading: MDN :: Visual formatting model
I'm trying to achieve a same height border line between divs that are floated left using display:table-cells. I understand that if I change float:none, the heights of the divs are equal but for some reason I can't change float:left to none.
Is there a way to make the divs equal height with float:left ?
See this image to explain the problem and what I'm trying to achieve
Code :
<!doctype html>
<html>
<head>
<style>
.c-grids {display:table}
.c-grid {display:table-cell;float:left;border-left:1px solid red;padding:0 20px;}
.c-grids input {display:block;}
</style>
</head>
<body>
<div class="c-grids">
<DIV class="c-grid c-grid-1of4">
name<INPUT type=text autocomplete="off" name="text1" value="">
</DIV>
<DIV class="c-grid c-grid-2of4">
<INPUT type=text autocomplete="off" name="text2" value="">
</DIV>
<DIV class="c-grid c-grid-3of4">
<INPUT type=text autocomplete="off" name="text31" value="">
<INPUT type=text autocomplete="off" name="text32" value="">
</DIV>
<DIV class="c-grid c-grid-4of4">
<INPUT type=text autocomplete="off" name="text41" value="">
<INPUT type=text autocomplete="off" name="text42" value="">
<INPUT type=text autocomplete="off" name="text43" value="">
</DIV>
</div>
</body>
</html>
Thanks,
CT
When label tag should be used over span or dev in form?
Example:
option1-span:
<form action="">
<span>Name:</span><input type="text">
<input type="submit" />
</form>
option2-label:
<form action="">
<label>Name:</label><input type="text">
<input type="submit" />
</form>
option3-div:
<form action="">
<div style="display:inline;">Name:</div><input type="text">
<input type="submit" />
</form>
Thanks
This is what label tags are for:
<form action="">
<label for="txt">Name:</label><input type="text" id="txt" name="txt" />
<input type="submit" />
</form>
Then clicking on the label will focus on the input element.
The label tag is primarily used along with the for attribute. This aids in web accessibility of forms. For example
<form>
<label for="firstName">First name:</label>
<input type="text" name="firstName" value=""/>
</form>
By using the for tag, we can essentially associate the text "First Name:" with the input field having the name = "firstName".
Aside from that it has other attributes allowed but the span is more regularly used for styling markup.
I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page
http://staging.terrilynn.com/fundraising/
There is a div with a width of 298px floated to the right that comes first in the source order. It is followed by several other divs, each with their child form elements floated left.
The div's that should appear to the left of right-floated message div are disappearing.
Page displays correctly in firefox. Any help would be appreciated.
<div id='footer-contact-form'>
<h1>Request Information <span class='note'>(all fields required)</span></h1>
<form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
<fieldset>
<legend>Footer Info Request</legend>
<div class="textarea required" id="w2376">
<p class="data">
<label for="area_2376">Message</label>
<textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
</p>
</div>
<div class="text required" id="w2377">
<p class="data">
<label for="text_2377">Name</label>
<input id="text_2377" type="text" name="e_2377" value="" />
</p>
</div>
<div class="text required" id="w2378">
<p class="data">
<label for="text_2378">Phone</label>
<input id="text_2378" type="text" name="e_2378" value="" />
</p></div>
<div class="text" id="w2379">
<p class="data">
<label for="text_2379">Email</label>
<input id="text_2379" type="text" name="e_2379" value="" />
</p>
</div>
<p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>
<input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
<input type="hidden" name="SITEID" value="2185" />
<input type="hidden" name="cpBID" value="367780" />
<input type="hidden" name="formslug" value="footer-info-request" />
<input type="hidden" name="CMSCODE" value="EKK" />
<input type="hidden" name="fkey" value="" />
</fieldset>
</form>
</div><!-- #footer-contact-form -->
I guess I found the problem:
screen.css (line 382)
#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}
"overflow:hidden" causes the problem.
Have you tried not floating the <p> elements to the left? Why are you actually doing this? It isn't required in the current layout.
Wow that worked!
I was using overflow:hidden to force the div to contain the floated label and input elements.
But really the float on the input elements wasn't necessary.
Thanks you all very much.