I'm trying to create a download form where users can download and filter data according to the date. I want the form to be wrapped inside a box as shown in the example below taken from this link.
I followed the example code, wrapping my form content inside <fieldset> tags but my form looks like this:
I don't know if this is a bug within bootstrap or if some additional styling must be done.
Here is my html code:
<form role="form" method="post">
<fieldset>
<legend> Download Details</legend>
<div class="form-group">
<label for="startdate" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-10">
<select >
<option>Select Date --</option>
</select>
</div>
</div>
<br><br>
<div class="form-group">
<label for="startdate" class="col-sm-2 control-label">End date</label>
<div class="col-sm-10">
<select >
<option>Select Date --</option>
</select>
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Download</button>
</fieldset>
</form>
Bootstrap is adding styles to fieldset and legend
You can create a stylesheet that overrides those styles and include that stylesheet after bootstrap.
You can also check this Stackoverflow Answer.
Related
Why is one input box full width and the others so short? This is my html. I am using bootstrap:
<form action="https://www.example.net/auth/create_user" class="form-horizontal" id="login-attempts-form-admin method="post" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-6">
<!-- id -->
<div class="form-group">
<label for="id">
Reference Id
</label>
<div class="input-group">
<input type="text" name="id" value="" id="id" style="" class="form-control" placeholder="" disabled="disabled" />
<div class="input-group-addon"><i class="ti-info"></i>
</div>
</div> <!-- end input group -->
<span class="help-block">
The Reference Id is created automatically.
</span>
</div> <!-- end form-group Id -->
<!-- ip_address -->
<div class="form-group">
<label for="ip_address">
IP Address
</label>
<div class="input-group">
<input type="text" name="ip_address" value="" id="ip_address" style="max-width:none !important" class="form-control input-xlarge" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group ip_address -->
<!-- login -->
<div class="form-group">
<label for="login">
Login
</label>
<div class="input-group">
<input type="text" name="login" value="" id="login" style="" class="form-control" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group login -->
</div>
</div> <!-- end of row -->
</div> <!-- end of container. -->
</form>
I even tried to make the ip_address field wider by stating style="max-width:none !important" but no use. Is there any way to make the fields wider? Is there a preset width in bootstrap? I was of the belief the default was max width.
This is what my final output looks like:
Low rep to add as a comment, but trying your code end up with same length input fields. So don't see a problem from my end.
One thing maybe the version of bootstrap you are using, as I used the latest from the Bootstrap page (4.1.3), as older versions might have some changes within the CSS.
You could add your CSS which would give a better view if you are not changing something.
Another thing is to try:
input {
max-width: 100%;
}
When I tested the code I didn't see any different widths with the inputs.
On ip_address field, I am using style="max-width:none !important"... Any CSS you add will not work with the inline style max-width:none; !important.
It will override any changes you are making in the CSS file or any where else. Inline styles especially !important will override any attached style sheets or classes.
I think the problem may be you have this on your input style="max-width:none !important"It is overriding the default bootstrap setting and not setting your input to max width.
That's if you want them wider, shorter wrap in a <div> then manipulate the <div> with CSS or the "col-sm-6" etc.. classes.
Example from Bootstrap website version 4. Also, version 3 has the "form-control" class as well. It makes your form 100% width then you can manipulate it by wrapping in a <div> of your choice or another suitable element or CSS.
EXAMPLE:
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
https://getbootstrap.com/docs/4.0/components/forms/
When I tested the input field lengths weren't different.
But if it happens try styling the input tag with
<input style="max-width: 100%">
or add this to css
I am just learning and coding the same time with Boostrap and the layout I am thinking is something like this:
Row
<SmallerColumn that hold label 1> <Larger Column that hold the control 1>
<SmallerColumn that hold label 2> <Larger Column that hold the control 2>
EndRow
So for example a combobox and a label that says what is that conmbox for.
For example: Country: Combobox of Countries
form-horizontal class of bootstrap is what you need. However different rows will be taken care of by the form-group class. But using a form-control class will lead you to have a border around the text as:
In order not to have a border, using control-label as the class.
Try this code:
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Islands:</label>
<div class="col-sm-10">
<label class="control-label" id="l1" >Combobox of Islands 1</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Countries:</label>
<div class="col-sm-10">
<label class="control-label" id="l2" >Combobox of Countries 1</label>
</div>
</div>
</div>
Here is a jsfiddle: https://jsfiddle.net/mayank_shubham/an197vva/
The question is very simple, but somehow confusing for first timers, don't sweat it, it only requires a quick read on Bootstrap's documentation regarding form control layout.
An extract of the layout would be:
<form class="form-horizontal">
<div class="form-group">
<label for="inputField" class="col-sm-2 control-label">LabelText</label>
<div class="col-sm-10">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputField" class="col-sm-2 control-label">LabelText</label>
<div class="col-sm-10">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</form>
No need for .row as .form-group will take care of newly appended elements.
I have 3 columns in my form for inputting the user's phone:
<div class="col-md-5">
<label class="control-label">Phone</label>
<div class="row">
<div class="col-md-4">
<label for="phone_code" class="sr-only"><fmt:message key="phoneCode"/></label>
<select class="form-control" name="phoneCode" id="phone_code">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<span class="col-md-2 text-center">-</span>
<div class="col-md-6">
<label for="phone_number" class="sr-only">phone number</label>
<input type="tel" class="form-control" name="phoneNumber" id="phone_number" dir="LTR" value="${phoneNumber}">
</div>
</div>
</div>
http://www.bootply.com/jgFqaA4r6o
When I include the bootstrap css for rtl:
https://github.com/morteza/bootstrap-rtl
this flips the order of the columns, which in most cases is the desired result. However, I would like the phone input columns to remain in the same order (unaltered).
Including the pull-left class to the first two columns fixes the problem but causes errors when resizing (specifically, shrinking) the screen.
I have tried using/learning the col--pull-/col--push- classes but I couldn't figure out how to make them work here.
Does anybody have any suggestions?
I am also open to changing the general layout if there are improvements on that as well.
Thank you.
I changed the html and used a small "hack" to solve this.
There is still probably a better solution out there. This is my html:
<div class="col-md-5">
<div class="col-sm-4 col-xs-12 pull-left">
<label for="phone_code" class="control-label">phone code</label>
<input type="text" class="form-control">
</div>
<div class="col-sm-8 col-xs-12">
<label for="phone_number" class="control-label">phone number</label>
<input type="tel" class="form-control">
</div>
</div>
http://www.bootply.com/tIW6xBHVGB
The "hack" is the "col-xs-12" class added to the <div> elements. If not added, the divs don't expand to take up the entire row as they should due to the "pull-left" class.
I'm open to hearing other suggestions.
I am using Skeleton right out of the box, and doing a very simple landing page.
I am using the form style provided on their website sample (http://getskeleton.com/#forms):
<!-- The above form looks like this -->
<form>
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test#mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Send a copy to yourself</span>
</label>
<input class="button-primary" type="submit" value="Submit">
</form>
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
But I am not seeing where I control where the form is sent to upon submit.
Can someone explain how I can send a form using Skeleton?
Sorry for the stupid question, but I am lost.
Thanks,
Melvins
I believe that they're just giving you the layout html and css. You need to provide either an action attribute (action='myurl') or id (id='myform') to the form element. Here's a simple example just using the action attribute:
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form action="myform.php">
Name: <input type="text" name="name">
<input type="submit">
</form>
Better, you can use jQuery or javascript to set up an event handler that will detect a click on the button and send your form input data wherever you like:
$( "#myform" ).submit(function( event ) {
alert( "name data sent to myform.php" );
$.post( "myform.php" );
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Click 'Submit' to send the input name to 'myform.php'</p>
<form id="myform">
Name: <input type="text" name="name">
<input type="submit">
</form>
I'm styling this page and yet I can't seem to access either .4thForm or .3rdForm to style. These elements move responsively when screensize drops below 1024px so it's cruitial that I access these elements.
I've tested the #media call and I can change the colour .frontbannertitle with it so I know it's not the media call. Using inspector I can code the element to achieve what I would like, but it will not let me generate a css element to style it.
I need to edit this div to provide it with a negative margin-top value, as that cannot be achieved by targeting the select within the div.
Jsfiddle: http://jsfiddle.net/P49ja/
<form class="frontbannercontainer form-horizontal">
<fieldset class="frontbanner">
<h1 class="frontbannertitle">Enquire Now!</h1>
<div class="control-group">
<div class="controls">
<input id="textinput1" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="textinput2" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 3rdForm">
<input id="textinput3" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 4thForm">
<select id="selectbasic" class="frontbannerselect input-xlarge" name="selectbasic">
<option selected="selected" disabled="disabled" value="0">Select Membership</option>
<option value="1">Individual Membership</option>
<option value="2">Corporate Membership</option>
</select>
</div>
</div>
<div id="SliderFormPhone">
<span id="ques">Enquire By Phone:</span>
<span id="ph">(02) 000 000</span>
</div>
<div class="control-group">
<div class="controls">
<button id="singlebutton" class="frontbannerbutton btn btn-primary" name="singlebutton">Apply!</button>
</div>
</div>
</fieldset>
</form>
Thanks!
DEMO
You can not start a class with a number in your case it's .4thForm
Change it to something like .Form4th
I think you cannot use "3rdForm" as a valid class selector.
The first character cannot be numeric.
Refer to this SO answer.
I added "thirdForm" as a class to your fiddle and was able to style it properly. So I'm assuming that is the issue.
you need to add special character "\3" to access this class like below..
.\34thform{
display:none;
margin-top:-7em;
}
sample jsfiddle below...
http://jsfiddle.net/P49ja/4/