I have this:
<div id="sidebar-a">
<form id="form">
<input class="button" type="submit">
</input>
</form>
</div>
And I need to select only the input (my page has same <form> in #footer, the only way to change property of this one is, like I tried to do, with #sidebar-a, but it doesn't work)
Given that you made no mention of JQuery, I'm assuming you're trying to select the input element via CSS.
#sidebar-a > form > input.button:first-child {
font-size: 2em;
}
An example is available at this JSFiddle
You should not have 2 form elements with same ID. However this will do it:
#sidebar-a > form > input.button:first-of-type { }
Related
I am trying to create an HTML form is separate parts for layout reasons. As far as I understand, you can use a fieldset with a form attribute to associate the fieldset with the form, even if it’s not inside the form (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset).
However, if I have a separate fieldset with a submit button or another input in it, it doesn’t seem to work.
<form id="test">
<input name="inside-stuff" value="Inside">
<button type="submit">Doit Inside</button>
</form>
<fieldset form="test">
<input name="outside-stuff" value="Outside">
<button type="submit">Doit Outside</button>
</fieldset>
In the above snippet I have two submit buttons and two inputs. The one in the actual form works, while the one in the attached fieldset doesn’t. When I use the inside submit button, it only submits what’s in side the main form, not what is in the associated fieldset.
This may not be obvious when running the snippet, but is certainly the case when tried in real life.
What is missing to make this work?
Update 1
The problem appears to be more generic than that. I find that input elements inside an associated fieldset don’t get submitted either.
Update 2
This is not a duplicate of Submit form using a button outside the <form> tag. This question specifically refers to a fieldset element. The other doesn’t even mention it.
I wrote the following javascript
function control() {
function view(i) {
var frm = items[i].getAttribute("form");
var fBase = document.querySelector("form[id=" + frm + "]");
fBase.addEventListener("submit", function(){
var fld = document.querySelector("fieldset[form='" + this.id + "']");
var cln = fld.cloneNode(true);
cln.style.display = "none";
document.getElementById(frm).appendChild(cln);
},true);
}
var items = document.querySelectorAll("FIELDSET[form]");
var getter = function () {
return this.getAttribute("form");
};
for(var i = 0; i < items.length; i++) {
view(i);
Object.defineProperty(items[i], 'form', {
get: getter
});
}
}
window.addEventListener("load",control,true);
It's happening because the Form you have placed inside the fieldset is wrong. The form should be the parent of the fieldset in order to get it to work!
The form tag should always be the parent of the fieldset.
If you place <form> and <fieldset> then it will work. The code below should do.
<form id="test">
<input name="stuff">
<button type="submit">Doit</button>
</form>
<form>
<fieldset>
<input type="text" name="stuff2">
<button type="submit">Doit</button>
</fieldset>
</form>
I hope this will help!
I've noticed an odd behavior with button_to. I have some stylized buttons. When button_to is generated the input submit field is placed inside the button element. What ends up happening is that the inner edges of the button when clicked do not redirect the user to the new page. The user is forced to directly click on the text to redirect.
My question is, how do I fix this? I don't think CSS is a possible solution. Ideally I would like to apply the classes I pass in the button_to method to the input field. That way the input field becomes the button and not the form.
Here is the button_to method.
button_to("Click me!",
"/new-course",
{class: 'start-course-button is-normal start-course'}
).html_safe
Here is the html that is generated.
<form class="start-course-button is-normal start-course" method="post" action="/new-course">
// This must be clicked below and not the form itself for there to be a redirect
<input type="submit" value="Click me!">
<input type="hidden" name="authenticity_token" value="secret_auth_token">
</form>
Currently, you are applying styles to the form rather than the submit input inside of it. You can use a child selector to select the submit input as the form's child for a pure CSS solution.
For clarity's sake, create a new class to apply to the form. This class will select the child input of type submit.
.start-course-form input[type="submit"] {
/* button styles */
}
Then, update your helper method with the correct class.
button_to("Click me!",
"/new-course",
{class: 'start-course-form is-normal start-course'}
).html_safe
Note that this will not make the button a member of the start-course-button class, it will just look the same.
button_to does not allow you to apply classes or customize the submit input.
Rather you would use form_tag to manually create the form if you need that kind of flexibility. Edited to show how it would work in a presenter.
class CoursePresenter
def initialize(helpers)
#h = helpers
end
def new_course_button
h.form_for("/new-course") do
h.submit_tag "/new-course",
class: 'start-course-button is-normal start-course'
end
end
private
attr_reader :h
end
You could also use a CSS rule that targets the input element instead of the form:
.start-course-button input[type="submit"] {
border: 2px solid black;
padding: 10px 15px;
background-color: pink;
}
<form class="start-course-button">
<input type="submit" value="Click me">
</form>
I am using the ng-file-upload directive to upload files. I have a scenario where the number of files to be uploaded is decided dynamically. Also I have created have a slightly deviated scenario form the standard where Upload and Submit buttons are separate and needless to say do different actions.
Now what I want to do is get the Choose File ie. <input type="file"> and Upload Button on the same line but I have not been able to do so.
My Relevant Markup:
<input type="file" ngf-select ng-model="input.value" name="{{input.name}}" ngf-model-invalid="errorFile" required>
<button type="button" ng-show="input.value !== null" ng-click="uploadFile(input.value, $index)">Upload File</button>
<span ng-show="input.value.progress >= 0">
<div class="progress" style="width:{{input.value.progress}}%" ng-bind="input.value.progress + '%'"></div>
</span>
What can I do in this case?
You can try to float-right the button (see here)
Like this:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
and at the end clear the float with class clearBoth
So i am making a php login page. I have the login application finished but all i need are a list of classes that will style my login form the way i want it.
Picture of the login form now - http://i.imgur.com/mrfvXXq.png
I need to style it so it is centered on the screen and will also not take the whole width.
I want it to look like this - http://i.imgur.com/C6G0FGK.png
Now i need it centered on the screen. Note im not adding in the Email input and text box. Only my Username and Password input. All i need is styles.
For a live version please visit gippixservers.com/zAdmin/admindashboard
Code -
">
<div class = "form-group">
<label for="txtUsername" class = "col-lg-2 control-label">Username:</label>
<div class = "col-lg-10">
<input class = "form-control input-block-level" type="text" title="Enter your Username" name="txtUsername" placeholder = "Username" />
</div>
</div>
<div class = "form-group">
<label for="txtPassword" class = "col-lg-2 control-label">Password:</label>
<div class = "col-lg-10">
<input class = "form-control input-block-level" type="password" title="Enter your password" name="txtPassword" placeholder = "Password" />
</div>
</div>
<div class = "form-control">
<input class = "btn btn-primary" type="submit" name="Submit" value = "Login"></input>
</div>
</form>
Bootstrap uses a grid system to place elements:
There are 12 grids you can have on one row. I have used col-*-offset in the code, this will leave space in the beginning. So what I'm basically doing is:
form class="form-horizontal col-md-offset-4 col-md-4" name="form"
method="post" action="/zAdmin/admindashboard.php"
This means, leave grid of 4 length before the form, and set the form to be of grid 4 length thus your form gets centered. [the leftover space on right is 4, all together in total making it 12]
Few changes made near your login button too. Use the class pull-right to position elements to the right side.
Also, remove this:
#gippix-adminControl {
width: 50%;
margin: 0 auto;
}
This is already done with the classes I mentioned above.
Fiddle Demo
I think your asking to make the live version smaller and centered ?
You need to add the following to your form tag. OR wrap your form in a div.
width: 50%; /* or whatever width you see fit */
margin: 0 auto;
Alternatively, You can view all bootstraps predefined form display options - getbootstrap.com/css/#forms
Or on your div <div id="gippix-adminControl" ... inputs... </div>
Just adjust your css to
#gippix-adminControl input{
width: blah;
max-width: blah;
min-width: blah;
}
To move your login button to the right simply set your
<input class="btn btn-primary" type="submit" name="Submit" value="Login">
to float: right; either in your css sheet or inline.
You can put a max-width to your .gippix-adminControl css class and go from there.
.container{max-width: 500px;}
You can also remove the div around your button , that will get rid of the unintended border. Then put a float: right on the button and you'll have yourself a good looking login form !
you can also make a .loginbutton-right css class like this :
.loginbutton-right{float: right;}
and add that class to your button !
It results in this :
I have a problem. I have two HTML buttons, and I want to show one at one time. I have code which is working fine but the problem is of space. In the GUI, spaces of both buttons are present which is not acceptable. I want to place both buttons on the same location.
The code is:
function searchWithin(id)
{
if(document.getElementById("searchwithin").checked)
{
document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="visible";
document.getElementById(id+'-form-submit').style.visibility="hidden";
}
else
{
document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="hidden";
document.getElementById(id+'-form-submit').style.visibility="visible";
}
}
<g2:button style="visibility:visible;" id="${g2:escapeXml(componentId)}-form-submit" name="submitButton" type="submit" value="Search" bamId="${searchBarBam}" actionName="${action}" inputClass="p-userSearchButton" />
<input style="visibility:hidden;" type="button" class="p-userSearchButton" name ="searchinresult" id="searchwithin_${componentId}_searchButton" value="Search Within" onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input>
I need to change it like:
document.getElementById('searchwithin_'+id+'_searchButton').style.display="none";
document.getElementById(id+'-form-submit').style.display="true";
<g2:button style="display:true;"
id="${g2:escapeXml(componentId)}-form-submit"
name="submitButton"
type="submit"
value="Search"
bamId="${searchBarBam}"
actionName="${action}"
inputClass="p-userSearchButton" />
<input style="display:none;"
type="button"
class="p-userSearchButton"
name ="searchinresult"
id="searchwithin_${componentId}_searchButton"
value="Search Within"
onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input>
But it's not working.
You want display: none; not visibility: hidden.
Edit
In your edited code you use display: true to show a button, but correct syntax would be: display: inline. For more display options view: w3schools.com/css/css_display_visibility.asp.
If this does not fix your problem, please define more clearly what your issue is exactly.