I have a theme which have this section below , I want to align the text on the right side of a radio button, right now it below the radio button
Here is what I want:
Here is jsfiddle: http://jsfiddle.net/Mwanitete/Jm2JR/181/
<div class="delivery_options">
<div class="delivery_option item" style="margin: 0px;padding: 0px;">
<div>
<label class="delivery-option-label" for="delivery_option_13687_0">
<div class="resume div div-bordered">
<div>
<div class="delivery_option_radio">
<input id="delivery_option_13687_0" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="233," data-id_address="13687" value="233,">
</div>
<div class="delivery_option_logo">
</div>
<div>
Kurier DHL (2-5dni roboczych)
<span class="delivery_option_price">
12,00 zł
</span>
<br>
<span class="best_grade best_grade_speed">The fastest</span>
</div>
</div>
</div>
</label>
</div>
</div>
<!-- end delivery_option -->
<div class="delivery_option alternate_item" style="margin: 0px; padding: 0px; float: none;">
<div>
<label class="delivery-option-label" for="delivery_option_13687_1">
<div class="resume div div-bordered">
<div>
<div class="delivery_option_radio">
<input id="delivery_option_13687_1" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="234," data-id_address="13687" value="234,">
</div>
<div class="delivery_option_logo">
</div>
<div>
Kurier DHL - pobranie (2-5 dni roboczych)
<span class="delivery_option_price">
12,00 zł
</span>
<br>
</div>
</div>
</div>
</label>
</div>
</div>
<!-- end delivery_option -->
<div class="delivery_option item" style="margin: 0px; padding: 0px; float: none;">
<div>
<label class="delivery-option-label" for="delivery_option_13687_2">
<div class="resume div div-bordered">
<div>
<div class="delivery_option_radio">
<input id="delivery_option_13687_2" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="235," data-id_address="13687" value="235,">
</div>
<div class="delivery_option_logo">
</div>
<div>
Odbiór osobisty - Showroom - Mokotowska 40/3, Warszawa (2-3 dni roboczych)
<span class="delivery_option_price">
Free
</span>
<br>
<span class="best_grade best_grade_price">The best price</span>
</div>
</div>
</div>
</label>
</div>
</div>
<!-- end delivery_option -->
<div class="delivery_option alternate_item" style="margin: 0px; padding: 0px; float: none;">
<div>
<label class="delivery-option-label" for="delivery_option_13687_3">
<div class="resume div div-bordered">
<div>
<div class="delivery_option_radio">
<input id="delivery_option_13687_3" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="231," data-id_address="13687" value="231," checked="checked">
</div>
<div class="delivery_option_logo">
</div>
<div>
Odbiór osobisty - Sklep - Stary Browar, Poznań (2-5 dni roboczych)
<span class="delivery_option_price">
Free
</span>
<br>
</div>
</div>
</div>
</label>
</div>
</div>
<!-- end delivery_option -->
</div>
I tried using float but didnt work, any idea or help, suggestion will be apreciated, please help
add this line to your css
.resume > div {
display: flex;
}
Related
Problem: Divs not aligned:
The problem is when the text wraps, for example Money back guarantee, pushes the div out of alignment with 30 days.
I am trying to use the grid approach to first define two columns.
My code:
.inline-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
<div class="inline-features">
<div class="feature">
<div class="price col-1-item">
<span>
Price
</span>
</div>
<div class="money-back col-1-item">
<span>
Money back guarantee
</span>
</div>
<div class="number-of-lessons col-1-item">
<span>
Number of lessons
</span>
</div>
<div class="number-of-users col-1-item">
<span>
Number of users
</span>
</div>
<div class="country col-1-item">
<span>
Based in country
</span>
</div>
<div class="support col-1-item">
<span>
Support
</span>
</div>
<div class="video-lessons col-1-item">
<span>
Video lessons
</span>
</div>
<div class="downloadable-files col-1-item">
<span>Downloadable files</span>
</div>
</div>
<div class="feature-item">
<div class="price-item col-2-item">
<span> From xx to xx </span>
</div>
<div class="money-back-item col-2-item">
<span> 30 days </span>
</div>
<div class="number-of-lessons-item col-2-item">
<span> 300+ </span>
</div>
<div class="number-of-users-item col-2-item">
<span> 35k + </span>
</div>
<div class="country-item col-2-item">
<span> UK</span>
</div>
<div class="support-item col-2-item">
<span> 24/7 live chat support </span>
</div>
<div class="video-lessons-item col-2-item">
<span> Yes </span>
</div>
<div class="downloadable-files-item col-2-item">
<span> Yes </span>
</div>
</div>
</div>
Your HTML structure is not correct. Try this way.
To do this type of design, you can use table. This will be better way for manage.
.inline-features{
width: 250px;
}
.row {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.col-1-item,
.col-2-item {
border: 1px solid black;
}
<div class="inline-features">
<div class="row">
<div class="col-1-item">
<span> Price </span>
</div>
<div class="col-2-item">
<span> From xx to xx </span>
</div>
</div>
<div class="row">
<div class="col-1-item">
<span> Money back guarantee </span>
</div>
<div class="col-2-item">
<span> 30 days </span>
</div>
</div>
<div class="row">
<div class="col-1-item">
<span> Number of lessons </span>
</div>
<div class="col-2-item">
<span> 300+ </span>
</div>
</div>
</div>
.inline-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
font-size: 4rem;
border: 1px solid gray;
}
.col-1-item,
.col-2-item {
padding: 1rem;
height:140px;
border: 1px solid gray;
}
<div class="inline-features">
<div class="feature">
<div class="price col-1-item">
<span>Price</span>
</div>
<div class="money-back col-1-item">
<span>Money back guarantee</span>
</div>
<div class="number-of-lessons col-1-item">
<span>Number of lessons</span>
</div>
<div class="number-of-users col-1-item">
<span>Number of users</span>
</div>
<div class="country col-1-item">
<span>Based in country</span>
</div>
<div class="support col-1-item">
<span>Support</span>
</div>
<div class="video-lessons col-1-item">
<span>Video lessons</span>
</div>
<div class="downloadable-files col-1-item">
<span>Downloadable files</span>
</div>
</div>
<div class="feature-item">
<div class="price-item col-2-item">
<span>From xx to xx</span>
</div>
<div class="money-back-item col-2-item">
<span>30 days</span>
</div>
<div class="number-of-lessons-item col-2-item">
<span>300+</span>
</div>
<div class="number-of-users-item col-2-item">
<span>35k +</span>
</div>
<div class="country-item col-2-item">
<span>UK</span>
</div>
<div class="support-item col-2-item">
<span>24/7 live chat support </span>
</div>
<div class="video-lessons-item col-2-item">
<span>Yes</span>
</div>
<div class="downloadable-files-item col-2-item">
<span>Yes</span>
</div>
</div>
</div>
I suggest use instead of div and use CSS for border or other style
<table>
<tr>
<td>PRICE</td>
<td>From XX to XX</td>
</tr>
</table>
I am trying to align the controls in my angular 8 application. Basically I need to align the Amount column like shown in the screenshot below. Could somebody tell me how to achieve that. Currently using col-sm-5 for Amount column. If I do col-sm-6 it would push the edit button further out which i don't want.I need to get the textbox upto the red line shown in screenshot 1
screenshot 1
Screenshot 2
<form [formGroup]="settlementForm" (ngSubmit)="addAccount()" class="form-horizontal argentex-form" novalidate>
<div class="modal-body">
<div *ngIf="messageViewerModel.messages.length > 0" class="viewer">
<app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>
</div>
<!-- Remaining balanace input -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Remaining Balance</label>
<div class="col-sm-6">
<currency class="form-control" [stringModel]="remainingBalance()" [isDisabled]="true"></currency>
</div>
</div>
<!-- Dropdown Accounts -->
<div class="form-group">
<label class="col-sm-4 control-label">Account</label>
<div class="col-sm-6">
<div class="selectdiv">
<select class="form-control" id="selectedAccount" #selectedAccountID
name="selectedAccountFormControl" formControlName="selectedAccountFormControl">
<option *ngFor="let account of accounts; let ind=index;" value="{{ ind }}"
ngDefaultControl>
{{ account.accountName }}
</option>
</select>
</div>
</div>
</div>
<!-- Amount in the traded currency -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5">
<currency class="form-control" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount"
[required]="true" [readonly]="settlement.isPayTotal"></currency>
</div>
<div class="col-sm-1" style="padding-top: 5px">
<!-- settlement?.isPayTotal -->
<div *ngIf="editMode">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt=""/>
</a>
</div>
<div *ngIf="!editMode">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt=""/>
</a>
</div>
</div>
</div>
<!-- Value Date -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Value Date</label>
<div class="col-md-6">
<input type="text"
name="valueDate"
formControlName="valueDate"
class="form-control"
[(ngModel)]="settlement.valueDate"
bootstrapDatepicker />
</div>
</div>
<!-- Reference -->
<div class="form-group">
<label class="col-sm-4 control-label">Reference</label>
<div class="col-sm-6">
<input type="text" formControlName="reference" name="reference" class="form-control"
[(ngModel)]="settlement.reference" />
</div>
</div>
</div>
<div class="modal-footer">
<hr>
<button type="submit" class="btn" [disabled]="settlementForm.disabled || !settlementForm.valid || selectedAccountID.value <= 0 || !settlement.amount" >Save</button>
<button type="button" class="btn btn-close" (click)="closeModal()">Cancel</button>
</div>
</form>
Proposed solution
Its near but not still what I want
screenshot
Used the folowing css
.custom-css-input {
width: 100%;
/* float: left; */
}
.icon-button {
width: 40px;
float: left;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
Following html
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5" >
<currency class="form-control custom-css-input" [(numModel)]="settlement.amount" [(stringModel)]="settlement.amount"
[isDisabled]=!editMode [required]="true" ></currency>
</div>
<div style="padding-top: 5px">
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
</div>
<p class="clear"></p>
</div>
sry for not posting bootstrap solution, but if you are in hurry, simple css can work for you. I have added three custom css classes (custom-css-input,icon-button,clear), .clear is only there if floats disturb the rest of your form, but that's just in case. You can play width calc width and fixed width in order to achive your desired look. (Wrap whole input+button component in one single column and play inside with widths)
.custom-css-input {
width: calc(100% - 50px);
float: left;
}
.icon-button {
width: 40px;
float: right;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
<div class="col-sm-6">
<currency class="form-control custom-css-input" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount" [required]="true" [readonly]="settlement.isPayTotal"></currency>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
<p class="clear" />
</div>
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>
JavaScript not accepted this time.
So, I have this CSS code. This code should change to width if radio button is checked. Nothing happens. How could I modify the code?
input[type="radio"]#someID-1:checked #extra { width: 4000px; }
I also have this HTML code:
<div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<div style="DISPLAY:INLINE-BLOCK">
<input id="someID-1" name="nappi" type="radio">
<div class="listaus-sisalto" style="float:left;width:0">
<div id="navi3">
<div style="z-index:100;position:fixed;right:0;top:300px">
<span><label for="someID-1">1</label></span>
</div>
</div>
</div>
<div class="kierros" style="display: inline-block;width:350px">
R1
</div>
</div>
<div style="DISPLAY:INLINE-BLOCK">
<input id="someID-5" name="nappi" type="radio">
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi5"></div>
</div>
<div class="kierros" id="extra" style="display: inline-block;width:70px">
extra
</div>
</div>
<input id="someID-100" name="nappi" type="radio">
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi100"></div>
</div>
<div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red">
<br>
</div>
<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red">
<br>
</div>
</div>
</div>
There is no child #extra of that input. Just remove that from the selector.
input[type="radio"]#someID-1:checked {
width: 4000px;
}
<div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<!--
-->
<DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-1" />
<div class="listaus-sisalto" style="float:left;width:0">
<div id="navi3">
<div style="z-index:100;position:fixed;right:0;top:300px"><span><label for="someID-1">1</label></span></div>
</div>
</div>
<div class="kierros" style="display: inline-block;vertical-align:top;width:350px">R1
</div>
</DIV>
<!--
-->
<DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-5" />
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi5">
</div>
</div>
<div class="kierros" style="display: inline-block;vertical-align:top;width:70px" id="extra">extra
</div>
</DIV>
<!--
--><input name="nappi" type="radio" id="someID-100" />
<div class="listaus-sisalto" style="float:right;width:0">
<div id="navi100">
</div>
</div>
<!--
-->
<div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
</div>
<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
</div>
</div>
</div>
The selector input[type="radio"]#someID-1:checked #extra selects an element with the id extra that is a child element of your radio button. Since radio buttons rarely have children, you'll need to change the selector to match your HTML structure.
I suggest placing the radio button inside the same parent element as #extra. That way you can use the selector input[type="radio"]#someID-1:checked ~ #extra which will target the #extra element if it is preceded by the radio button in selected state.
A simplified version of what you'd like to become.
#radiodiv {
background: red;
}
#radio:checked + #radiodiv {
width: 400px;
}
<input id="radio" type="radio" />
<div id="radiodiv">
<p>This is the div</p>
</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.