I have div as a container and inside an input and other div with other elements.What i want is to center the input which is above the div where error messages should be displayed.
Right now they are starting as expected at the same point from left.
.con {
display:flex;
justify-content: space-between;
}
<div class="con">
<!-- <span class="match-result__score">{{ match.home_team_final_points }} : {{ match.away_team_final_points }}</span> -->
<div>
<input placeholder="Home team score" class="home-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points"
name="homeTeamPrediction" id="home-team" #homeTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div class="pr"
*ngIf="homeTeamPredictionVal.invalid && (homeTeamPredictionVal.dirty || homeTeamPredictionVal.touched)"
class="alert alert-danger absolute-home-team">
<div *ngIf="homeTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="homeTeamPredictionVal.errors.pattern">The score prediction should be between 0-1000.</div>
</div>
</div>
<div>
<input placeholder="Away team score" class="away-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points"
name="awayTeamPrediction" id="away-team" #awayTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div
*ngIf="awayTeamPredictionVal.invalid && (awayTeamPredictionVal.dirty || awayTeamPredictionVal.touched)"
class="alert alert-danger absolute-away-team">
<div *ngIf="awayTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="awayTeamPredictionVal.errors.pattern">The score prediction should be from 0 until 1000.
</div>
</div>
</div>
</div>
you can simply add : text-align: center; , and if you want to make your input take all the space : add width: 100%, here is the fix of your problem: https://stackblitz.com/edit/angular-ct3fzx
CSS :
.input-container{
text-align: center; // to center the input in the div
}
.home-team-input{
width: 100%; // to make the input's width 100%
margin-top:5px; //to add some space
}
.away-team-input{
width: 100% // to make the input's width 100%
margin-top:5px; //to add some space
}
HTML :
<div class="con">
<!-- <span class="match-result__score">{{ match.home_team_final_points }} : {{ match.away_team_final_points }}</span> -->
<div class="input-container">
<input placeholder="Home team score" class="home-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points"
name="homeTeamPrediction" id="home-team" #homeTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div class="pr"
*ngIf="homeTeamPredictionVal.invalid && (homeTeamPredictionVal.dirty || homeTeamPredictionVal.touched)"
class="alert alert-danger absolute-home-team">
<div *ngIf="homeTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="homeTeamPredictionVal.errors.pattern">The score prediction should be between 0-1000.</div>
</div>
</div >
<div class="input-container">
<input placeholder="Away team score" class="away-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points"
name="awayTeamPrediction" id="away-team" #awayTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div
*ngIf="awayTeamPredictionVal.invalid && (awayTeamPredictionVal.dirty || awayTeamPredictionVal.touched)"
class="alert alert-danger absolute-away-team">
<div *ngIf="awayTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="awayTeamPredictionVal.errors.pattern">The score prediction should be from 0 until 1000.
</div>
</div>
</div>
</div>
Related
// here is input field with the label, "WLC Name" I want to align in the same row.
<div class="form-group row">
<label class="col-md-2 col-form-label text-right">WLC Name</label>
<div class="col-lg-2 col-sm-11">
<input type="text"value="BSNL-WLCXXX" class="form-control" formControlName="wlc_name" id="wlc_name" #wlcname>
// I want to put below div in the same row, but it is not coming.
<div>
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
</div>
// html code for the tag : app-right-tooltip
<div>
<span class="glyphicon glyphicon-question-sign blue" style="font-size: 15px " aria-hidden="true" [popover]="getData()"
popoverPlacement="right"
[popoverOnHover]="false"
[popoverCloseOnMouseOutside]="false">
</span>
</div>
snapshot
You need to float app-right-tooltip
<app-right-tooltip style="float:right"></app-right-tooltip>
Otherwise, you need to have some structure to wrap this component
<div class="row">
<div class="md-2">...</div>
<div class="md-10"><app-right-tooltip /></div>
</div>
Try this
css
.exampleClass {
dispaly: inline-block;
}
Html
<div class="exampleClass">
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
This question already has answers here:
Div side by side without float
(6 answers)
Closed 6 years ago.
This code is layed out in 1 column. I want to get a tabular 2 column layout.
<span id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
How can I achieve this without using float?
fiddle
You can use the flexbox for that:
.container {
display: flex;
}
<div class="container">
<div id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</div>
<div id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</div>
</div>
Note that I changed your span to div elements (since span are inline and should not contain block elements).
I also wrapped the entire block with div.container so I'll be able to set that container as the flexbox.
Assuming you want the columns to be able to be shown/hidden, you could do this:
<head>
<script>
$('.next').click(function() {
var next = $('.col').next();
var curr = $('.col');
next.addClass('col-active');
curr.removeClass('col-active');
});
</script>
<style>
.col {
display: none;
}
.col-active {
display: block !important;
}
</style>
</head>
<body>
<span id="col1" class="col col-active">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2" class="col">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<a class="next">Next Page</a>
</body>
This essentially shows and hides the columns based on the <a> being clicked. I use this quite a lot when having sliders/tabulated pages.
Hope this helps :)
When I attempt to apply a maximum width to an input field, it positions the secondary button as if the input field didn't have a maximum width.
JSFiddle Example
HTML:
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
</div>
CSS:
.datefield {
max-width: 100px;
}
Result:
How can I get the secondary button to correctly sit next to the text field?
Try using display:inline-block;
https://jsfiddle.net/ex3ntia/DTcHh/22030/
.input-group-btn {display:inline-block;}
Bootstrap is laid out by using a grid system. You will need to adjust your design layout to accomplish what you are looking to achieve.
What is happening now is all you are doing is shrinking down the size of the input box, but not the actual grid cell.
try adjusting just the cell or placing the form-group elements within a cell then within a targeting element you can shrink.
Try this,
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding: 10px;
}
.shrink {
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="form-group">
<div class="shrink">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div><!-- .input-group -->
</div><!-- .shrink -->
</div><!-- .form-group -->
</div><!-- .row -->
</div> <!-- .container -->
Hope that helps!
The span was not being displayed inline. I assume this was changed with the input-group-btn class. Here is the new code (I named the new class ):
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.datefield {
max-width: 100px;
}
.buttoncleardiv {
display: inline;
}
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn buttoncleardiv">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
The JS Fiddle is here
I was wondering if I could display divs according to the radio button selected without using Jquery, just pure css. Problem is I'm not sure if I can overcome the scope defined for it. Here's a mock up of what I've written for it.
<div class="tester">
<input type="radio" name="chk" class="chkbox chkbox1" id="chk1" checked/>
<label for="chk1">Paypal</label>
<input type="radio" name="chk" class="chkbox chkbox2" id="chk2" />
<label for="chk2">Braintree</label>
<input type="radio" name="chk" class="chkbox chkbox3" id="chk3" />
<label for="chk3">Du</label>
</div>
<div class="test">
<div id="chkbox1" class="box">Paypal</div>
<div id="chkbox2" class="box">Braintree</div>
<div id="chkbox3" class="box">Du</div>
</div>
</div>
<div class="test">
<div id="chkbox1" class="box"> Paypal </div>
<div id="chkbox2" class="box"> Braintree </div>
<div id="chkbox3" class="box"> Du </div>
</div>
</div>
CSS
.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none /* By Default the box is hidden */
}
.chkbox1:checked ~ .test > #chkbox1,
.chkbox2:checked ~ .test > #chkbox2,
.chkbox3:checked ~ .test > #chkbox3 {
display: block
}
Any ideas?
JSfiddle for it here.
I have spent more time than I ever care to admit trying to fix this stupid bug. I have a form that displays to the left of some content. It looks okay on a wide and narrow screen, but on a tablet width (it overlays between 770 and 950 or so) the content to the right overlaps the form fields.
Am I missing something in my markup to use Twitter Bootstrap properly or do I need to add some custom styles using breakpoints to fix it? It appears that the fixed pixel width is causing the issue defined in bootstrap.css. Shouldn't these width properties use % since I'm using a fluid responsive layout?
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<div class="promo-btm">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
<li>Bullet Two</li>
</ul>
</div>
</div>
</div>
</div>
</div>
See the attached screenshot for the bug or you can reproduce it yourself using my fiddle.
If someone could help point out a way to fix this I would be extremely appreciative!
Just add a width to your input elements so they can adapt responsively with all of your screen sizes. You can use something like .span12 as a width on your input elements and that should fix the issue:
HTML
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://jsfiddle.net/yR7Ap/18/
The other posts have pinpointed the root cause of the problem, that your form is too wide for the span5 div with the default bootstrap css
It's not too difficult to make it fit though. See if this helps : http://jsfiddle.net/panchroma/FXXaZ/
I have tightened up your form with this CSS:
/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}
/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}
/* shorten input box */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}
Good luck!
Your form is too wide for the .span5 column. Try adding this above:
<div class="row-fluid">
<div class="span5">hello</div>
<div class="span7">world</div>
</div>
and add the following style:
.row-fluid > div { outline: 5px solid green; }
and you'll see what I mean.