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."
Related
I'm currently working on an online code editor. (like jsfiddle codepen etc...)
I got everything working, but I ran into one problem; If a user does something like this:
button {
background-color: red;
}
It also changes the properties of my "run code" and "reset" button I made.
same thing with other things like a div;
div {
padding: 500em;
}
because this will also change the div's Im using in my own code.
I fixed the issue using !importand tags after every line in my css but I'm wordering if there is any other way to fix this? or is !importand really the only way.
As said in the comment by CBroe. To do this you can use iframe.
A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it's fairly new :
But, I've used it myself and it's a little bit harder to understand at first
Edit 3: I guess this is solved. I just enabled the Gutenberg editor and discovered its "Classic editor" part, the Code Editor. The only thing I have to get used to is the editor's line-height that I can't easily modify, which isn't bad. This is working for me and it outweighs the need to modify functions.php or other complicated things like that (to me). Thank you.
[Disclaimer: I'm not a developer of any sort, but willing to take the time. (Can do a bit of CSS.) Also, new to this forum.]
I’m using Anders Norén’s Hemingway theme.
I haven’t tried creating child themes yet and I’m not sure whether a solution to this requires one.
My goal, in short, is to make the whole “Edit Post” webpage look like an offline word processor:
Make the Visual editor occupy the whole screen. (I use the classic
editor.) (Done: Collapsed the vertical menu on the left side,
selected 1-column layout, and disabled “full height editor and
distraction-free functionality.”)
Set a width for the text (because currently text is almost from edge
to edge of screen)
Put text at the center (but “aligned left,” not “justified”). This
is for the "left and right margins," within the post editor.
How do I do #2 and #3?
Thank you.
Edit: Just to clarify: I'm looking to change how the Visual editor looks--only the Visual editor, not any output the live website would show.
Edit 2:
I can replicate what Balázs Varga showed, but (I'm sorry I should I have said this earlier) it doesn't work after I save the code on "Additional CSS." (And after clearing all caches.) I used the id #tinymce.
My browser (Firefox Developer) shows the changes in real time while I fiddle with the Inspector, but not after I save the additional CSS. That's weird, I think, and I think I can handle CSS pretty well: the theme Hemingway on my site doesn't look like the original Hemingway anymore, but all changes were made only through Additional CSS.
Searches on Google showed me that I might need to edit "functions.php"(?), but I don't know how that works for now, and I thought there might be another way in 2019. I avoid editing "complicated" things like that (to me), unless Wordpress makes it hard for me to break things, like with "Additional CSS," for example.
On the Inspector, I can solve it with something like this:
#tinymce {
margin-left: 300px;
margin-right: 300px;
}
I wonder why this isn't a "feature" of the Visual editor already. Would be really nice. It could eliminate the need for word processors or third party editors (at least for "words only" writers like me).
You can inspect the element in your browser, so you can see that it's a tinymce iframe with the id content_ifr.
If you want to set the width in pixels, you could do:
#content_ifr {
position: relative;
max-width: 600px;
left: 50%;
transform: translate(-50%, 0);
}
left:50% alongside with position:relative will push the element to the center horizontally. However it will push the left side to the center, so you also need a horizontal transform set to -50%, so it's pulled back to the correct position (because percents in transforms are counted from the size of the element itself, not from it's parent like left does)
You should see something like this:
If you want to set the width in percents, you can simply apply a margin-left to center the element:
#content_ifr {
width: 80%;
margin-left: 10%; // set this value to: (100 - width) / 2
}
EDIT
You can also edit your functions.php to append your styles to the page, for example in the header area with the admin_head hook:
function hook_css() {
?>
<style>
#content_ifr {
position: relative;
max-width: 600px;
left: 50%;
transform: translate(-50%, 0);
}
</style>
<?php
}
add_action('admin_head', 'hook_css');
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
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;
}
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;
}