Ionic - CSS is not applied when refreshing on another view - html

I'm currently working on my first Ionic App and working with Angular for the first time.
I am using the pie-chart library to display charts on the dashboard of the app. This works nicely if I refresh while I am on the dashboard and looks like this:
https://imgur.com/YUCAO6i,oakGp8c#1
But if I navigate to another tab, lets say the server tab, and refresh there, the width and height is not applied to the charts on the dashboard. Instead they are rendered using the standard width and height (500h x 900w instead of 100h x 100w). (See second picture on imgur). If I refresh on the dashboard again, they will render normally.
I went through the source code of the library and saw that when refreshing on the dashboard, the element[0].parentElement.offsetWidth equals 100, but if I refresh when on another view, it is 0, so the default values are used. It looks like the pie-chart directive can't access the parent when on another view.
Here is the HTML and CSS used:
HTML
<div class="pieChart">
<pie-chart data="server.chartData.cpu" options="chartOptions"></pie-chart>
</div>
CSS
.pieChart {
height: 100px;
width: 100px;
float: left;
}
I tried to find an answer for hours, but I am not even sure what exactly I need to search for. The only solution I came up with is to change the default value in the pie-chart.js, which I would prefer not to do.
EDIT
The app is open source, you can find the full code in my repository: https://github.com/AndreasGassmann/cloudatcostapp

After hours of researching I finally found the cause of the problem.
There are 2 separate behaviours causing the issue:
Ionic caches up to 10 views to increase performance. This means that when you switch from one tab to another, the first one remains in the DOM so it can be loaded quicker. However, it seems that the CSS styles are not applied to the view that is not visible. This means that the actual height and width of the div with the .pieChart class is 0 at this point. I think it's similar to setting the display: none property of an element. (A blogpost explaining the issue with jquery)
Whenever the pie-chart updates, it will set its size to the width and height of the parent element. I guess this is made so the chart will resize after you resize your window and refresh the data.
Those 2 things obviously don't go well together. Since Ionic caches the dashboard view, the <pie-chart></pie-chart> element is still in the DOM, so it will try to re-render immediately. But because the styles are not applied to the the parent div, it will just get width and height 0 and fall back to using the default values.
In normal websites the views usually don't get cached. This means that when you refresh, the <pie-chart></pie-chart> element isn't present in the DOM, so it won't try to render at all. Only after you navigate back to the view and the element is loaded again will it try to render and read the dimensions of its parent. (Which will work, since all styles are applied).
I haven't found a way how you can tell an element to "stay rendered", even if it's not the active view. This means that there are 2 options to solve this (besides changing the way the pie-chart library works):
Hardcode the height and width as the default value inside the pie-chart.js
Disable caching for that view in ionic or clear the view cache every time you refresh. You can do this by calling $ionicHistory.clearCache()

Force the style I assume with :
.pieChart {
height: 100px !important;
width: 100px !important;
float: left !important;
}

Related

multiselect menu moves when i open the console

I have a p-multiselect component from primeNg inside a div,at first the menu, when expanded, was being cut by the accordion. We solved the problem using appendTo="body" in the element. Now the values are shown correctly, the problem is that when i open the console or when i use a mobile device to open the web app the menu from the component moves to the right/left, but if i remove the appendTo this problem disappear. We tryed with z-index properties as alternative to appendTo but didn't work. How can i solve this?
We are using Angular 8.
EDIT: the first image is when the console is close, the second one is when the console is open (if you read above i wrote the exact opposite case, this is because at first we tried to solve this aligning the left margin, in these picture we are not aligning the margin).
Below i added the html code we used.
Try this one, I'm also facing this issue on p-dropdown via Angular10;
When you inspect to html. left position of the panel is a bit shift that cause by resizing of the screen.
The solution
style.scss - is one this a must, or you need ::ng-deep if you paste this class on other .scss file
.force-left {
left: 0 !important;
}
.component.ts
<p-multiselect
...
panelStyleClass="force-left"
...
></p-dropdown>
We found the solution 1 week later i posted this question. We solved this problem defining an attribute inside a div (the outermost) and, in the multiselect, we used appendTo with the attribute we defined in the outer div. This solved the problem.

resizing TelerikDateRangePicker components

I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."

How to target one widget on my Wordpress homepage without effecting other sections?

