I can't seem to get this plugin to transition the css property 'font-size'. I get an 'unexpected token -' error whenever I try to run it. Any thoughts? Is this property not supported by Transit?
You may want to try using
'scale(x)'
I personally have had problems transitioning font-size with jquery/javascript, and scale works great.
It should work like this:
elem.transition({
height: new_height,
width: new_width,
fontSize: "100px"
});
You probably wrote font-size instead of fontSize. Or forgot to declare font-size in the CSS file.
Related
In the Odoo 15, I realize that the width of the label for the field is too wide. When I inspect the element in the browser, the CSS that causing this behaviour is this one:
#media (min-width: 992px)
.o_web_client:not(.o_chatter_position_sided) .o_action_manager .o_content .o_inner_group .o_td_label,
.o_web_client:not(.o_chatter_position_sided) .o_action_manager .modal-content .o_inner_group .o_td_label {
min-width: 260px !important;
}
I already try to change some CSS that I think related to this behaviour from the source code, but still not working. How to change this default width?
Are you using web responsive module ? If yes, look at
web/web_responsive/static/src/legacy/scss/web_responsive.scss
file as well to make same changes as you did.
Otherwise, changing min-width should work fine
Note: Do not edit at source. Make a new module, inherit those and change.
I'm using Do Hyeon font and all browsers render fine except for Safari. It seems if text is too short or not upper case, safari ignores spaces. However, if I click or hover the text, it re-renders with space.
Does anyone know why this is happening and how can I solve this?
I already tried adding these css property but did not work.
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'kern' 1;
(Second picture) When I selected text
I believe it was Safari issue but unfortunately, I could not find the reason why this is happening.
However, after testing some css properties, the one I am using for displaying ellipsis worked for this issue as well, so I will leave the code here in case someone is having the same issue.
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 10rem;
Again, these properties are originally for ellipsis especially for safari:
https://stackoverflow.com/a/61515590/12332180 but propbably, this is related to modifing the text that is why it is working for my situation as well.
This question is similar to this one but I still cannot come up with a suitable solution.
On my site I am trying to implement the dojo Tooltip (not dialog Box as in the link above; click here to see Tooltip documentation). I would like to be able to change the zIndex of the Tooltip to whatever I need. I can only seem to get Dojo to work if I use a CDN such as http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js or //cdnjs.cloudflare.com/ajax/libs/dojo/1.9.3/dojo.js, so trying to alter the javascript of the tooltip file for Tooltip.js did not seem to do anything. Note: Tooltip.js was included locally as:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<script src="dojo/Tooltip.js"></script>
Using info from the link at the top of the page, I was able to come up with a hack solution. Assuming the default z-index for the Dojo tooltip is 1000, I changed the z-indices of all other divs (that were previously > 1000) to z-index < 1000. This solved the problem, and now the Dojo tooltip can be seen in front of these divs (previously was behind).
Any suggestions on how to alter the zIndex property of the Dojo tooltip without altering Tooltip.js?
I would recommend to override css rule according to your requirement.
Like by default css rule on dijit tooltip is as follow:
.dijitTooltip {
position: absolute;
z-index: 2000; // You can write your desired z-index
display: block;
left: 0;
top: -10000px;
overflow: visible;
}
Or you can try via JS
dojo.query(".dijitTooltip:visible").style("z-index", 'You desired value'); // <1.6
//>1.7
require(["dojo/query","dojo/dom-style"],function(query, domStyle){
domStyle(query(".dijitTooltip:visible"), "z-index", "You desired value");
});
Not sure if I fully understand your problem. But maybe this will help in changing the z-index of a dojo object programmatically using javascript:
dijit.byId('<Dojo ID of Tooltip>').attr("style","z-index:999");
I would also stay away from altering Tooltip.js.
For dojo 1.10 you could use dom-attr to set/change the style.
The code above will then look like that:
domAttr.set("mywidgetId","style","z-index:999");
Regards, Miriam
I would recommend using dojo/dom-style for this.
domStyle.set(tooltip.domNode, "zIndex", "999");
Do notice that FireFox will not accept "z-index" as a valid css property name, see http://www.w3schools.com/jsref/dom_obj_style.asp. Always camelcase the css property name.
based on the custom-player-examples im building my own player.
i used the minimal-player template.
after i set up the player like i want it to be, i started to customize the design (color.css, structure.css, standard,css)
but now i am stuck badly..
i found out that i cant change the background-color of the waveforms unless i use a webkit or the waveform.js.
the webkit should do just fine for me...
my only problem is,
i dont know how to acess the track.waveform_url in neither my index.html or *.css files.
i know its inside waveform-container div but i need the url
.wavekit{
-webkit-mask-box-image: url(**IN HERE!!!**);
background: #81D8D0;
height: 280px;
width: 100%;
bottom: 0px;
position: fixed;
}
inside my stylesheet..
sadly i cant provide a link because its only on my hard drive yet
can somebody please help me out here?
thank you verymuch
Well, this is very hacky, but after a couple of attempts I haven't found a better way to get waveform URL.
Idea is that for first play there is an event of 'ajaxSuccess' that is firing and for the next ones there is 'scPlayer:onAudioReady' event. The point being that image’s DOM is being generated by the plugin only at some point, so we need a certain “hook” like an event to know for sure the image will be already present in DOM.
$(document).bind('ajaxSuccess scPlayer:onAudioReady', function () {
// get image from DOM of player
// it will be re-set every next play
console.log($('.sc-waveform-container > img').attr('src'));
$('.wavekit').style({
'-webkit-mask-box-image': $('.sc-waveform-container > img').attr('src')
});
});
Here's working example http://jsbin.com/uhofom/2/edit (only tested in Chrome)
Custom player project is outdated and will probably not get much attention. Its current state is not very extendable from the JavaScript point of view.
My suggestion would be to use something like Audio5JS or SoundManager2 to play music and to have custom HTML and CSS UI. To get actual sounds or sets data you could query our HTTP API or use SoundCloud JavaScript SDK. Then you'd have proper object with all data including waveform API and would control the process much better.
I am still a relative beginner with jquery so any help is gratefully appreciated.
I took the simplemodal function and changed the positioning from fixed to absolute as I wanted the modal box to be able to be scrolled with the background page.
This is causing me a problem as somewhere (I presume in the jscript) the top position is being set so I can't override it in the external css.
Can anyone tell me how I can change the inline css for simplemodal-container?
Thanks!
The following should work:
// replace #foo with your id or element
$('#foo').modal({onShow: function (d) {
// replace '0px' with your value, or remove the property
d.container.css({position: 'absolute', top: '0px'});
}});
Note: This does not work in IE6