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?
Related
I have some radio buttons that are being rendered as actual buttons and the selected one bleeds into the modal-footer. I am using bootstrap. The code is:
<td>
<div class="btn-group radio-group" data-toggle="buttons">
<label class="btn btn-default">
<input id="ID1" name="Name1" type="radio" value="True">
A
</label>
<label class="active btn btn-default">
<input checked="checked" id="ID1" name="Name1" type="radio" value="False">
B
</label>
</div>
</td>
And here is a picture of what's happening.
I know that I'm not including all of the CSS and Modal code, but I'm hoping someone can at least point to a direction for research.
Thanks!
I have a modal form in Twig to add a new questions to a ticket system.
In this form I can add more options(answers) to the question and they will be in array.
And I have radio button near every answer filled, I want this button values to be in the same array for the answers.
I'm new to twig so I tried to use set but I didn't knew how exactly it should be.
Here is my code :
<div class="form-inline" id="showOptions" name"test">
<input class="form-control" name="answers[]" type="text" placeholder="Answer here"/>
<button onclick="javascript:void(0);" class="add_button btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"> </span>
</button>
<div class="radio">
<fieldset id="group1">
<label>bla bla?</label>
<label class="radio" ><input name="decision[]" type="radio" value"1">Ja</label>
<label class="radio" ><input name="decision[]" type="radio" value"0">Nein</label>
</fieldset>
</div>
</div>
and it would looks like this
create the field name like this.
<div class="form-inline" id="showOptions" name"test">
<input class="form-control" name="answers[$i][1]" type="text" placeholder="Answer here"/>
<button onclick="javascript:void(0);" class="add_button btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"> </span>
</button>
<div class="radio">
<fieldset id="group1">
<label>bla bla?</label>
<label class="radio" ><input name="answers[$i][2]" type="radio" value"1">Ja</label>
<label class="radio" ><input name="answers[$i][3]" type="radio" value"0">Nein</label>
</fieldset>
</div>
</div>
Where $i will increase by 1 when new row is added.
I am using bootstrap 3.3.6 and I am trying to disable this type of radio btn-group. I've tried placing the disabled on both the label and input, but it doesn't seem to work. The buttons would appear as disabled but still clickable. Whenever I click the buttons, an active class will be added.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled="disabled">NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled="disabled">YES
</label>
</div>
What am I doing wrong? Is it possible to disable the buttons?
For demo find below link of jsfiddle
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 1 (pre-checked)
</label>
<label class="btn btn-primary active disabled">
<input type="radio" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 3
</label>
</div>
Demo
The disabled attribute on the input will disable it, as in, you cannot change the value of the input while it's disabled. What you're seeing are the CSS stypes added by bootstrap that make it sorta look like something changed when you remove your mouse from the input.
You can prevent these styles with a little bit of jQuery:
$(".btn.disabled").mouseout(function(){
$(this).removeClass("active");
$(this).addClass("disabled");
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled>NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled>YES
</label>
</div>
I have 3 different sets of radio buttons on the same page. The problem I am experiencing with them is that when a button in another btn-group is pressed it will toggle the state of the buttons in the previous or next btn-group. They don't seem to be independent. Here's the code:
<div id="file1" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup2" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup2"onClick="$('#mandatory1').val('no');">No</button>
</div>
<div id="file2" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup" onClick="$('#mandatory2').val('no');">No</button>
</div>
When a button within div file1 is clicked it toggles the state of a button in div id file2
I've tried using button.js with this, but no luck.
I've tried various different variations of data-toggle="button"
Any ideas?
Demo
Your HTML structure for bootstrap radio buttons is wrong.
<div id="file1" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option1" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option1" /> No
</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option2" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option2" /> No
</label>
</div>
Aside:
You're using jQuery; Please don't use onClick in your HTML. You would set up those events like this (though there is a way that involves less code).
$(function(){
$('.btn').button(); // this is for the radio buttons.
// this replaces your inline JS
$('#file1 .btn-danger').on('click', function(){
$('#mandatory1').val('no');
});
$('#file2 .btn-danger').on('click', function(){
$('#mandatory2').val('no');
});
});
Demo
this should fix your problem:
<div id="file1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input type="radio" name="radioGroup2" value="yes">Yes</label>
<label class="btn btn-danger"><input type="radio" name="radioGroup2" onclick="$('#mandatory1').val('no');">No</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"><input type="radio" name="radioGroup" value="yes">Yes</label>
<label class="btn btn-danger active"><input type="radio" name="radioGroup" onclick="$('#mandatory2').val('no');">No</label>
</div>
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.