I am using ChartJS to place a responsive chart within a div. I am also using bootstrap, so the div class is grid focused (ex. md-9). The chart keeps expanding beyond the div. I was considering overflow: hidden on the div but don't want to lose any data from being shown. Here is a link to my development site. Any assistance is appreciated:
http://investingcalculator.azurewebsites.net
My current HTML code:
<div class="budgetcalcsection">
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="inputtext">
Current Balance
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" id="currentbalance" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Interest Rate
<div class="input-group">
<span class="input-group-addon">%</span>
<input type="number" id="interestrate" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Monthly Contributions
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" id="monthlycontribution" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Years Contributing
<div class="input-group">
<span class="input-group-addon">+</span>
<input type="number" id="yearscontributing" class="form-control" placeholder="0">
</div>
</div>
<div class="">
<input class="btn btn-default" type="submit" id="calculate" value="Calculate">
</div>
<div class="">
<input class="btn btn-default" type="submit" id="reset" value="Reset">
</div>
<div class="inputtext">
Ending Balance
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="endingbalance" class="form-control" placeholder="0" readonly>
</div>
</div>
</div>
<!-- Investing Chart -->
<div class="col-sm-9 col-md-10">
<canvas id="canvas"></canvas>
</div>
</div>
</div>
The problem stems from the fact that ChartJS doesn't take into account that the display-box on your elements is border-box. It is sizing the chart to the full width of the div without taking into account the padding.
In order to fix it, just put a div without any bootstrap column classes inside your column and target that with ChartJS.
Related
<div class="row">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
After this code i got scroll bar in my browser so i inspect and found that if i make change
.row { margin-right: 0;}
it is just fine. It is nothing to do with my css i removed my css and tried. so should i change the value of .row all the time which is provided by bootstrap? default value is
.row{margin-right: -15px;}
EDIT: Code is formatted like code now
As mentioned in Bootstrap docs, container should be a top level wrapping class, which should contain class row. You've swapped these classes. I think this is the reason of issue.
First rule of bootstrap introduction says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Code should look:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
I've been using Bootstrap for a while. I wouldn't say I'm an expert but I'm proficient. Nevertheless, this form-inline issue got me head over heels:
It's a very simple thing what I'm trying, yet here I am, unable to put two elements in line:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<form class="form-inline">
<div class="form-group">
<label for="modal_add_group_input"></label>
<input class="form-control" id="modal_add_group_input" placeholder="Nombre de grupo" type="text">
</div>
<button type="submit" class="btn btn-success">
<span style="color: white;" class="glyphicon glyphicon-plus-sign">
</span> Crear Grupo</button>
</form>
</div>
</div>
</div>
Not trying anything fancy here. I went back to basics and even the provided example doesn't work:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
...any suggestions? What am I doing wrong? Ç_Ç
PS: Not a duplicate of Bootstrap inline form's submit button not in the same line . Tried that. Didn't work.
The issue you see in the snippet is because of the breakpoint (form-group component goes 100% width). Do you need it to be in the same line for mobile devices?
well, here you have the 3 solutions
Inline for big screens
Inline for all screen sizes
Inline for all screen sizes NO GRID (updated answer)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> **Inline for big screens devices**
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
<hr> **Inline for all screen sizes**
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary">Transfer cash</button>
</div>
</div>
</form>
<hr>
<div class="container">
**Inline for all screen sizes NO GRID**
<div class="row">
<div class="col-xs-6">
<form>
<div class="pull-right">
<button type="submit" class="btn btn-primary">Transfer cash</button>
</div>
<div class="">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
</form>
</div>
</div>
</div>
Hi I am trying to center 2 input boxes in a row by adapting an example I saw here that was used for 1. I am trying to use span to get the 2 boxes together but they remain on top of each other and anchored left. Can someone help?
<div class="row">
<div class="center-block col-md-12" style="float: left; display: inline">
<button type="button" class="btn btn-primary register">
<span>
<div class="input-group">
<input type="Email" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="Password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
</div>
</span>
</button>
</div>
This is what I think you are trying to do:
<div class=".container-fluid">
<div class="row panel panel-default panel-heading">
<div class="col-md-offset-3 col-md-4">
<div class="input-group">
<input type="Email" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="Password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
Here is the JSFiddle demo
Note that you are setting two textboxes within a button, which is wrong
Also, the size of your screen matters as the controls would stack on top of each other in case the screen size decreases.
I am trying to align two inputs side by side using bootstrap. Testing of regular divs as follows works great:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
But this always pushes to the second input below the first.
<div class="row">
<div class="col-md-2 input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
<div class="col-md-2 col-md-offset-2 input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
Any clues?
As in given HTML there is no <form> element.
here is the
Demo using .controls-row and .control-group
<div class="container">
<div class="controls-row row">
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</div>
You should use the "form-inline" Bootstrap class to achieve this:
<form class="form-inline">
<div class="form-group">
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<div class="input-group" style="width: 250px;">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
Take a look at it HERE
I think you've asked a sort of loaded question, but I'll do my best to help.
After following the BS3.x docs online, I noticed you didn't wrap your form elements in a form-x class. That usually helps with their custom CSS for form elements. Following BS convention, you're missing an outer wrapper form-group. Lastly, because your beginning label(s) are different lengths (ie Mortgage Payment), wrapping them in a grid container .col-md-2 might not render the way you intend. Regardless, changing the column class is easy to do, so that is for you to decide. Remember that BS has media queries, so how it shows for you might be different depending on device and viewport width.
All that said, I've got this fiddle that should help you.
HTML
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
</form>
</div>
http://jsfiddle.net/5webN/
I'm trying to have on the same line: text, search box and the button "Locate", but the following code seems not working because what I get is: the text "Map for network..." aligned with the input box while the "Locate" button is below the input box. Any suggestion?
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<div class="input-group">
<label class="control-label col-lg-8">Map for Network<p class="badge"><?php echo $net_name ?></p></label>
<div class="form-horizontal col-lg-4">
<input id="marker_id" name="address" class="form-control input-sm" type="text" placeholder="node name..">
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm">Locate</button>
</span>
</div>
</div>
</div>
</div>
JSFiddle "Answer"
To cut to the chase - you can look at the result of my tests on JSFiddle: http://jsfiddle.net/eThej/. NOTE - Bootstrap is responsive so you need to make the window with the preview large enough or the controls will wrap to the next line. This is intentional to allow for forms to work on smaller screens (responsive design).
Explanation / Notes
I believe the following example (pulled from the bootstrap site) does something like what you are looking for:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
I took your code and applied a few changes to it and got a similar result. First - you are looking for a form with a class of "form-inline". Second, if you are using a column layout I think you probably want "md" columns and not "lg" columns. Finally I think you div's aren't nested correctly. It isn't pretty but I applied these few changes and got much closer to what I think you want. The following is that result:
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229" class="panel-heading">
<form class="form-inline">
<div class="col-md-4">
<label class="control-label">Map for Network</label>
<p class="badge">Test</p>
</div>
<div class="col-md-8">
<div class="form-group"><input id="marker_id" name="address" class="form-control input-sm"
type="text" placeholder="node name.." />
</div>
<button type="submit" class="btn btn-default">Locate</button>
</div>
</form>
</div>
</div>
Again, not a perfect answer but I think it should get you on the right track. Best of luck!
This code seems to be more suitable for what I had in mind.
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<label class="control-label col-lg-8">Map for Network Test</label>
<div class="input-group input-group-sm">
<input id="" type="text" class="form-control" placeholder="Node Name">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Locate</button>
</span>
</div><!-- /input-group -->
</div>
</div>