I am working on project which needs multiple ace editor instances running, all with auto completion feature enabled
I want increase the width of suggestion window presented by one particular alone. Changing the width using the below class works, but it applies for all the error instance, which i don't need.
div.ace_editor.ace_autocomplete {
width: 40%
}
Is there a way where i can specifically target one particular ace editor instance alone?
Autocompleters for each editor do not have any specific classes, so you need to modify them by javascript, either adding class or style
if (!editor.completer) {
// make sure completer is initialized
editor.execCommand("startAutocomplete")
editor.completer.detach()
}
editor.completer.popup.container.style.width="40%"
editor.completer.popup.container.classList.add("foo")
You could even use resize() to change the width of the specific editors instance:
var popup = editor.completer.popup;
popup.container.style.width="100px";
popup.resize();
Related
I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.
Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.
How can I make it that the height of the container adjusts to the content of its own tab?
Here is a visual
Here is why TAB ONE is so large, TAB TWO is setting the height
Here is a webpackBin for you to see the code working and mess with it.
One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.
I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.
Thanks in advance!
If you set the height based on the given element's current visibility you will be able to resolve this issue.
Example
.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}
.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}
Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.
Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG
animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:
<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>
Happy Coding ...!
There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359
<SwipeableViews
action={actions => {
this.swipeableActions = actions;
}}
animateHeight
>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
Then:
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
overflow:visible
increasing z-index
changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
You have to initialize the select manually
something like :
$(document).ready(function(){
$('select').formSelect();
});
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
Interface Builder in XCode 4.5 respects the intrinsicContentSize for some views, e.g. NSButton, but I can't convince it to respect it on my own custom subviews. This causes IB to add extra constraints trying to force the layout drawn in IB, which then causes the intrinsic sizes to not be used when the program is run.
For example, consider a button centered in a window, and a custom view centered in a window…
You can see that the custom view gets four constraints, presumably because IB doesn't know the view's intrinsicContentSize. You can change which extra constraints are added, e.g. you can force it to be width and height instead, but you can't delete them.
I'm coping with this now by searching and deleting the extra constraints in my awakeFromNib, but there must be a better way to do this.
Set a placeholder intrinsic content size — a "guess," if you will — in Interface Builder.
Select your custom view.
Show the size inspector (⌘Shift5).
Change the "Intrinsic Size" drop-down from "Default (System Defined)" to "Placeholder."
Enter reasonable guesses at your view's runtime width and height.
These constraints are removed at compile-time, meaning they will have no effect on your running app, and the layout engine will add constraints as appropriate at runtime to respect your view's intrinsicContentSize.
How to actually do this, 2019
import UIKit
#IBDesignable class TagPerson: ShadowRoundedImageView {
override var intrinsicContentSize: CGSize {
var s = super.intrinsicContentSize
s.height = 40
s.width = 40
return s
}
override func prepareForInterfaceBuilder() {
invalidateIntrinsicContentSize()
}
}
However, there is a problem. Xcode is buggy. You can sometimes reset it by:
The above will of course work flawlessly at runtime. But it randomly fails to work in interface builder (even with 11+).
To make it cycle, try
The usual 'Refresh all views'
Attach and delete a pointless constraint to one of your intrinsic size views. (I've noticed if you have a number of them, doing this to one is usually enough to make Xcode cycle, then they all work.)
And finally:
Xcode has an "intrinsic size placeholder" feature.
Select one or more of your intrinsic-size elements. Toggle the bizarre placeholder thing back and fore a few times. Often that makes it cycle and the view will then work correctly.
At worst, restarting Xcode with the usual clean-everything will, sometimes, get it working.
Ok, the point here is to make Xcode use the intrinsicContentSize of your custom view in IB.
This can be achieved by adding a placeholder view inside your custom view in IB with a fixed width and height (you can center it horizontally and vertically as well)
Then select your custom view and tap "Size To Fit Content" form the Edit Menu in IB.
At this point all extra size defining constraints will be deletable leaving only positioning ones.
That way IB will size your custom view to fit the placeholder view and and Autolayout would depend on your view's override of - (CGSize)intrinsicContentSize in run time to determine your custom view's size.
Last step is to delete the placeholder view to allow your view to display its content and size correctly:
- (void)viewDidLoad
{
[super viewDidLoad];
[_placeholderView removeFromSuperview];
}
I know this is a hack but hopefully it helps you.
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.
In my project we needed to make the scollbars look like Windows scrollbars.
Therefore I have a thumbIcon on the thumb of a vertical scrollbar, but if I get too many items in the combobox, the scrollbar gets fiddly. This is because the margin between the thumbIcon and the border of the thumbSkin is too small.
Is there a way to set the minimum height of the thumbSkin so that I can ensure there is always a margin there and it always looks good, even if there are too many items?
Fiddly scroll bar http://img97.imageshack.us/img97/7057/nomargins.gif
Image above, see the thumb? By the thumbIcon I mean the 3 horizontal lines. The top and bottom margin between this icon and the border of the thumb itself is too small.
Normal scroll bar http://img15.imageshack.us/img15/5527/margins.gif
This is the normal scroll bar, the thumbIcon and the borders of the thumb have enough margin, which make the scroll bar look a lot better.
You should be able to extend (or if you feel really brave, edit) the ScrollThumb class, there's a minimum height setting in there of 10, which I agree is quite small.
Then you will want to extend the scrollBar class and set the style of the thumbUpSkin of to use that new extended ScrollThumb class.
Finaly you will want to extend your dropdown control to use the new extended scrollBar class.
I'd be more specific, but I'm not comfortable with extending classes and overriding stuff yet, maybe someone better at that will see my answer here and give a good code example.
There's an advantage to editing the class, in that you won't have to then extend all the other classes involved, but the disadvantage is that every ScrollBar in projects compiled on your SDK will use your new minimum height setting, and if it's compiled with a "pristine" SDK (maybe by a co-worker) it would be whatever the setting is in that SDK which could lead to some really difficult trouble-shooting in the future.
An alternative to overriding the classes is to get a reference to the the scrollThumb as a child of the ScrollBar.
var scrollThumb:ScrollThumb = hScrollBar.getChildAt(2) as ScrollThumb;
scrollThumb.minHeight = 50;
This is not ideal as it's dependent on the index of the ScrollThumb but I doubt that's likely to change and it's simpler than overriding the flex classes.
Here is the solution I found for enforcing a minimum size for the scroll thumb. I extended HScrollBar and VScrollBar and overrode the setScrollProperties method, to set the minimum size. Here is the HScrollBar version:
package your.package
{
import mx.controls.HScrollBar;
import mx.core.mx_internal;
use namespace mx_internal;
public class LargeThumbHScrollBar extends HScrollBar
{
public function LargeThumbHScrollBar()
{
super();
}
public override function setScrollProperties(pageSize:Number,
minScrollPosition:Number,
maxScrollPosition:Number,
pageScrollSize:Number = 0):void
{
super.setScrollProperties(pageSize, minScrollPosition, maxScrollPosition, pageScrollSize);
if (scrollThumb) {
scrollThumb.explicitMinHeight = 100;
}
}
}
}
For both HScrollBar and VScrollBar you set the explicitMinHeight (don't set explicitMinWidth in either version).
I'm not sure how to get the default scrollbars for a component to use the subclasses, though. I didn't have to tackle that problem because we were adding the scrollbars on ourselves. A quick google search didn't turn up any answers.