I have array of elements that I want to display, and I want to create this all tiles in same width, and make div 100% width. (In this code the tile sizes are different). Any help is much appreciated.
<div class="summaryArea" align="center">
<div *ngFor="let item of getSummery()">
<kendo-tilelayout [rowHeight]="200" [resizable]="true">
<kendo-tilelayout-item>
<kendo-tilelayout-item-body align="center">
<div class="summary" align="center">
<h4>{{item.amount}}</h4>
<div *ngIf="item.status == 'up'"><span class="k-icon k-i-arrow-60-up k-icon-md" style="color:green"></span></div>
<div *ngIf="item.status == 'down'"><span class="k-icon k-i-arrow-60-down k-icon-md" style="color:red"></span></div>
</div>
<br />
<div>{{item.name}}</div>
<hr />
<div>{{item.Description}} </div>
</kendo-tilelayout-item-body>
</kendo-tilelayout-item>
</kendo-tilelayout>
</div>
</div>
This is my CSS
.summary {
display:inline-flex;
}
.summaryArea {
width:fit-content;
font-size:medium;
display: flex;
}
I tried like this but this not works
<kendo-tilelayout-item [width] ="calculatewidth(getSummery().length)">
Ts file
public calculatewidth(length) {
return 100 / length+'%';
}
what if the width in the .summaryArea area is changed to width : 100%? is the result what you want?
I did it using following code. Thanks All for your effort
<div class="summaryArea">
<div *ngFor="let item of getSummery()" [style.width]="calculatewidth(getSummery().length)">
<kendo-tilelayout [rowHeight]="170">
<kendo-tilelayout-item>
<kendo-tilelayout-item-body align="center">
//content
</kendo-tilelayout-item-body>
</kendo-tilelayout-item>
</kendo-tilelayout>
</div>
</div>
Css
.summaryArea {
width:100%;
font-size:medium;
display: flex;
}
ts
public calculatewidth(length) {
return 100 / length + '%';
}
try by using 25% each because it is 4 box
Related
I have the following data that I want to show.
Ideally I want the keys and values left aligned, separated with colons in the middle.
I want the result to be like the following:
key1 : value1
key2 : value2
keyAbc: Value Abc
key_N : value N
And not like the following:
key1: value1
key2: value2
keyAbc: Value Abc
key_N: value N
How to do this in CSS or SCSS, and not using HTML table?
You can use grid, making the columns take on the max width of content.
This snippet adds the colons in a pseudo element as they seem to be just a visual clue rather than part of the data.
Of course you will want probably to add some padding to suit your particular requirements.
.table {
display: grid;
grid-template-columns: max-content max-content;
}
.table > *:nth-child(even)::before {
content: ":";
}
<div class="table">
<div>key1</div>
<div>value1</div>
<div>key2222222</div>
<div>value2</div>
<div>key3</div>
<div>value3</div>
</div>
Just use the inline-block and make sure the children of the main DIV gets that too and it will automatically resize based on widest width, much like table. No need for flex.
.inline-block {
display: inline-block;
}
.inline-block > div {
margin: 2px;
padding: 1px;
}
<div class="inline-block">
<div>key1</div>
<div>keykey2</div>
<div>key3</div>
</div>
<div class="inline-block">
<div>:</div>
<div>:</div>
<div>:</div>
</div>
<div class="inline-block">
<div>value1</div>
<div>value2</div>
<div>Value3</div>
</div>
If you're using div structure, you can use display: flex and could do something like this:
.css-table {
display: flex;
}
.key {
width: 10%;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>
If you don't want to specify width, you'll need use JavaScript to calculate the width and apply it inline.
let maxWidth = 0;
// Calculate maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
let currWidth = keyEl.clientWidth;
if (currWidth > maxWidth) {
maxWidth = currWidth;
}
});
});
// Apply maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
keyEl.style.width = maxWidth + 'px';
});
});
.css-table {
display: flex;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>
I am having trouble trying to have a responsive grid of 3 boxes with some aligned content inside using the library Bulma. I would like to make it work still maintaining the level inside a box if possible.
Any help would be appreciated.
This is the result I expect:
But when decreasing the width, it breaks:
This is the code I am using:
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
The Bulma levels are explicitly told not to shrink
.level-left, .level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
You'll have to override that to get the levels to not break out of the .box elements.
Rather than overriding ALL level items, I suggest you add a custom class to those levels that you want to be able to shrink.
Something like
<div class="level is-mobile level-is-shrinkable">
Level items here...
</div>
<style>
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
</style>
In my case, I had to add a third styling condition for centered level-item elements:
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
Many thanks to just-a-web-designer for his|her answer.
I have a dynamic page that displays multiple pages and has a class that starts with 'paged-' and the number of that page. I want to remove a div with SASS when it's on the page 2 and beyond like this:
.paged-2, .paged-3, .paged-4, .paged-5, .paged-100{
.removeonpagetwoandso{
display: none;
}
}
But I don't want to write from paged-2 to paged-100 since I don't know how many pages it will have in the future.
This doesn't work:
div[class^='paged'], div[class*='paged-']{
.removeonpagetwoandso{
display: none;
}
}
EDIT: Added HTML Structure
Page 1:
<body class="home">
<div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>
Page 2 and so:
<body class="home paged-2">
<div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>
SASS compile
div[class^='paged'],
div[class*='paged-']{
.removeonpagetwoandso{
display: none;
}
}
to
div[class^=paged] .removeonpagetwoandso,
div[class*=paged-] .removeonpagetwoandso {
display: none;
}
In your case
div[class^='paged-'] {
.removeonpagetwoandso {
display: none;
}
}
is enough. It is compiled to
div[class^=paged-] .removeonpagetwoandso {
display: none;
}
which means
child element having removeonpagetwoandso class of elements whose class starts with paged-. I think you have problem with your html structure. You HTML must look like as follows:
<div class="paged-1">
<div class="removeonpagetwoandso">
paged-1
</div>
</div>
<div class="paged-2">
<div class="removeonpagetwoandso">
paged-2
</div>
</div>
<div class="paged-3">
<div class="removeonpagetwoandso">
paged-3
</div>
</div>
<div class="paged-4">
<div class="removeonpagetwoandso">
paged-4
</div>
</div>
<div class="paged-5">
<div class="removeonpagetwoandso">
paged-5
</div>
</div>
<div class="paged-100">
<div class="removeonpagetwoandso">
paged-100
</div>
</div>
pls try this css
<style>
div[class^="paged-"]{
.removeonpagetwoandso{
display: none;
}
}
</style>
I have two divs that I want to show on the page. The order of the two divs depends on the value of a variable on the scope.
The trivial way of doing this is by repeating the divs code twice in the page, each time in a different order:
<div class="option 1" ng-if="value">
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
</div>
<div class="option 2" ng-if="!value">
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
</div>
Is there another way to do this, without repeating the code?
If you do not support IE9 I guess you can use the flexbox order CSS property with a conditional class.
<div class="main">
<div ng-class="{after: !value}">this is the content for div 1</div>
<div class="fixed">this is the content for div 2</div>
</div>
And the CSS:
.main { display: flex; flex-direction: column; }
.fixed { order: 2; }
.after { order: 3; }
See the flexbox order in action: https://jsfiddle.net/a6eaov63/2/
UPDATE: You can move each <div> to external file and include it in proper order depending on value.
<ng-include src="value ? 'div1.html' : 'div2.html'"></ng-include>
<ng-include src="value ? 'div2.html' : 'div1.html'"></ng-include>
(function(angular) {
'use strict';
angular.module('orderDivs', [])
.controller('orderController', ['$scope', function($scope) {
//$scope.variable = true; //uncomment this line to reverse the div ..
$scope.divList = [{'div':'option 1','condition':'true', 'content':'THIS IS DIV 1111'},{'div':'option 2','condition':'false', 'content':'THIS IS DIV 2222'}]
if ($scope.variable){
$scope.divList = $scope.divList.reverse();
}
$scope.changeOrder = function(){
$scope.divList = $scope.divList.reverse();
}
}]);
})(window.angular);
<!-- in views -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderDivs">
<div ng-controller="orderController">
<input type="checkbox" ng-click="changeOrder()" ng-model="variable"/>
<div ng-repeat="opt in divList">
<div class="option" ng-model="opt.div" ng-if="opt.condition">
<div>
{{opt.content}}
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to center the contents of a tag. This is the div that I am trying to center:
<div class="Paging" style="margin: 0 auto;">
<div class="PageOfPage" style="display:inline-table;padding: 10px;">
Page<label id="CurrentPage">1</label> From #Model.CountPage
</div>
<div class="RecordsOfRecord" style="display:inline-table;padding: 10px;">
Record
<label id="FromRecord">
#{
int i1 = (Model.CurrentPage-1)*Model.CountRecordInPage;
if (i1 == 0)
{
i1 = 1;
}
string recordFrom = i1.ToString(CultureInfo.InvariantCulture);
}#recordFrom
</label>
To
<label id="ToRecord">#Model.CountRecordInPage</label>
From #Model.AllRecord
</div>
</div>
There must be something that I am missing, but I am out of ideas.
just use
<div class="Paging" style="margin: 0 auto; text-align:center;">
Live Demo
Give a width of your div if you want to use margin: auto
.Paging {
width :70%;
margin : auto;
}
add a width to the div!!
or if you want the text to be centered add
text-align:center;