Say I have the next form:
<form action="/orders/add" class="form-horizontal" id="OrderAddForm" method="post">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<div class="control-group">
<button type="button" class="btn" id="new-order-line">New order line</button>
</div>
<div class="control-group">
<input class="btn my-hidden" type="submit" value="Save Orderr">
</div>
</form>
And my css:
.my-hidden {
display: none;
}
And my js:
$(function() {
$('#new-order-line').click(function() {
$('.my-hidden').show('slow');
});
});
So I want to display the 'Save Order' button whenever I click the 'New order line' button, but it seems that Twitter Bootstrap override my 'my-hidden' class because is inside of a 'form' element and my 'Save Order' button is always shown.
I've read that some people have the same problem
Some workaround to hide my button?
I don't view this as a problem per se. It may not be (easily) done with Twitter Bootstrap CSS rules but if the problem is that Twitter Bootstrap overrides what you want to do, you can always create your own rules with higher specificity.
One easy way would be to add to the attributes style="display: none;" since inline styles automatically enjoy top specificity.
A way of giving your class higher specificity is elaborating the selector a bit. For example, this has a higher specificity than your example but I don't know if it's enough:
.form-horizontal .control-group .my-hidden { display: none; }
(I hope I understood your problem correctly... berate me if not ;)
Related
So there seems to be a stubborn search button icon in the top bar of the staging site of my site but the problem is there is no turn-off or turn-on button for the icon in the admin area. I just can't seem to have it removed.
I believe I can remove this using CSS but I don't know how to.
The site I need help with is: (removed)
Add the following CSS rule to your template.css file:
.topbar .header-right .main-search {
display: none !important;
}
The file is located at /staging/wp-content/themes/oxpitan/css/template.css
If you have access to the html code, simply remove the div with the class "main-search gva-search".
Or, in your css add:
.main-search{
display: none;
}
Note, that this causes the entire class to hide. If you want to only hide that certain element, give it an Id and hide it in CSS the same way, except with # instead of .
Open inspect from chrome and get its id or unique class then add this css code to remove it
class or id {display:none!important;}
remove that from your theme it must be in the header
note: if you use display:none; it still loads but it cannot be seen, if you dont need it at all just delete it.
open the header and search for below codes and delete them.
<div class="main-search gva-search open">
<a class="control-search search-open"><i class="fa fa-search"></i></a>
<div class="gva-search-content search-content">
<div class="search-content-inner">
<div class="content-inner"><form method="get" class="searchform gva-main-search" action="https://sundaybasilagbalegacyfoundation.com/staging/">
<div class="gva-search">
<input name="s" maxlength="40" class="form-control input-large input-search" type="text" size="20" placeholder="Search...">
<span class="input-group-addon input-large btn-search">
<input type="submit" class="fa" value="">
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I have a search box with input element and submit button. I am working in bootstrap. At xs breakpoint submit button goes into another line. I want to make the whole forum never collapse but changes its size as it happens by default
<form class="form-inline quick-search-form" role="form" action="search.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Keyword(s)">
<button type="submit" id="quick-search" class="btn btn-custom"><span class="glyphicon glyphicon-search custom-glyph-color"></span></button>
</div>
<div class="pad-top-20">Examples Background, Banner, Brochure</div>
By default, bootstrap inline form will always collapse on xs (from the documentation http://getbootstrap.com/css/#forms-inline)
Add .form-inline to your form (which doesn't have to be a ) for
left-aligned and inline-block controls. This only applies to forms
within viewports that are at least 768px wide.
You need to override them so it will never collapse
.form-group input{
width: 80%;
display: inline-block;
}
Working plunk: https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview
I have a problem here which I want to click button then go to another page. But it does not function
This is my code
<button type="button" class="btn btn-edit btn-sm pull-right" data-toggle="modal" data-target="#modal-editProfile" href="template/home.html">Start Booking Your Room</button>
I do not know why, the button does not function.
please help me, I have wasted my whole day just doing this.
Thanks,
faizal
HTML
The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
Set if necessary CSS display: inline; on the form to keep it in the flow with the surrounding text.
CSS
If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (only IE support is currently (July 2015) still poor).
Go to Google
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Or pick one of those many CSS libraries like Bootstrap.
JS
If JavaScript is allowed, set the window.location.href.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Source
Buttons won't redirect you to another page unless you handle that in javascript. If you just want to redirect, you may use anchor tag, see example below:
<a class="btn btn-edit btn-sm pull-right" href="template/home.html">Start Booking Your Room</a>
as the tittle says, is it possible to style a <input type="file"> to only show text like "Upload" without the button and the target file showing :)
i've tryed to google but all the answer doesnt cut it, the only answer that came close to what i wanted was done with javascript div trigger that would trigger.(click) on the input <input type="file"> but as it was pointed out that browser/mobile phones would take this as a "attack" and wouldn't allow the $_POST!
Check this CustomInputFile use Bootstrap its more easy to customize.
You can do this by mocking the input element and binding an event listener to a div or whatever you would like to use like this:
HTML:
<form>
<input type="file" id="upload"/>
<div id="button">Upload</div>
</form>
CSS:
#upload{
display: none;
}
#button{
display: inline-block;
cursor: pointer;
}
JavaScript:
document.getElementById("button").addEventListener("click", function(){
document.getElementById("upload").click();
});
JSFiddle:
http://jsfiddle.net/12Lp66p2/
I have a form with a textbox for email input and a button. The button is technically a HTML button here. The Form's HTML is like this:
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit">
Submit
</button>
</form>
JSFiddle Code: http://jsfiddle.net/ahmadka/aDhUL/
I'd like to convert the button type="submit" control to an input type="submit", while also keeping all the current CSS, so that visually there's no change. CSS would need to be updated I guess. I tried to do this myself, but I couldn't update the CSS correctly.
Can someone help me with this please ?
The basic solution requires changing the following everywhere in your CSS
button -> input[type=button]
input -> input[type=text]
I'd prefer to add a CSS class, instead of referencing the tag names, you could just use
<input type="text" class="text" />
<input type="submit" class="btn" />
That would require changing the following everywhere in your CSS
button -> input.btn
input -> input.text
This is not fully finished but almost works http://jsfiddle.net/aDhUL/7/
The problem is that the input:before directive inserts an element inside of the input. That is allowed for button, but not allowed for input , since input can't have child elements. http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So (if you want to use :before) you have to go back to a button, inserting a span element between the text field and the button won't allow you to have a hover effect on both the arrow and the button.
Why do you want to use input type="submit" in the first place?
You just need to change button to input[type=submit] in your stylesheets. If that doesn't work, then you'll need to be more specific about what problems you're having.
You will have to edit CSS, don't be lazy mate :)
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<input type="submit" class="btn" value="submit">
</form>
CSS
.btn{
color:green;
}
Now you can also use after adding the class in CSS
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit" class="btn">Button</button>
</form>
All of the style sheets have to be updated to do so:
What is now this:
/* Form submit button */
.form-wrapper button {
Needs to become this:
/* Form submit button */
.form-wrapper input[type=submit] {
there are a bunch more classes to be updated below that one..
EDIT: changed it from a class to the style as joe points out.