I am trying to display content in two columns in HTML5. But, somehow, I am doing something wrong. Here's my HTML code
.column1 {
float: left;
width: 70%;
}
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%"
ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
</div>
Here's the JSFiddle link - http://jsfiddle.net/chandham/k39vpafd/
I somehow nested column1 and column2 in same div. Here's the updated code.
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%" ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
Related
I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
I am trying to write an "or" in between 2 ".col-md-1".
For example:
Green or Blue
This is my code:
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
What should I write inside the code or should I try another technique?
You could add another col-md-1 between the 2 elements (or whatever column size suits your needs):
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<p>or</p>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
Depends on how the result should look like. You can do something like this for example:
<div class="col-md-3">
<button class="btn"> Green </button> or <button class="btn"> Blue </button>
</div>
Give them and ID.
<div class="row">
<div class="col-md-1" id="green">
<button class="btn">Green</button>
</div>
<div class="col-md-1" id="blue">
<button class="btn">Blue</button>
</div>
</div>
and then you can select the first one and append an element after it
$("$green").after('<div>OR</div>')
give them an ID & do the if else in Javaascript
<div class="row">
<div id="greenDiv" class="col-md-1">
<button class="btn">Green</button>
</div>
<div id= "redDiv" class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
in js
<script>
$(document).ready(function(){
if(someCondition == true){
$("#redDiv").show();
$("#greenDiv").hide();
}else{
$("#redDiv").hide();
$("#greenDiv").show();
}
});
</script>
I want to make this div containing .action-bar as required so that I can validate my form.
<form name="forms.subsections[0].formName">
<div class="item item-divider">
Photo
</div>
<div class="item item-stacked-label">
<span class="input-label">Store Photo</span>
<div class="container">
<img ng-src="">
</div>
<div class="action-bar" ng-click="takePhoto()" >
<i class='icon ion-ios-camera-outline'></i>
Take Picture
</div>
</div>
</form>
So I have a major style change whereas when all my views were originally setup I had used Bootstrap and relied on the container class to adjust for media queries at breakpoints of 1200px, 992px, and 768px. All my form input and other content work their padding and all off of the container for paddings, margins, etc... Now, it is requested that the width be 100%, but all the content to stay where it is so that the background colors styling fills the width of display.
I was trying to think of how I can add another container class to make this work over all of the views. What are some recommendations on this with keeping the constraints of content to the 1200px and so on (for media queries and such), but make the other areas spread to that 100%?
Here is an image capture of it now. It is just the tan and dark gray area with the topo image that would expand 100% while all else stays within constraints of container class.
And my code is structured as so you can see where my delima is with over-riding bootstraps container class:
<div class="container">
<form role="form">
<div class="naviaHead col-md-12">
<div class="naviaHeader">
<div class="inner">
<div class="col-md-6 loginArea">
<h1 class="col-md-8">Login</h1>
<div class="form-group">
<div class="form-group col-md-8 naviaInp">
<input type="text" name="userName" class="form-control" placeholder="username" data-ng-model="loginData.userName"autofocus>
</div>
<div class="form-group col-md-8 naviaInp">
<input type="password" name="passWord" class="form-control" placeholder="password" data-ng-model="loginData.password">
</div>
<div style="clear: both;">
<input type="button" class="naviaBtn naviaBlue" data-ng-click="login()" value="login">
<div data-ng-hide="message == ''" class="alert alert-danger">
{{message}}
</div>
</div>
<div class="loginForget">
<span><a class="naviaLink" href="#/logreg/forgotUser">forgot username</a> or <a class="naviaLink" href="#/logreg/forgotPass">forgot password</a></span>
</div>
<div class="sowLogin">
<img class="col-md-3" src="ppt/assets/images/login/sowIcon.svg">
<p class="col-md-9"><a class="naviaLink" href="https://pebb.flex-plan.com/part/PortalRegistration.aspx">PEBB eligible State of Washington employees please click here to access the portal</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<img style="padding-left: 25%;" src="ppt/assets/images/login/naviaLogo.png">
</div>
</div>
</div>
</div>
</form>
<div class="loginLearn">
<div id="area1" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage1-full.png">
<div class="learnText">
<h3 class="teaserTitle">Online Account Access</h3>
<p class="teaserText">24/7 Access to balances, claim submissions and all things Navia!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area2" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage2-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">Navia Benefits Card</h3>
<p class="teaserText">Don't wait for reimbursement!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area3" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage3-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">FlexConnect</h3>
<p class="teaserText">Link your FSA to your insurnace and file claims instantly!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
</div>
<div style="background-color: #ede8e2; height: 150px; clear: both;">
<!-- intentionally blank -->
</div>
</div>
This will solve your purpose
<div class="container-fluid" style="background-color:red;">//This will be 100% width
<div class="container">//Inside this put your content as it was to make it indent as previous
//Your page HTML here
</div>
</div>
In this bootply the welcome as well as the form is coming on the left hand side.But I want to bring it at the centre.Can any body please tell me how to do?
<form id="form1">
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="margin-bottom: 6px; margin-top: 0px; background: #efeee9">
<img src="ui_resources/img/ title.jpg" alt="" align="left">
<h2 align="center" style="margin-top: 18px;"></h2>
</div>
<div class="span1"></div>
</div>
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="background: #eee; border: 1px solid #ddd;">
<div class="span7 center login-header">
<h2 style="color:#E86537 " align="center">Welcome </h2>
</div><!--/span-->
<div class="row-fluid">
<div class="well span7 center login-box">
<div class="alert alert-info">
Please login with your Username and Password.
</div>
<fieldset>
<div class="input-prepend" title="Username" data-rel="tooltip" style="margin-left:80px;">
<span class="add-on"><i class="icon-user"></i></span><input autofocus="" class="input-large span10" name="j_username" id="username" type="text" value="">
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password" data-rel="tooltip" style="margin-left:80px;">
<span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="j_password" id="password" type="password" value="">
</div>
<div class="clearfix"></div>
<div class="input-prepend" style="margin-left:80px;">
<label class="remember" for="remember"><input type="checkbox" id="remember" style="display:">Remember me</label>
</div>
<div class="clearfix"></div>
<p class="center span6" style="margin-left:80px;">
<button type="submit" class="btn btn-primary">Login</button>
New Userregister
</p>
</fieldset>
</div><!--/span-->
</div><!--/row-->
</div><!--/row-->
</div>
<div class="span1"></div>
</div></form>
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="margin-top: 6px;">
<div class="span1"></div>
</div>
</div>
try to set your welcome div in another div like this
<div class="row-fluid">
<div class="offset3 span6 center login-header">
<h2 style="color:#E86537 " align="center">Welcome </h2>
</div>
</div>
use offset
Move columns to the right using .offset* classes. Each class increases
the left margin of a column by a whole column. For example, .offset4
moves .span4 over four columns.
DEMO
Try using this in your CSS
.row-fluid .login-header,
.row-fluid .login-box{
float:none;
margin:0 auto !important;
}
Since .span* has float: left style by default, you can override it by using float:none;
.login-box {
margin:0 auto;
float:none;
}
margin:0 auto; is used to center your loginbox horizontally.