In sproutcore I'm trying to change the border thickness of a div when a user mouses over it. All the other code is working but I can't find how to either access the css properties directly or attach a new classname to the div.
borderDiv: SC.View.design({
layout:{top:60, left:60, width: 400, height: 525},
classNames:"panel",
mouseEntered: function(evt) {
alert("this is working");
//
// No idea what to put here to change css properties
//
return YES
}
})
I think you can do something like
this.$().addClass()
to add any class you want.
Not exactly what I was looking for but what mostly gets the job done is using css pseudo-classes. :hover, :active, and :focus cover most bases for my use.
Related
I read the CSS styling section (https://vaadin.com/docs/v14/flow/styling/styling-components) and it mentions that global CSS doesnt affect the 'INPUT" field in the shadow DOM, So styling has to be added to shdaow DOM, But unfortunately no where does it explicitly say HOW to add the styling to the shadow DOM. Note. im using mainly Flow pure java with a bit of CSS.
I tried retrieving the elementt from component then retrieving the shadowRoot, then from root, retrieve the 'input' element to add styling to it, unfortunately that didnt work, shadowroot was null (this code executed from the onAttach() method in the view class)
private void setTextAlignCenterForTextFields(TextField textField) {
//find the internal 'Input' and set the styling to text-align=center, unfortunately
// you cant do that with global css, since the 'input' element is in shadow root
textField.getElement()
.getShadowRoot()
.get()
.getChildren()
.filter( elem -> "INPUT".equalsIgnoreCase(elem.getTag()))
.forEach(inputElem -> inputElem.getStyle().set("text-align", "center"));
}
Any ideas would be appreciated. I'm using Vaadin version 14.5.1.
There's already a theme variant to align the text
centerTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);
see https://vaadin.com/components/vaadin-text-field/java-examples/theme-variants
As for how to attach CSS to shadow root, basically use themeFor, see https://vaadin.com/docs/v14/flow/styling/importing-style-sheets/#component-styles
You can use CSS to target the value part:
.textfieldClass::part(value) {
text-align: center;
}
This video explains styling CSS parts: https://youtu.be/Y0uxb4ga44Y
I have two components that using mat menu. I just want to add some extra styling for one mat menu in one component. I have used this css inside the component css
::ng-deep.mat-menu-panel
{
position: fixed !important;
right : 2%;
}
Now the issue is the css is applying to the other component mat menu also.
How can i resolve this?
Add your panel styling to your global style sheet:
.fixed-menu-panel
{
position: fixed !important;
right : 2%;
}
Add the panel style to the mat-menu:
<mat-menu class="fixed-menu-panel">
StackBlitz: https://stackblitz.com/edit/angular-9bheaf?file=index.html
The challenge is that the menu is rendered in an overlay container attached to the parent document and not the button itself... with this in mind, you will need to think about how to grab a reference to that mat-menu-panel and append a class to it to make it unique on menu open.
For example, you could do something like the following to accomplish this.
Create a component method that will receive the templateRef as an argument. It will get the mat-menu-panel using Renderer2 and append a class to it of styled
styleMenu(el) {
const menuPanel = this.ren.parentNode(this.ren.parentNode(el.items.first['_elementRef'].nativeElement));
this.ren.addClass(menuPanel, 'styled')
}
Then in your view, use the (menuOpened) event emitter to call the styleMenu method when the menu opens, and pass the #styledMenu templateRef as an argument.
<button mat-button [matMenuTriggerFor]="styledMenu" (menuOpened)="styleMenu(styledMenu)">styled</button>
<mat-menu #styledMenu="matMenu">
Then your CSS will look like this
::ng-deep .mat-menu-panel.styled
{
position: fixed !important;
right : 2%;
}
This is one approach, you could also roll all of this into a directive and then just apply the directive selector where you need it.
Stackblitz
https://stackblitz.com/edit/angular-5nixtl?embed=1&file=app/menu-overview-example.ts
I am using the jQueryUI resizable widget, and have a bunch of resizable boxes on a page. When the document loads, I initialize the widget, like so:
$('.ui-draggable').resizable({
minHeight: 10, // 10 is actually the default
minWidth: 10, // 10 is actually the default
resize: function() {
showProperties(this);
},
});
However, at some point I want only some of those elements to change resize options. What I'm trying to do is this:
if (type == 'sometype')
{
console.log($('#'+elementID).resizable('option', 'handles'));
$('#'+elementID).resizable('option', 'handles', 'e,w');
console.log($('#'+elementID).resizable('option', 'handles'));
}
This indeed outputs:
e,s,se
e,w
in the console, so the event is triggered and the selector is correct, but the code doesn't actually work: in fact, the handles remain the same, namely e, s, se.
Is this because I'm using a different selector from the original init? If so, how can I change the resize options only on a subset of originally-resizable elements? And if not, what could be the problem?
Handles are actually divs added to the element on which resizable is applied. It seems that changing the option doesn't refresh these handles. Maybe there's a way to apply the changes on specific subset and refresh, but I'm not sure how.
But one quick workaround would be to hide the handles you don't want instead of changing the handle option. You would have to set handle option to all the handles you'll need, and then hide those not wanted. Like this to remove se handle for example:
$('#'+elementID).find('.ui-resizable-se').hide();
I have just migrated from TinyMCE3 to TinyMCE4 and I wonder how to remove the path in the status bar. But I want to keep my status bar in order to have the resize functionnality.
With TinyMCE3 we can do it with:
tinymce.init({
...
theme_advanced_path : false
});
How can I have the same result with TinyMCE4?
Thanks
In TinyMCE 4 you can remove just the path in the statusbar by setting the configuration elementpath to false, like this:
tinymce.init({ elementpath: false });
This works for me:
.mce-path {/* CSS */
display: none !important;
}
EDIT:
In TinyMCE4, I don't think there is an official way to do it by passing a parameter to tinymce.init(); to disable the path. You can pass statusbar: false but that will hide the path AND the resize icon, unfortunately!
The answer I gave by using CSS, hides the path but the resize icon stays there. But make sure you have the statusbar: true in the tinymce.init();
tinymce.init({
statusbar : false,
The CSS approach works, but is usually applied globally to each editor in the page. The old option of TinyMCE 3 could be applied individually for different editors.
I wanted to keep this flexibility and found the following solution:
a) Define a CSS rule like .myMceNoPath .mce-path{display:none;}
b) For an editor instance which should provide a resize handle without path display, define the following options:
resize: "both",
init_instance_callback : function (ed) {
ed.getContainer().className += " myMceNoPath";
}
This dynamically adds a class to the editor element, enabling us to apply the CSS only to the editors specifically marked this way.
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
From: Remove menu and status bars in TinyMCE 4
Unfortunately this feature is deprecated in TinyMCE 4. But you always can block this visually by CSS. It must look something like this:
.mce-path {
display: none;
}
I am using tinyMCE v5. And the following works.
In order to hide the Path, pass "elementpath": false in init object and "statusbar": false to hide the full status bar. If you hide the whole status bar then you will also lose your ability to increase or decrease the height.
One quick solution in TinyMCE 4 is to set the path element's opacity to transparent:
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("opacity", "0");
}
});
This should hide the path text without otherwise affecting the status bar. I've found that disabling the status bar's visibility through either the init() function or CSS display property also results in a floating word count and resize icon overlapping the scrollbar.
Credit to immo and others for pointing out the callback and CSS concepts. I like this particular (jQuery) solution because it's self-contained and applies only to its parent editor, though variations are possible.
Setting theme_advanced_statusbar_location to empty string worked for me.
tinyMCE.init({
theme_advanced_statusbar_location : "",
})
Mine is based on the opacity concept from Dustin Carr above:
For TinyMCE 4, I located skin.min.css, searched mce-path-item and right after display:inline-block, I added opacity:0. So it finally is something like display:inline-block;opacity:0; *display...
It's just a quick trick, as Carr says: the element is still there when I click on it, it's just the standard user don't see it.
Hope it helps some one...
EDIT:The same for mce-divider ;)
Thanks to #Dustin Carr for his answer.
I've extended his answer a little bit , that's what i did , it works fine for me and when user hover cursor over the area of the path it doesn't display cursor at all (with opacity 0 it displays cursor over the path and path remains clickable) .
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
},
});
HTH
I'm using jQuery and I have the following problem:
In my site I have a chessboard with pieces. Every square is a simple div with the background property to show white or black. Over these squares (inside the divs) I've put an img tag referencing the piece that must be over that square. Something like:
<div id="a8" class="square" style="background-image: url('/images/background_white.png')">
<img id="piece_a8" class="piece" src="/images/rook_black.png" />
</div>
I can control the movement of the pieces using jQuery. Every piece-class img is a draggable and every square-class div is a droppable. I already have a server-side function that, given a set of coordinates, returns "VALID" if the movement is valid, and "INVALID" if otherwise. My idea is, if the server returns "INVALID", the piece must return to its origin square, and if the server returns "VALID", the piece must stay in its new square, deleting every other piece inside the target square.
My problem is, I don't know how can I enforce this return value in my jQuery code. I've tried putting functions in the revert property of the draggable, and in the accept and drop functions of the droppable, but I haven't found how to make $.get return false or true.
Any help would be really appreciated.
Thanks in advance,
Léster
Nevermind, answered.
In case someone needs to know, the trick is in 2 parts:
First: In the draggable definition, under the start event, add a function that saves the original position. Like this:
$('item_to_drag').draggable({
start: function(){
$(this).data("origPosition",$(this).position());
}
});
Second: In the droppable definition, under the drop event, do your .get and use a function to process the answer; in case your conditions are not met, animate the draggable back to its original position. Like this:
drop: function (event, ui) {
$.get(url,function(data) {
if (data == '"INVALIDO"')
{
ui.draggable.animate(ui.draggable.data("origPosition"),"slow");
}
else
{
//store new positions, whatever;
}
}
);
}
That'll do the trick.
Part of the answer came from here: In jQuery, how to revert a draggable on ajax call failure? .