Can I center the content of div with center-block??
The following example does not work:
<div class="form-group">
<div class="center-block">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/2/
And this one works:
<div class="form-group">
<div>
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success center-block" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/3/
I want two buttons centered, that is why I want the div with the center-block.
The class center-block applies the center to the element itself, not to the content; in this case you can use the class text-center on the container and since the input has the class btn making it inline-block, that will work:
<div class="text-center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
DemoFiddle
Just use text-align:center on the div:
.center-block {
text-align:center;
}
jsFiddle example
(or use the selector .form-group > div instead of .center-block if you're not using that class for anything)
You can use simply put text-align:center
<div class="form-group">
<div style="text-align:center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
Related
<form class="container">
<div class="row">
<div class="col-md-5">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
</div>
<div class="col-md-5">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
<div class="col-md-5">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
I am trying to move the button to the right side of the grey box so that all text box and button is horizontal to each other.
Tried to do inline block on the div class col-md-5 but it shifts everything vertical.
Here is the css:
h2{
font-family: "Times New Roman", Times, serif;
font-style: normal;
}
ul{
list-style-type: none;
}
.col-md-5{
margin: auto;
}
*{ margin: 0; padding: 0; }
#template,
#render,
#values {
width: 100%;
min-height: 300px;
resize: vertical;
font-family: "Courier New", Courier, monospace;
border: 1px solid #ccc;
}
#render {
background: #eee;
}
You are using col-md-5 for the buttons' container div.
One row consists of 12 columns in the bootstrap
You have to change it to col-md-2 or reduce the size of textarea's container div
If col-md-2 does not work, make sure to reset your defualt css
* { margin: 0 padding: 0 }
In addition to the answer above, You need to close your textarea tag as well. It is not self closing.
<form class="container">
<div class="row">
<div class="col-md-6">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}> </textarea>
</div>
<div class="col-md-3">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
<div class="col-md-3">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
</form>
Bootstrap goes by a 12 column system. Your total adds up to 15 forcing the buttons to the next line. Try changing the last column to the following:
<div class="col-md-2">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
I found two issues with your code,
Second div with class col-md-5 was not closed properly.
The sum of column numbers according to bootstrap guidelines should be 12 in a row (if you are following 12 column grid system).
This is the updated code that I think should solve it.
<div class="row">
<div class="col-md-5">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
</div>
<div class="col-md-5">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ?
<div id="render"></div> :
<div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
</div>
<div class="col-md-2">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
The sum of col-md-5 is going up to 15. You need to make your button as col-md-2 as commented above or you can make all of them as col-md-4.
<form class="container">
<div class="row">
<div class="col-md-4">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
</div>
<div class="col-md-4">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
<div class="col-md-4">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
I want to get the value of Buttons I have created:
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
I use this JS to highlight the button if is pressed:
$(document).ready(function(){
$(".btn-outline-primary").click(function(){
$(this).button('toggle');
});
});
Underneath those buttons there is a submit button, which I use to search a database. So how can I get the values of the buttons to use them for search (eg. "MR" value)?
"value" is an attribute on the button elements, so you can access it with .attr():
$(document).ready(function() {
$(".btn-outline-primary").click(function() {
console.log($(this).attr("value"))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
You can try this:
$(".btn-outline-primary").click(function(){
console.log($(this).prop('value'));
});
To get the value of a tag , you could always use the value method.
How :
document.getElementsByClassName('btn-outline-primary")[0].value;
This will get the value of the first element with class btn-outline-primary
If you wish to get the values of all elements :
var arr = document.getElementsByClassName('btn-outline-primary');
var array = []
arr.map(_=>array.push(_.value))
In the case you are using JQuery you will need to add
.attr('value')
to get the value
You could find all buttons with active class and get their value
Something like:
var values = [];
$('.btn-outline-primary.active').each(function(key, value){
values.push($(this).val());
});
values array will have all your values of active buttons
To get a value of clicked button you can do this. Just use the value property of the button to get the value associated with the corresponding button.
const buttons = document.querySelectorAll('.btn-outline-primary');
[...buttons].forEach(item => {
item.addEventListener('click', event => {
console.log(item.value);
});
});
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
And if you want to store the value for later use then you can simply assign it to some variable.
const buttons = document.querySelectorAll('.btn-outline-primary');
let clickedValue;
[...buttons].forEach(item => {
item.addEventListener('click', event => {
clickedValue = item.value;
});
});
attached is my javascript and html.
in debug mode, I can confirm that 'display: none' changes to 'display :block'
but I don't see popupEventForm form open up.
Any ideas why?
Thanks,Peter
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show();
$('#eventTitle').focus();
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header">
<h3>Add new event</h3>
</div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<label>Event title</label>
<input type="text" id="eventTitle" placeholder="Title here"><br />
<label>Scheduled date</label>
<input type="text" id="eventDate"><br />
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration" placeholder="15"><br />
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>
</div>
You also have the bootstrap hide class included..
<div id="popupEventForm" class="modal hide" style="display: none;">
Change your js to this:
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show().removeClass('hide');
$('#eventTitle').focus();
}
You need to remove the "hide" class from the modal. As well as you can use .modal('show') to open the modal
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').removeClass('hide');
$('#popupEventForm').modal('show');
$('#eventTitle').focus();
}
Instead of using style "display:none" use $('#popupEventForm').hide();
and $('#popupEventForm').show();
Or you can use $('#popupEventForm').attr("display","block").
I have an HTML look like this
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
I want to hide the next button of last fieldset of every modal dialog appears. Anyone, please suggest me. I am new to jquery and haven't done this kind of thing before. I code to learn and sometimes I fall in problem.
Try this
simple way In CSS code
button {
visibility: hidden
}
to hide btn in last element use "last-child" selector
.modalDialog:last-child .btn.btn-next {
display: none;
}
see fiddle
Rahul css answer is correct but if you gonna use jquery here is the code
$(".modalDialog button:last-child").hide();
The :last-child selector matches every element that is the last child of its parent, so you can select the last form element and hide it using display:none.
You can read more about :last-child here.
Notes: you are using duplicate id (id="outerr") in your HTML, which could make you markup invalid and create some issues, please consider correcting this issue in your real app.
.modalDialog:last-child form {
display: none;
}
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
this should be.
fieldset:last-child .btn.btn-next {
display: none;
}
this is the code which solved my problem.
<div class="container">
<div class="row" style="padding-top: 240px;">
<a href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JSfiddle
I'm guessing that I would store the form contents within a javascript function...
How do I contain a form within a bootstrap popover?
I would put my form into the markup and not into some data tag.
This is how it could work:
JS Code:
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
HTML Markup:
the popover link
<div id="popover-head" class="hide">
some title
</div>
<div id="popover-content" class="hide">
<!-- MyForm -->
</div>
Demo
Alternative Approaches:
X-Editable
You might want to take a look at X-Editable.
A library that allows you to create editable elements on your page based on popovers.
Webcomponents
Mike Costello has released Bootstrap Web Components.
This nifty library has a Popovers Component that lets you embed the form as markup:
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
Demo
Either replace double quotes around type="text" within single quotes, Like:
"<form><input type='text'/></form>"
OR
Replace Double quotes wrapping data-content with single quote, Like:
data-content='<form><input type="text"/></form>'
<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>
just state data-html="true"
like this Working demo http://jsfiddle.net/7e2XU/21/show/#
* Update: http://jsfiddle.net/kz5kjmbt/
<div class="container">
<div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JavaScript code:
$('a[rel=popover]').popover({
html: 'true',
placement: 'right'
})
ScreenShot
You can load the form from a hidden div element with the Bootstrap-provided hidden class.
<button class="btn btn-default" id="form-popover">Form popover</button>
<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>
JavaScript:
$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});
Or try this one
Second one including second hidden div content to hold the form working and test on fiddle http://jsfiddle.net/7e2XU/21/
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</label>
</div>
</div>
</div>
Open form
<script>
$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})
</script>
A complete solution for anyone that might need it, I've used this with good results so far
JS:
$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");
var title = $(titleContainer).html();
var content = $(contentContainer).html();
$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});
HTML:
<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>
CSS:
.btn-popover-container {
display: inline-block;
}
.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}
I work in WordPress a lot so use PHP.
My method is to contain my HTML in a PHP Variable, and then echo the variable in data-content.
$my-data-content = '<form><input type="text"/></form>';
along with
data-content='<?php echo $my-data-content; ?>'