<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>
Related
I'm struggling while trying to locate 2 buttons on the left of an input field.
I already tried several suggestions on the internet but I couldn't make it the way I want.
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search"
style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"><i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"></i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;"></i></label>
</div>
</div>
</div>
</div>
</div>
This is how it looks like :
Keep in mind, that label is an inline element similar to span, so you need to set its css to display: inline-block to behave like a div
once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.
here is my favorite flex-cheat-sheet
I have simplified your example and you can see how this works clicking below on Run code snippet.
.pull-right {
display: flex;
flex-wrap: nowrap;
}
.pull-right input{ border: 1px solid green;}
.pull-right label{ border: 1px solid red; display: inline-block;}
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text"
class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)"
ng-model="Search"
style="text-indent: 5px;" minlength="1"
ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search"
ng-click="localSearch = ''; vm.filterTable(localSearch)">
<i style="vertical-align: middle; top:4px; right:35px; position: absolute"
class="glyphicon glyphicon-remove"> </i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label>
</div>
</div>
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.
I'm trying to dynamically change the HTML in a node label in Dagre D3:
$('.unselected-node').find('.inputTemplate').css( "display", "inline-block" );
However, this doesn't work. The only way I'm able to change .unselected-node is by accessing the HTML directly:
g.node('id').label += "<div>" + inputTemplate + "</div>";
This means I have to manually code and store HTML as a string somewhere in a javascript file, which is very unideal. Is there anyway to dynamically change the label?
This is the HTML in question, though the problem is more generic than simply this example, since it happens whenever I try to use jQuery to change dagre d3 html:
<div>
<div class="<%= templateData.class %>" data-params=<%= templateData.jsonData %>>
<span class ="control glyphicon glyphicon-pawn test" style="color:<%= templateData.responseTypeColor %>"></span>
<span class="pull-right"><i><%= templateData.response._id %></i></span>
<span> <%= templateData.response.created_by %></span>
<h3 class="templateData.response.responseTitle"><%= templateData.response.title %></h3>
<p class="templateData.response.responseText"><%= templateData.response.text %></p>
<button type="button" class="btn btn-link btn-sm reply-button">Reply</button>
</div>
<div class="inputTemplate" style="display:none">
<hr style="border: none; height:1px; background-color: black ">
<form id="responseForm">
<div id="newResponseTitleDiv" class="form-group row">
<div id="suggestedTitles">
Response title:
<input class="typeahead form-control" style="width: 50%; display:inline-block;" type="text" data-toggle="popover" data-trigger="focus" data-content="Describe a specific position that you will defend." id="newResponseTitle" name="responseTitle">
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#responseModal">Browse</button>
</div>
</div>
<div class="form-group row">
<textarea rows="10" style="width:90%; border:solid .33px gray; resize: none;"></textarea>
</div>
<div class="form-group row">
<button type="button" id="test" class="btn btn-sm submit-reply-button">Submit</button>
</div>
</form>
</div>
</div>
I also tried doing d3.select(...) on inputTemplate and using
attr.('visibility', 'hidden')
but it doesn't seem to work either.
I am working on a hexadecimal to decimal color code converter. I wish to change the positions of the form elements on the click of a button.
i.e when i click hexa to deci button the form that takes hexadecimal code must appear on the left and when i deci to hexa button the form that takes decimal code must appear first.
my work at codepen
HTML CODE :
<!DOCTYPE html>
<head>
<title>my color converter</title>
</head>
<body>
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form>
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1"><p>COLOR IN DECIMAL CODE</p></label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form>
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3"><p>COLOR IN HEXADECIMAL CODE</p></label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>
</body>
CSS CODE :
.form-group {
margin-top: 60px;
width:80%;
margin-left:8.33333333%;
text-align: center;
}
h3 {
text-align:center;
margin-top:40px;
}
.align {
margin-top:40px;
}
JavaScript :
$(document).ready(function(){
$(".button1").on('click',function(){
var form1 = $('.colorcode1').detach();
form1.appendTo('form');
});
});
Note: I am learning Jquery and i have included the CDN.
I added this to your style:
.column1 {
float: right;
}
and then changed the js like this:
$(document).ready(function() {
$(".button1").on('click', function() {
$('.colorcode1').parents('div:first').toggleClass('column1');
$('.colorcode2').parents('div:first').toggleClass('column1');
});
});
I would call the class something else than column1, though.
see working code here. your javascript will be as follows:
codepan
$(document).ready(function() {
$(".button1").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#hax');
jQuery(form2)
.detach()
.appendTo('#dec');
});
$(".button2").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#dec');
jQuery(form2)
.detach()
.appendTo('#hax');
});
});
HTML :
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form id="dec">
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1">
<p>COLOR IN DECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form id="hax">
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3">
<p>COLOR IN HEXADECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>
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>