I am having trouble changing the styles of a widget on my Wordpress site.
The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"."
The styles seem to be mainly applied to the ID ".content", but I'd like to alter those styles ONLY at the ".text-3" level.
I can change the content stylings and get the effect I want in the widget, but it changes all of the other widgets.
I want the bottom widget to fully span the page (ie, full blue background, centered text, resizing and wrapping text at smaller screen widths), but to leave the other sections alone.
Any tips on how to target this widget independent of the other sections?
Usually wordpress widgets have a their own style css file in wp-content/plugin and the name of the plugin.
Anyway if you open the developer tools on the web browser and you click on the element you want to change, you will figure out which selector to use.
Make some test on the developer tool and then make the changes on your files.
In this EXACT CASE you can do it with:
.widget:last-child {
/* your rules */
}
As this is the last child of the section id="main".
Or use its ID:
#text-3 {
/* your rules */
}
Okay. I solved it. Let's see if I can explain.
First, I changed the #content container to:
body.home #content.col-full {
max-width: 100% !important;
}
This of course expanded the full container.
Then I was able to style individual widgets as needed.
It was the more parent element that needed styling, then everything else flowed from there. But it was hard for me to target, since I:
Didn't know how to target only the home page (body.home)
Didn't see that the container was #content
Didn't realize that the easiest thing to do was to adjust the container and to style the contained widgets separately

Twitter widget will not populate when display set to none

I am using Twitter's own Search Widget (Which can be seen here) on my site and it is contained in one of many switching tabs, basically consisting of divs that are hidden and shown according to which link is clicked.
There's no need for code here because it's a very simple situation to explain, basically the twitter feed is not being populated with new tweets when it is contained in a div which has display:none.
You can see this by going onto the twitter widget demo page and hiding it in your element inspector. Wait a few seconds and then show it again and you will be able to see that there are no new entries, just a pile of dotted borders.
How can I ensure the feed is being populated even when it is hidden?
Thanks.
Why not use some jQuery to hide and show the widget... without resorting to altering the css? Something like..
$('#example-preview-widget').hide();
$('#example-preview-widget').show();
This worked for me in the console with the issues you mentioned.
EDIT
After more testing, I can see that the above doesn't work. I did find a fix (I think)...
Instead of using hide() and show() or display:none, try to position the div off the screen using
position:absolute;
left:5000px;
or something similar. Then you can toggle it back in position.
When tested in the console, this keeps the tweets loading.
Shrink the div down to nothing, hiding the overflow:
#your-div {
height: 0;
overflow: hidden;
}

Where is this <tr> height coming from?

I've got an embedded widget from The Weather Channel and everything is working fine except that they've got a <tr> with a 1px height image that is expanding to a height equal to the other rows.
It's shifting the rest of the content down. Because it's just an embed, there is only so much of the styling I can control. But I figured it must be inheriting something from my stylesheet since it had inherited some line-height that I had to correct.
If you visit http://www.scwd.com and scroll to the bottom you'll see the weather widget. The row with the grey td below #weather.com is the issue. It should only be 1px in height. I've used multiple debuggers to see if I could find the inherit and I cannot. Any help would be great.
-- UPDATE --
Not the most elegant solution considering variable within the widget and out of my control may change in the future. But as David suggested, I solved it with the following.
<script type="text/javascript">
var x = $("img[src$='blank.gif']");
$(x).closest('tr').css('display', 'none');
</script>
Best I can find is:
Inherited from div#wx_module_6107.wow_container
.wow_container {
line-height: 14px;
}
Are you hosting this or pulling the HTML from a foreign source? I suspect you can't control the HTML that's being rendered or the CSS that it's using?
I'm no CSS expert, so thus far nothing I've tried in FireBug have made a difference without affecting the rest of the table elements in the widget.
Unless someone can give a CSS solution, maybe some JavaScript can get the job done? You should be able to, on document ready, find that img element (maybe by its src?) and from there (using something like .closest() in jQuery) find its parent td and parent tr and with those element references explicitly set their styles.
The image is in a td which has a line height of 14 according to your css:
.wow_container { line-height: 14px; }
I would give it a line-height of 1px and set the background-color to transparent. That makes things look nice for me. Is this widget coming from a wordpress plugin? If so which plugin? You may be able to edit the plugin code yourself.
I think the problem occurs because the font-size of the body. My suggestion is to add font:1px Verdana,Arial,Helvetica,sans-serif for the td that is the grey row.