I have recently learnt material design lite
I am using MDL grids in my html page to make three uniform divisions in a single row.
<div class = "mdl-grid" >
<div class = " mdl-cell mdl-cell--4-col">
some text
</div>
<div class = " mdl-cell mdl-cell--4-col">
some another text
</div>
<div class = " mdl-cell mdl-cell--4-col">
more text
</div>
</div>
But in second division, Instead of adding some text, I want to let the division be empty .That is only left(first div) and right(third div) divisions are populated with some text but the middle one (second div) remains empty space.
How can we do this using mdl?
PS: We can use margin property and delete the middle division.But I want to do this in MDL way.
Related
Is there any Clarity element to wrap the container of clr-datagrid element in html? Please suggest me the solution to wrap the clr-datagrid using clarity element.
In the below instead of "div" element, i want to use clarity element. So that clrDgLoading will work. Here now it is not working as div is not known to clrDgLoading.
<div [clrDgLoading]="loading">
<clr-datagrid *ngIf="some condition which i need">
....................
</clr-datagrid>
</div>
I want loader to work first and then i will add my condition to clr-datagrid whether to show/hide the table or not(depends on the data presence).
I would suggest to use a spinner like the angular material spinner or the ngx-spinner for progress before loading the datagrid.
Example material spinner:
<mat-spinner></mat-spinner>
Example ngx-spinner:
<ngx-spinner
bdOpacity = 0.9bdColor = "#333"size = "medium"color = "#fff"type = "line-spin-clockwise-fade"[fullScreen] = "false"
>
<p style="color: white" > Loading... </p>
DEMO ngx-spinner
i am using syncfusion pager, dropdownlist in our application
please open the below link.
https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2Fapp.component.html
data will change based on the number of items selected from dropdown.
after selecting the 20 items from drop down go to bottom of the page by scrolling.
drop down list is showing bottom of the drop down box. but i want to show dropdown list items always top of the dropdown box.
Please provide any solution.
i just saw your code on your link, and i tried this:
<div class="container-fluid">
<div class="card" *ngFor="let student of tempArray">
<div class='card-body'>
<p class="text-truncate">{{student.name}} {{student.standard}}</p>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class='card'>
<div class='card-body'>
<div class="fixed-footer" *ngIf="students.length > paginationData[0].value">
<ejs-pager [pageCount]="3" [pageSize]="value" (click)="selectedPage($event)"
[totalRecordsCount]='students.length'></ejs-pager>
<ejs-dropdownlist [dataSource]="paginationData" [fields]="fields" (change)="valueChange($event)" [popupHeight]=150 [value]="value"></ejs-dropdownlist>
</div></div>
</div>
</div>
what i did here is that i put the list items and the drop down box on a separate card.
it's a little messy, just please arrange the indentions.
In the dropdownlist open event, you can get the popupHight and set a negative value into popup offsetY property, refer to below code.
onddlPopupOpen(event: PopupEventArgs, ddlObj) {
event.popup.offsetY = -(parseInt(ddlObj.popupHeight));
event.popup.collision = { X: 'fit', Y: 'fit' };
event.popup.dataBind();
event.popup.refreshPosition(ddlObj.element, false);
}
This will open the popup in the top.
Sample
I want to show i LIB on my page, but it will be showed on the page all my sits, but not the site with Uid = 3
So in my main TS i have, this
[globalVar = TSFE:id <> 3]
.....
[end]
My question is now, how do i setup a lib, thats have some text and HTML content in it..
Lets say that its this i want to show
<div class="ProductListTitle_style1">
my text my text
<p> text text text... </p>
</div>
You can use lib = COA in combination with TEXT and IMAGE
lib.b = COA
lib.b {
wrap = <div class="ProductListTitle_style1">|</div>
10 = TEXT
10.value = my text my text
20 = TEXT
20.value = text text text...
20.wrap = <p>|</p>
30 = IMAGE
30.file = path/to/file.png
30.altText = My image
30.width = 300
}
Before TYPO3 6.0 you could use lib = HTML.
lib.a = HTML
lib.a.value (
<div class="ProductListTitle_style1">
my text my text
<p> text text text... </p>
</div>
)
You can also combine the two possibilities
lib.c = COA
lib.c {
wrap = <div class="ProductListTitle_style1">|</div>
10 = TEXT
10.value = my text my text
20 = HTML
20.value = <p> text text text... </p>
}
Just for clarification: In TYPO3 4.5+, the Content Objects TEXT and HTML have the same functionality. So you can of course put HTML tags in a TEXT object:
lib.something = TEXT
lib.something.value = <p>My Text</p>
Since both objects could do the same since TYPO3 4.5, the HTML cObject was deprecated and removed in 6.0.
As for Thomas question about COA: A COA is a "content object array" and thus an array of content elements. A COA is used when more than one content needs to be combined in one TypoScript object. So if you just have one object (as in my example above), you don't need a COA, but if you have more than one content, use it (as in hildende's first example).
I am creating a division, in which there are some elements. For the example below, there is a sentence inside a division. However when the sentence becomes very long when I insert something through ajax, it seems like the height of the division does not change.
<div style="width:300px;min-height:10px;background:red">
<div style="width:100px;height:inherit;background:blue;float:left"></div>
<a style="width:100px;height:10px;float:left">The length of this sentence is always changing.</a>
</div>
you have to set the height for the div using javascript or using jquery
assign a ID to div e.g
<div style="width:300px;min-height:10px;background:red" id="test">
<a>The length of this sentence is always changing.</a>
</div>
$.ajax({
$(function() {
$("#test").width(100).height(200);//set height or width here
});
});
try to set the height here...
I have multiple eventlisteners to my div: dragstart, dragenter, dragover, dragleave, drop and dragend.
To attach them to my div, I use the body onload function:
function addListeners()
{
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
}
but this code adds the eventlistener to the whole div. I only want the header of the div to respond to these events:
Now I can click on any part of the div and drag it, but I only want to be able to click on the black part (header) of the div to move it. The black part is a simple header in CSS.
HTML
<body onload="addListeners()">
<div id="columns">
<div class="column" draggable="true"><header>A</header>Textual information inside div A</div>
<div class="column" draggable="true"><header>B</header>Textual information inside div B</div>
<div class="column" draggable="true"><header>C</header>Textual information inside div C</div>
</div>
</body>
A JSFiddle of my full page can be found here.
How can this be done?
You need to add EventListeners to your header elements.
but those event listeners will work only when your headers are draggable=true
so by adding EventListeners to the header and making it draggable=true you can start to drag it.
But there is one problem now, you don't want to drag just the header, but its entire content i.e its parent div. and you want to swap it with the parentNode.innerHTML of the other header(upon which you are dropping).
so, you need to do this:
add events to the header element,
perform all the other operation i.e. grabbing and then swapping innerHTML on the parent of the header i.e. this.parentNode
also when you perform the innerHTML swap, all the event listeners are lost,because now, the very draggable element is recreated, so you will have to call your event binding function addListeners() again.
working fiddle