Having an issue with the angular-chart.js it does display the grid lines even beyond the chart last point.
you can see the grid drawn even after the last point.
Finally got a solution:
Added margin to the class chart-container, need to add this class in angular-chart.css
.chart-container {
margin-right:22px;
}
Also ensure canvas has the below class which sets the chart width to 100%
.chartWidth {
width:100% !important;
}
Related
I am conceiving a horizontal bar containing items.
They must all be of same width, having the same spacing between them.
They can expand as much as they want vertically (
stackblitz here
Problem:
How to automatically set the width of the row elements? Here I simply put a value that looks good: width:200px.
I want them to have a width dependent on the number of element per row.
What I tried:
Using elementRef in Horizontile (component holding the individual tiles, displaying with *ngFor) to get the width of this element:
currentWidth:number;
constructor(private el:ElementRef) {}
ngAfterViewInit(): void {
this.currentWidth=this.el.nativeElement.offsetWidth;}
it returns 5. (??) Using .width returns nothing. Also this is not recommended, I'd like another solution, less coupling.
I noticed I can make use of width:inherit; in the css of the individual tile component, which allows me to set the style from the horizontal list component.
<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>
As the currentWidth value is zero, of course it doesn't work;
I tried setting it in % but the inherits css tag keeps the %, which is not the intended effect.
Why is the app-tile styling not cared about if inherits is not set?
I tried using ViewEncapsulation but it had no effect either.
This looks like a trivial matter though: did I just miss something?
You can use the offsetParent (link) width and create a method to return the value on each of the cells and call it in your [style.width.px], something like the following will work.
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.
stackblitz
ngAfterViewInit(): void {
//added this as the compiler was throwing ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.currentWidth=this.el.nativeElement.offsetParent.clientWidth;
});
}
getWidth(): number{
let width:number = 0;
//you may need to change this value to better display the cells
let multiplier = 0.7;
width = (this.currentWidth * multiplier) / this.ndisplayTiles;
width = Math.round(width);
return width;
}
<app-tile [class]="'layout-tile'" [tile]="item" [style.width.px]="getWidth()">
</app-tile>
I'm using vis.js timeline and I'm trying to find a way to mark workhours (give them a different background). Using the backgrundareas with groups example I have managed to get my workhours colored for specific dates.
I do not want to use the standard blue color for background, so in order to avoid this I add a class workhours. Then I can set my custom color, but then the borders of the cells are hidden unless I also set a opacity less than 1.
I have a color scheme which I'm using, so setting opacity changes the color and my workhours does not look the same in the whole application.
I'm using this code
.vis-item.vis-background.workhours {
background: ##AFD9FE;
opacity: 0.75;
}
and where filterFromdate is my start date, durationDay is numbers of days in my timeline and startHour and endHour defines my working hours
for (i=0; i<durationDays; i++) {
items.add([
{
id: "W"+i,
start: moment(filterFromdate).add(i, 'days').hour(startHour).valueOf(),
end: moment(filterFromdate).add(i, 'days').hour(dayEndHour).valueOf(),
className : 'workhours',
type: "background"
}
]);
}
this give me
Can anyone tell me how to either get my class workhours to behave like a standard vis background class (like vis-today)?
or if there is another approach to handle background on specific hours (or days)?
Thanks to Issue 3773 I reliased that I could set the z-index, which did the trick.
So my css ended up being
.vis-item.vis-background.workhours {
background: #AFD9FE;
z-index: -1;
}
I am using Fullcalendar Scheduler, and the problem is when i have many resources, it becomes not good, like this:
The live demo with litle resources: http://fullcalendar.io/js/fullcalendar-scheduler-1.3.3/demos/vertical-resource-view.html
I have an idea, it's adding an horizontal scroll, but i don't know the way, can you guys help me out ?
Thank you very much and have a great day.
.fc-view-container {
overflow-x: scroll;
}
.fc-view.fc-agendaDay-view.fc-agenda-view{
width: 500%;
}
/* **For 2 day view** */
.fc-view.fc-agendaTwoDay-view.fc-agenda-view{
width: 500%;
}
Use the combination of this configure options :
dayMinWidth: 150,
stickyFooterScrollbar : true,
dayMinWidth : guarantees your horizontal titles are visible.
stickyFooterScrollbar : guarantees horizontal scrollbar is visible.
Paresh's answer works for views with many columns, but has the limitation that views with few columns will have very wide columns.
Fullcalendar's render algorithm calculates equal column widths based on the view width, and there doesn't appear to be a simple way of setting the column widths using CSS.
Instead we need to enable scrolling on the x-axis:
.fc-view-container {
overflow-x: scroll;
}
then use jQuery to calculate the overall width of the view. Here I am using a minimum column width of 100px:
var columnCount = $('.fc-agendaDay-view th.fc-resource-cell').length;
var viewWidth = $('.fc-view-container').width();
var minViewWidth = 18 + columnCount * 100;
if (minViewWidth > viewWidth) {
$('.fc-view.fc-agendaDay-view.fc-agenda-view').css('width', minViewWidth + 'px');
}
We only change the width of the view and enable scrolling if it exceeds the current width of the view. This has the effect of setting a minimum column size of 100px.
The jQuery needs to run after the calendar.render(); call.
I have a layout where I would like the main content area to be 100% height of the remaining space. So I am almost there but the bottom is truncated (which effects zoom and centering). There is 41px from the bottom that is being truncated, which is the measurement of the header area: http://jsfiddle.net/GTscW/
The reason why I know if it cut off is because I do not see the Google map copyright info. Here is the not truncated, but truncates the top (I just removed the top: 41px from #content .inner-content): http://jsfiddle.net/GTscW/1/
How do I subtract 41px from the bottom from the first sample to get the content 100% of the remaining area?
EDIT:
I was able to add just this: $('#content .inner-content').height($(this).height() - $('#header').height()), but really no CSS solution though???
One issue is that it's not easy to mix percentages and pixel measurements, because different screen sizes will behave differently. But it is possible to use API features to get the map to behave the way you want it to, on any size screen.
Make the map 100% of the screen size, so the header obscures part of the map. Suppress the default map controls so they do not appear partially obscured. Create an empty custom control the same size as the header and position it at the top of the map. When the map controls are added back, the custom control pushes them out of their usual place so they look right on the visible map.
var posn=google.maps.ControlPosition; // shorten the reference
// Add empty custom control
var controlDiv = document.createElement('div');
controlDiv.style.width='100%';
controlDiv.style.height='41px';
map.controls[posn.TOP_LEFT].push(controlDiv);
map.controls[posn.TOP_RIGHT].push(controlDiv);
// Add map controls
map.setOptions({
mapTypeControlOptions:{position:posn.RIGHT_TOP},
mapTypeControl:true,
panControlOptions:{position:posn.LEFT_TOP},
panControl:true,
streetViewControlOptions:{position:posn.LEFT_TOP},
streetViewControl:true,
zoomControlOptions:{position:posn.LEFT_TOP},
zoomControl:true
})
http://jsfiddle.net/GTscW/4/
Note 1: Because the map is actually 41px larger than it looks (in your case), the centre-point will be 20px higher than the centre of the viewable map. This may not be worth worrying about. If it is, then dealing with an apparent centre-point is the subject of another question on SO.
Note 2: This method won't work to get a fixed footer, because the Google logo and Terms links are always at the bottom of the map and [currently] don't move to avoid a control.
I edited your fiddle with a solution: http://jsfiddle.net/T2Nkk/
Basically, create a function that looks something like this:
function remainder() {
$("*[height=\"remainder\"]").each(function(index, element) {
var offsetParent;
var target = $(element);
if (element==$("body")[0]) {
offsetParent = $("html");
}
else {
offsetParent = target.offsetParent();
}
var position = target.position();
var heightParent = offsetParent.height();
var extras = target.outerHeight(true)-target.height();
var remainderHeight = heightParent-position.top;
target.height(remainderHeight-extras);
});
}
For the element that you want to occupy the remainder of the page, do this:
<div id="content" data-role="content" height="remainder">
Finally, when your document is ready:
$(document).ready(function() {
remainder();
});
In css only you can try to use a trick : use both top and bottom attributes on position: absolute property like I did on your fiddle : http://jsfiddle.net/GTscW/23/
Don't know if it works everywhere though.
I have a responsive fluid design portfolio with 3 columns. Something is wrong with the CSS that I am having trouble pinpointing.
If I have exactly 3 items on a row, it appears fine. However, if the last item ends on a line with only 1 or 2 columns, then the whole format gets distorted. This can be seen by resizing the browser.
If you can help me pinpoint the CSS fix for this, I will appreciate it GREATLY.
The example page is here: http://bit.ly/KzfN2g
I believe this is the main css style that is the culprit of the problem, however I could be wrong:
.mosaic-block-three {
margin-right:3%;
width:29.3%;
background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5;
border:1px solid #FFFFFF;
box-shadow:0 0 4px 0 #888888;
float:left;
margin:10px 40px 30px 0;
overflow:hidden;
position:relative;
width:291px;
}
whoa, holy registered trademark batman! i would put a
<sup>®</sup>
if i were you :) but to the question at hand...
why do you have so many lists with only one item? you've also got some styles in there that aren't defined, but i think your biggest problem is that you have items within
<li>
that are floated while the containing elements are not.
try floating .portfolio-three-item then clearing the contents within it. having floated elements inside non-floated elements (without using a clearing class or
<br clear="all" />
confuses the browser and it doesn't look as though any of the contents need to be floated.
I was able to accomplish this using simple jQuery to get the height of the image on page load and declare the height in css, then get the height of the image on window resize and redeclare it in css
$j(document).ready(function() {
// Set portfolio image item height after images load,
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
// reset portfolio image item height each time window is maximized
if(screen.width > 1200) {
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
}
// reset portfolio image item height each time window is resized
$j(window).resize(function() {
var portfolioItemHeightReized = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeightReized);
});
});
Thank you, #kristina childs, for helping me realize it was that the height was not set properly!