I am trying to create dynamic tiles using the mdl-grid and mdl-cell , but the cell is stretching to the maximum height of the column in that row .
To see the difference Here is the example from Angular material design . Here the tiles are displayed dynamically and the columns are not taking the max width of other columns in that row .
http://codepen.io/anon/pen/bpbxzz
Here is the second example using material lite , But here you can see the columns are stretching
http://codepen.io/anon/pen/xVKaod
Is there any way I can create dynamic tiles using MDL ?
UPDATE
After researching for few hours I found this approach is called Masonry layout . I searched for it and found the below ones . But I can not able to do it with flex layout .
1) JQuery Plugin https://github.com/desandro/masonry
2) This is with CSS3
http://web.archive.org/web/20111226183221/http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3
here is another link
http://jsfiddle.net/RTLun/
here stackoverflow link
Compact arrangement of DIVs in two directions
UPDATE
I found the above links doesn't maintain the order of the items , But this one does . But can not find CSS code to do this
http://michieldewit.github.io/isotope-modulo-columns/
Thanks
using http://masonry.desandro.com/ , it perfectly works for me.
<div class="mdl-grid masonry-grid">
<div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
</div>
<div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
</div>
</div>
<script src="https://unpkg.com/masonry- layout#4/dist/masonry.pkgd.min.js"></script>
<script>
var elem = document.querySelector('.masonry-grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.masonry-grid-item'
});
</script>
Related
This is an angular app (but anyone with css knowledge can help), where there is a text area with dynamic content.
So as the content item.text changes the text area should grow or shrink according to the content to fit the content perfectly without any overflow.
<textarea [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
// dont worry about the placeholder. you can ignore that.
Currently in my case scrollbar appears & it is not shrinking or growing with the dynamic content.
How can I achieve that?
Or if there is a way to convert a regular html <div> to a textarea, you can suggest that too. But prefers a solution for the above one.
I've tried css rules like, max-content fit-content etc... nothing is working out!
Install npm install ngx-autosize
in html add autosize
<textarea autosize [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
then in appmodule
put in imports: [AutosizeModule ],
Demo
This can't be accomplished with just css, it needs JavaScript that has quite a few corner cases and can be tricky. Such as, pasted input, input populated programatically, auto filled input, handling screen size changes correctly, and on and on, and doing so in a way that is reusable and performs well.
Given all that, I recommend using a lib for this.
I've used angular material's plenty of times with no issues, just add material to your project (can be done via angular CLI with ng add #angular/material) and either import the MatInputModule from #angular/material/input or TextFieldModule from #angular/cdk/text-field (TextFieldModule is quite a bit smaller) to the module where you want to use it, then do:
<textarea cdkTextareaAutoSize cdkAutosizeMinRows="5" [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
you can exclude the cdkAutosizeMinRows option and then it will default to 1 row, but you can use that option to set however many minimum rows you'd like to display. You can also use the cdkAutosizeMaxRows option to make it stop growing at a certain number of rows if you wish, otherwise it will grow indefinitely with the content.
blitz: https://stackblitz.com/edit/angular-4zlkw1?file=src%2Fapp%2Ftext-field-autosize-textarea-example.html
docs: https://material.angular.io/components/input/overview#auto-resizing-textarea-elements
https://material.angular.io/cdk/text-field/overview
You can't change the height of the textarea without Javascript. But you can use an editable div instead. In plain HTML something like this would serve the same purpose as an textarea and will resize automatically based on the content.
<div class="font-xl font-bold" contentEditable>Hello World</div>
If you use a <div> which you can edit then it can grow or shrink accordingly.
<div contenteditable="true">This is a div. It is editable. Try to change this text.</p>
The below will loop over the item and compare height to scrollHeight incrementing the height by lineHeight. Then resets the rows once the height is greater than the scroll height
(function () {
const el = document.querySelector('textarea');
dynamicallyResize(el);
el.addEventListener('change', function () { dynamicallyResize(el); });
})();
function dynamicallyResize(el) {
el == undefined && (el = this.target);
const lineHeight = 16;
let i = el.getAttribute('rows'),
height = Math.ceil(el.getBoundingClientRect().height);
el.style.overflow = 'visible'; //triger redraw
while(height < el.scrollHeight) {
height += lineHeight;
i++;
el.setAttribute('rows', i);
}
el.style.overflow = 'auto';
}
<textarea [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold" rows="2">Starting text that exceeds the 2 row limit initially placed on this particular text area.</textarea>
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 bootstrap 4.0 alpha with no other styles. The layout is very ugly that, the calendar shows only a single column instead of a table. Any idea of why and how?
I notice the following from the website, but I don't understand what should I do:
note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).
This is my rendering code:
render() {
return (
<div className="container">
<TaskSearchBar
search={this.onSearch}
/>
<BigCalendar
selectable
events={[]}
defaultView='week'
scrollToTime={new Date(1970, 1, 1, 6)}
defaultDate={new Date(2015, 3, 12)}
onSelectEvent={event => alert(event.title)}
onSelectSlot={(slotInfo) => alert(
`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
`\nend: ${slotInfo.end.toLocaleString()}`
)}
/>
<TaskList
queryUrl={this.state.queryUrl}
/>
</div>
);
}
This is the layout result
I found I missed this line:
require('react-big-calendar/lib/css/react-big-calendar.css');
Thanks to enter link description here
In case you still run into any issues, that snippet you copied says that the element containing BigCalendar needs to have a specific height set on it, like 420px or 60%. That'll keep the flexbox algorithm from greedily eating space. If you don't do that, you'll find that the day view renders every single hour at once, rather than providing a scrollable window.
I want my columns to display in 3 columns per row on medium and larger screen sizes (col-md-4), 2 columns per row on smaller screen sizes, and 1 column per row on extra small (col-sm-6), but when I view my app on my tablet, I get floating columns in the 2 column rows. I know its possible to use a clearfix class with ng-if to tell it to make a column every so many rows, but if I use:
<div class='clearfix' ng-if='$index % 2 == 0'>
it will make my columns create a new row every 2 columns, even on larger screens, which isn't what I want. Is it possible to make ng-if only add the clearfix after 2 columns strictly on the col-sm class, and not on the col-md class?
Yes you can do it by listing to window resize event, Based on the screen inner width you can attach or detach the div.clearfix to the dom using ng-if.
EX:
Controller:
maintain a variable to represents the window width $scope.windowWidth
app.controller('MainCtrl', function($scope, $window, $timeout) {
$scope.windowWidth = $window.innerWidth;
$window.onresize = function(event) {
$timeout(function() {
$scope.windowWidth = $window.innerWidth;
});
};
});
View:
Attach the div IF windowWidth <= 768 ELSE Remove the div from the DOM.
<div class="tab-only clearfix" ng-if="windowWidth <= 768">
This will show only on min-width : 768px
</div>
here is a DEMO
Please search for if there is any css fixes for this.
I'm building a dynamic menu system for Composite C1 using Bootstrap 3.3.1 popovers. The dynamic content is working fine, but I can't seem to get the popover width to re-size correctly.
I can set an absolute size with .popover-menu-markup .popover{ width: whatever}, but I want the width to be based on the content. If I set width: auto, the popover is based on the popover-title, not the popover-content.
Any ideas?
EDIT
Sorry, the JSFiddle is here: http://jsfiddle.net/rebeccamarye/x075bm6x/2/
The example shows a single paragraph as the content, but in the actual page there's a bunch of divs with {display: inline-block}, but I think this shows the problem...the popover needs to expand to slightly less than the width of the page.
UPDATE:
http://jsfiddle.net/x075bm6x/7/
JQ
$('.popover-markup>.trigger').on('shown.bs.popover',function(e){
var $link =$(this);
var winW=$(window).width();
var poL=$link.offset().left+$link.width();
var newW=winW-poL-60;
var poId=$link.attr('aria-describedby');
var $po=$('#'+poId);
console.log(poId+': '+winW+' L: '+poL+' > '+newW);
//$po.width(newW);
$po.find('.popover-content').width(newW)
});
CSS:
.popover{width:auto!important; max-width: none}