I am using following code in my project:
<input class="btn btn-default btn-file" type="file" id="file" style="float:left; width: 250px" name='athletes_imageid' value="" />
However my default button still stays on top of bootstrap one. Any way of fixing that?
Just put class to <span> like,
<span class="btn btn-default btn-file">
<input type="file" id="file" style="float:left; width: 250px" name='athletes_imageid' value="" />
</span>
Related
I implemented a button to display an input field after the button has been clicked, I checked that it worked but as I was doing some final debugging, the button doesn't work again. The strange thing is that, the same piece of code works for a different button. Would you please have a look how I can fix the bug? Thanks a lot!
Here is the code for buttons and input field. The button "Change Password" works, the "Reject" button does not.
<div>
#if($user->user_status=="pending")
<a style="float:right" class="btn btn-primary text-right" href="/users/approve_user/{{$user->id}}">Approve</a>
<a style="float:right" class="btn btn-primary text-right" onclick="rejectClick()">Reject</a>
#else
<a style="float:right" class="btn btn-primary text-right" href="/users/delete_user/{{$user->id}}">Delete</a>
<a style="float:right" class="btn btn-primary text-right" onclick="passwordClick()">Change Password</a>
#endif
</div>
<div class="form-group">
<form action="/users/reject_uesr/{{$user->id}}" method="post">
<label for="textInput" class="hide" id="textTitle">Reject Reason: </label>
<input class="form-control hide" name="reject_reason" value="" type="text" id="textInput" placeholder="Please write down the reason to reject this user:" />
<input class="btn btn-primary hide" type="submit" id="textSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<div class="form-group">
<form action="/users/change_password/{{$user->id}}" method="get">
<label for="textInput" class="hide" id="password">New Password </label>
<input class="form-control hide" name="password" value="" type="text" id="passwordInput" placeholder="Please Enter The New Password:" />
<input class="btn btn-primary hide" type="submit" id="passwordSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>
Here is the code for script:
<script>
function rejectClick(){
document.getElementById('textTitle').className="show";
document.getElementById('textInput').className="show";
document.getElementById('textSubmit').className="btn btn-primary show";
}
function passwordClick(){
document.getElementById('password').className="show";
document.getElementById('passwordInput').className="show";
document.getElementById('passwordSubmit').className="btn btn-primary show";
}
</script>
I have a issue with bootstrap.
When the div is extend the radio button will block and won't work.
Here's the code :
<form name="today_task" action="" method="post">
<div data-toggle="collapse" id="add_task" class="collapse">
<textarea name="task_content" style="width: 100%;" placeholder="Enter task"></textarea>
<input type="radio" name="priority" value="3"> High Priority <br />
<input type="radio" name="priority" value="2" checked> Medium Priority <br />
<input type="radio" name="priority" value="1"> Low Priority <br />
</div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#add_task" href="#add_task"><input type="button" name="submit_new_task" id="add_task_button" value="Add Task" class="btn btn-success" style="width: 100%;" onClick="submit_button()"></a>
</form>
Here's the problem : https://jsfiddle.net/g14ajcgh/
remove the "data-toggle=collapse" from
<div data-toggle="collapse" id="add_task" class="collapse">
it works for me
how about making another div for your radio button?
I have a bunch of buttons and an input text box. But they are not aligned properly as shown.
<div class="col-md-12 pull-right">
<div class="pull-right">
<button type="button" class="btn btn-default btn-xs"> << </button>
<button type="button" class="btn btn-default btn-xs"> < </button>
<button type="button" class="btn btn-default btn-xs"> > </button>
<button type="button" class="btn btn-default btn-xs"> >> </button>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
</div>
Is there a way they are alligned in one row? Also notice that the size of the input box is looking different from the others. Is there a way to fix this too?
using btn-group arranges all buttons in a row. like this
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; margin-top:10px" class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Note: When using HTML symbols(for example <,>) as text, then encode them as I did(Just a good practice).
Docs btn-groups
And I used inline style for input type number margin-top:10px; because input[type=number] in bootstrap has margin-bottom:10px; so, to balance used margin-top. Instead you can use margin-bottom:0px
As #Mike Robinson said, even .input-append does the same . the difference is rounded borders and input-append is converted to input-group from version 3
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="input-append">
<button type="button" class="btn btn-default btn-xs"><<</button>
<button type="button" class="btn btn-default btn-xs"><</button>
<button type="button" class="btn btn-default btn-xs">></button>
<button type="button" class="btn btn-default btn-xs">>></button>
<input type="number" style="width: 30px; " class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
You need an input-group. You can add on groups of buttons to either side of the input. Here they'll be on the left:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>
Read more about it here:
http://getbootstrap.com/components/#input-groups-buttons-multiple
The form-control style on your input is the thing that's moving it to the next line. It's doing so because the form-control style in bootstrap is set to display: block. By adding a new style or doing an inline style you can get them on the same page.
For instance:
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" style="display: initial;" />
Or you can make a class such as:
.newInputControl{
display: inline;
}
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" class="newInputControl" />
You can also take care of it using bootstrap, which has built the framework to handle this by placing your form-control inside an input group.
use:
form-control-static instead of form-control in your input text
I have coded buttons and input boxes but I want them to be aligned and placed in the center of the browser, but my output looks messy. I tried using center but the input boxes are not aligned. How do I align them? Thanks in advance.
Here is my complete code:
<center>
Name:
<input type="text" id="NameInput">
<br>
Number:
<input type="text" id="NumberInput">
<br>
<input type="button" value="ADD" onClick="press(input.value)">
<input type="button" value="EDIT" onClick="press(input.value)">
<input type="button" value="DELETE" onClick="press(input.value)">
<br><br>
Name:
<input type="text" id="NameSearch">
<br>
Number:
<input type="text" id="NumberSearch">
<br>
<input type="button" value="SEARCH" onClick="press(input.value)">
</center>
Try below using margin on a div and specifying a width:
<!--ADDED THE BORDER JUST SO YOU CAN SEE WHAT THIS STYLE IS DOING-->
<div style="margin: auto; border: 1px solid red; width: 500px;">
<div>
Name: <input type="text" id="NameInput">
</div>
<div>
Number: <input type="text" id="NumberInput">
</div>
<div>
<input type="button" value="ADD" onClick="press(input.value)">
<input type="button" value="EDIT" onClick="press(input.value)">
<input type="button" value="DELETE" onClick="press(input.value)">
</div>
<div>
Name: <input type="text" id="NameSearch">
</div>
<div>
Number: <input type="text" id="NumberSearch">
</div>
<div>
<input type="button" value="SEARCH" onClick="press(input.value)">
</div>
Also take a look at this url: CSS replacement for <div align="center">
If you want to make all the input boxes align you can try something like below:
<Style>
.label
{
display: inline-block;
width: 90px;
}
</style>
<div style="margin: auto; border: 1px solid red; width: 500px;">
<div>
<span class="label">Name:</span>
<input type="text" id="NameInput">
</div>
<div>
<span class="label">Number:</span>
<input type="text" id="NumberInput">
</div>
<div>
<input type="button" value="ADD" onClick="press(input.value)">
<input type="button" value="EDIT" onClick="press(input.value)">
<input type="button" value="DELETE" onClick="press(input.value)">
</div>
<div>
<span class="label">Name:</span>
<input type="text" id="NameSearch">
</div>
<div>
<span class="label">Number: </span>
<input type="text" id="NumberSearch">
</div>
<div>
<input type="button" value="SEARCH" onClick="press(input.value)">
</div>
<div>
Depending on the requirements, you could try playing around with the placeholder attribute:
<input type="text" id="NameInput" placeholder="Name">
The <center> is working properly because it considers the field and the text to be all one line, and it finds the centre of that line. Because the label for each field is a different length, each line has a different centre point.
How to align input forms in HTML has a few different approaches. You should use styling to make the label for each field the same length.
I'm trying to make a button which connects to a mumble server. I'm using bootstrap for the CSS at the moment.
In my quick mock up I did earlier I had this button with the headphones icon, however I can't figure out to do it as the connect button requires the tag instead of the tag.
Here is a working version of the button the way i would like it styled and one of a working version of the mumble connect button.
Is it possible to use the icon with the <input>?
Styled button;
<button class="btn btn-large btn-primary" type="button"><i class="icon-headphones icon-white"></i> Connect to Mumble</button>
Connection 'button';
<input class="button" value="Connect" onclick="window.location.href='mumble://MUMBLE IP HERE/?version=1.2.3'" type="BUTTON" />
Try this-
<div class="input-prepend">
<span class="add-on"><i class="icon-user icon-black"></i></span>
<input type="text" name="login" class="//Some class" placeholder="Email address"/>
</div>
In case of appending it, Just replace .input-prepend with .input-append.
Example- http://jsfiddle.net/PYwq5/
Update bootstrap V3-
Append-
<div class="input-group">
<input type="email" class="form-control" />
<span class="input-group-addon">
icon</span>
</div>
Prepend-
<div class="input-group">
<span class="input-group-addon">
icon</span>
<input type="email" class="form-control" />
</div>
Demo- https://jsfiddle.net/DTcHh/9190/