I'm using bootstrap latest version 4.1.0. Bootstrap offset class isn't working properly in any screen size as expected. "Strange". Nothing changed. Please help me to get out of it. Here it is....
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="cus_c">Content area</div>
</div>
<div class="col-md-3">
<div class="cus_c">Content area</div>
</div>
</div>
</div>
According to bootstrap 4, there is a change. Change col-md-offset-3 to offset-md-3.
if your trying to center the columns you can use justify-content-center class on the containing row
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3">
<div class="cus_c">Content area</div>
</div>
<div class="col-md-3">
<div class="cus_c">Content area</div>
</div>
</div>
</div>
codepen
Bootstrap latest version: 4.1.0 there is a simple update.
Use this class offset-md-* instead of md-offset-*
Thank you.
Related
I am iterating ngFor in angular 6. When i am clicking on button a div should open beside row of that particular button but it is opening below ngFor like this
I want to make it open for that partcular row and below that.
<app-filter></app-filter>
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="openLayout=!openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
Now it is coming like this
Desired behavior will be like this It's like accordian on click it should open below that row and rest of below rows will be shifted downwards
The problem resides into openLayout variable that is shared for all your rows.
You need one openLayout for each row. you can add it dinamically to your data like this:
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="data.openLayout=!data.openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
At the beginning it will be false because undefined is like false.
I'm a beginner in Ionic 3.
I have a 4 text in same color, I'm trying to make when I click on the 4 text at for time I want to change color.
Example
I click on 1st text, then I want to change it black color
I click on text 2, then I want to change black color and 1st text is set a default color,
Please help me to fix this issue
<div class="row">
<div class="col right-border">
<div text-center>
<h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
</div>
</div>
<div class="col bottom-border">
<div text-center>
<h2 class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
</div>
</div>
</div>
<div class="row">
<div class="col top-border">
<div text-center>
<h2 class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
</div>
</div>
<div class="col left-border">
<div text-center>
<h2 class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
</div>
</div>
</div>
</div>
You can use [ngClass] attribute to achieve this. This can be used to dynamically return the class name as per the last clicked text. The code will be something like below.
<div class="row">
<div class="col right-border">
<div text-center [ngClass]="getTextColor('text1')" (click)="setSelectedText('text1')">
<h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
</div>
</div>
<div class="col bottom-border">
<div text-center [ngClass]="getTextColor('text2')" (click)="setSelectedText('text2')">
<h2 class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
</div>
</div>
</div>
<div class="row">
<div class="col top-border">
<div text-center [ngClass]="getTextColor('text3')" (click)="setSelectedText('text3')">
<h2 class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
</div>
</div>
<div class="col left-border">
<div text-center>
<h2 class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
</div>
</div>
</div>
In controller
private selecteTextId :string;
setSelectedText(textId:string) {
this.selecteTextId = textId;
}
getTextColor(textId:string):string{
return this.selecteTextId == textId? "highlight-color" : "";
}
In scss file
.highlight-color {
color:blue;
}
I have a piece of Sightly/HTL code as follows -
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>${properties.tooltip_textfield}</p>
</div>
</div>
</div>
Please note that ${properties.tooltip_textfield} is hard coded into the code.
I am including this code in my component like this -
<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" data-sly-unwrap></div>
Now I want to pass a parameter to data-sly-include statement so that when my HTML code is rendered, the passed parameter should be placed in place of ${properties.tooltip_textfield} .
In other words -
Calling this
<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" parameter= "Dummy Text" data-sly-unwrap></div>
Should render this -
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Dummy Text</p>
</div>
</div>
</div>
Is this possible?
Thanks in Advance!
I believe what you're after is the Sightly Template and Call feature.
templates/tooltip.html:
<template data-sly-template.tooltip="${# text}" class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>${text}</p>
</div>
</div>
</template>
component.html:
<sly data-sly-use.tooltipTmpl="templates/tooltip.html"
data-sly-call="${tooltipTmpl.tooltip # text='Sample text'}" data-sly-unwrap>
</sly>
I make a grid on ionic framework but its not work same as a bootstrap grid like as a responsive. So I want to same grid as a bootstrap.
<div class="row">
<div class="col col-33" ng-click="goProfile()">
<div class="box"></div>
</div>
</div>
<div class="col col-33" ng-click="gotoExtProfile()">
<div class="box"></div>
<div class="box-title">Extended Profile</div>
</div>
<div class="col col-33" ng-click="gotoMspAgreements()">
<div class="box"></div>
</div>
</div>
</div>
Here you can see how Ionic grid works
By default every col added inside a row will automatically receive an
equal amount of the available area.......
..... each of the five columns in this example will each evenly take up 20% of the available width (thank you flexbox).
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
http://ionicframework.com/docs/components/#grid-even
I have a basic Bootstrap3 layout that looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Section 1</h2>
</div>
<div class="col-md-4">
<h2>Section 2</h2>
</div>
<div class="col-md-4 pull-right">
<h2>Section 3</h2>
</div>
<div class="col-md-4">
<h2>Section 4</h2>
</div>
<div class="col-md-4">
<h2>Section 5</h2>
</div>
</div>
</div>
Section 3 has a basic Contact Us form, which works fine in full screen mode... But once reduced to a smaller size the user can not enter data.
When "pull-right" is removed the form funtions correctly in all size modes but then my vertical alignments with Section 4 and Section 5 are pushed down and out of line...
I need the form to work in all screen size modes and for the verticle alignment to be consistent - any help is appreciated - thanks!
From your question it is really difficult to understand what you are trying to achieve (I mean the layout) but as I see you use .pull-right class with .col-md-X and as far as I know it is a wrong approach because all .col-md-X classes have 'float: left; width: x%;' styles. Applying 'float: right' brakes your grid.
Instead you should have a look at these classes .col-md-push-X and .col-md-pull-X More info you can find in the official docs http://getbootstrap.com/css/#grid-column-ordering
UPD try this http://plnkr.co/edit/ujbqGvGwCnht9CGmKQ1r?p=preview resize plunker result window to see the result
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h2>Section 1</h2>
</div>
<div class="col-sm-6 col-md-4 col-md-push-4">
<h2>Section 3</h2>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-4">
<h2>Section 2</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<h2>Section 4</h2>
</div>
<div class="col-sm-12 col-md-4">
<h2>Section 5</h2>
</div>
</div>
</div>