I'm using SimpleForms to publish a form on a Joomla 2.5 site.
The problem is that the checkbox and the options are on 2 different lines
The html generated is :
<form method="post" id="simpleForm2_142" name="simpleForm2_142" enctype="multipart/form-data" class="simpleForm">
<input type="hidden" name="moduleID" value="142" autocomplete="off">
<input type="hidden" name="task" value="sendForm" autocomplete="off">
<input type="hidden" name="Itemid" value="230" autocomplete="off">
<input type="hidden" name="url" value="http://xxx" autocomplete="off">
<style type="text/css">
form.simpleForm label{display:block;}
form.simpleForm label span{color:#ff0000;}
form.simpleForm input.inputtext{width:215px;}
form.simpleForm textarea.inputtext{width:215px;height:100px;}
form.simpleForm textarea.inputtext_small{width:215px;height:50px;}
</style>
<p><label for="sf2_142_nom">Nom <span>*</span></label> <input type="text" name="sf2_142_nom" id="sf2_142_nom" class="inputtext" value="" autocomplete="off"></p>
<p><label for="sf2_142_prnom">Prénom <span>*</span></label> <input type="text" name="sf2_142_prnom" id="sf2_142_prnom" class="inputtext" value="" autocomplete="off"></p>
<p><label for="sf2_142_adresse">Adresse <span>*</span></label> <textarea name="sf2_142_adresse" id="sf2_142_adresse" class="inputtext"></textarea></p>
<div class="chkbox"><label for="sf2_142_label">Label</label>
<input type="checkbox" name="sf2_142_label[]" id="a7c1272bf8f1dfd06b1d0f85e31ac1b1" value="option1" autocomplete="off">
<label for="a7c1272bf8f1dfd06b1d0f85e31ac1b1">option1</label>
<input type="checkbox" name="sf2_142_label[]" id="29def0c43615fa46358f41e04e9b07ee" value="option2" autocomplete="off">
<label for="29def0c43615fa46358f41e04e9b07ee">option2</label>
</div>
<p><input type="submit" value="Envoyer" autocomplete="off"></p>
</form>
I would like to use some css to make them keep on one only line
Any hint would be welcome !
EDIT :
I'm using simpleforms 2 for Joomla - here's the homepage of this extension :
http://allforjoomla.com/xmodules/mod-simpleform2
EDIT 2 :
Sorry I don't get it to make things clear when answering to your answers - as soon as I want to enter a new line it saves my answer - so my edit here :
Thanks for your answers, But if I do so I will get all this on one line :
Label <checkbox> option1 <checkbox> option2
I want to get :
Label
<checkbox> option1
<checkbox> option2
EDIT 3 :
Its Better with :
form.simpleForm label:first-child { display: block; }
But I get :
Label
<checkbox> option1 <checkbox> option2
And this is what I try to get :
Label
<checkbox> option1
<checkbox> option2
Making element inline will your issue.
form.simpleForm label, form.simpleForm div.chkbox input{ display:inline !important}
You could just remove this line:
form.simpleForm label {
display: block;
}
Or, if you want to keep the first label (as mentioned in the note below) as a block element, do this instead:
form.simpleForm label:first-child {
display: block;
}
Related
I have a form with this code:
<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>
I want to hide the label part (I don't want to delete it), so I tried using style="display:none", but for some reason it also hides the placeholder of the field.
Any way to resolve this?
Hiding the label with display:none; should not effect the placeholder of the input:
label[for="zipcode"] {
display:none;
}
<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>
Try with this
.f-label label{display:none}
#zipcode-label {
display: none;
}
works for me in JSFiddle, but I don't have your internal or external stylesheets so that may be a huge part of the equation
I have a checkbox input control and I have a CSS file which includes the following declaration:
input[type="checkbox"] {
display:none;
}
I want this CSS to be be applied to any checkbox input element except one. How can I ignore this CSS rule(display:none;) on one of my controls?
All you need to do is target that specific checkbox and give it a display of initial.
You haven't provided any HTML so I'm going to have to make up a generic example:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"].bar {
display: initial;
}
<input type="checkbox" class="foo" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="baz" />
You can simply do something like:
input[type="checkbox"]:not(.this_one) {
display: none;
}
Note: Replace this_one with the ID or class of the one you want to exempt(leave out)
See working example here
As you can see by the other solutions, there are many ways to accomplish what you want. Another way is to use the "cascading" aspect of cascading style sheets by overriding the style within the element:
input[type="checkbox"] {
display: none;
}
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" style="display:initial" />
Just use a class to add this css property (and possibly others) and omit the class for the needed element
input[type="checkbox"].yourClass
{
display:none;
}
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike"> The one without the class
I have a form field box with class CCPPDisplayTD.
I'm trying to make it's length longer with CSS styling.
How do I use CSS to accomplish this?
<form>
<input type="text" /><br />
<input type="text" class="CCPPDisplayTD" />
</form>
.CCPPDisplayTD{
width: 200px;
}
See here: http://jsfiddle.net/GT8jD/
In your stylehseet you need the following:
.CCPPDisplayTD{
width: 250px; // whatever size you need.
}
Your HTML needs to resemble something similar to:
<form>
<label> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" />
</label>
</form>
Or the following:
<form>
<label for="input-name"> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" id="input-name" name="input-name" />
</label>
</form>
I have this HTML code :
<div class="field">
<input type="hidden" value="" name="a" id="a"> <input type="hidden" value="xxxx" name="b" id="b">
<input type="file" value="" name="file1"> <input type="file" value="" name="file2">
<input type="file" value="" name="file3"> <input type="file" value="" name="file4">
<input type="file" value="" name="file5"> <input type="file" value="" name="file6">
<input type="file" value="" name="file7"> <input type="file" value="" name="file8"> </div>
In this HTML, i want hide all input type="file" inside div class="field"except the first one.
I cannot change the HTML (adding classes).
I tried to apply a pseudoclasses and structurate selector toghether, to accomplish the task :
.field input[type='file']{
display:none;
}
.field input[type='file']::first-child{
display:block;
}
But it seems doesn't work.
Anyone could suggest me the right syntax for using pseudo classes and selector togheter in css, to solve this problem?
Pseudo-classes use only one colon, so it's :first-child, not ::first-child.
But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.
You have to switch the rules around and use a sibling selector instead to hide the subsequent file upload inputs:
.field input[type='file'] {
display:block;
}
.field input[type='file'] ~ input[type='file'] {
display:none;
}
This technique is further described here, and can be used for most other simple selectors, not just classes and attributes.
You can use this code for all values and you will hide all input type="file" inside div class="field"except the first one. try this code.
<html>
<head>
<style>
.field input[type='file']
{visibility:hidden;}
</style>
</head>
<body>
</body>
</html>
I have seen forms that can do this without using <br /> etc.
Here's my form:
<form id="staff-login" name="staff-login" action="/staff/login/" method="POST">
<label for="staff-login-email">Email</label>
<input type="text" id="staff-login-email" name="email" value="" />
<label for="staff-login-address">Password</label>
<input type="password" id="staff-login-password" name="password" value="" />
<input type="submit" id="staff-login-submit" name="submit" value="Login" />
</form>
And an example of what I'm taking about:
http://img694.imageshack.us/img694/4879/43201622.gif
All the examples I can Google insert extra <div>s and mess with the code, I'm wondering if there is a way with the code I have (or if you can structure my code "better") to achieve what I need?
using css, float your label to the left. Also, make your input elements blocks with a decent margin...
label { float: left; width: 200px; }
input { margin-left: 220px; display: block; }
input.staff-login-submit { margin-left: 500px }
I've just guessed at a few numbers for the margins, so tweak as needed.
<label> and <input> are inline elements. Either you use <br /> (which is totally ok) or you specify them as block elements via CSS.
You can learn more about inline and block elements.