I want to change this setting according to the width of the screen
// min-width:576px
aspectRatio: 1
// min-width:1280px
aspectRatio: 2
I hope you can recommend me how to handle this setting change better, and I simply want to change this setting and not change to other CSS . thank you all！
You could set the aspectRatio option in your configuration as a scriptable option where you can return the value coming from your logic, accessing to screen size or CSS and checking the value of min-width:
options: {
aspectRatio(ctx) {
// your logic
return yourValue;
},
....
}
Related
I want to set the fix value for dialog width and height while using officeUI.displayDialogAsync,How can I achieve that?
officeUI.displayDialogAsync(link, { height: 768, width: 584, promptBeforeOpen: false, displayInIframe: true }, function (asyncResult) {
var dialogObj = asyncResult.value;
dialogObj.addEventHandler(Office.EventType.DialogEventReceived, function (dialogEvent) {
event.completed();
});
});
The width and height here is percentage value for current browser per documentation. Can I have a fix value height and width?
Currently this functionality is not part of the product. We track Outlook add-in feature requests on our user-voice page. Please vote for this feature here. Feature requests on user-voice are considered when we go through our planning process.
for my work I use angular 7 and ag-grid enterprise latest version. I have an ag-grid table configured with master / detail feature and I need to customize the style of the row when the detail is expanded. For example, I would like to change the background color of the row only when its detail is expanded. I tried with the CSS rule:
.ag-theme-material .ag-row-focus {
background-color: $dark-grey-blue !important;
}
but I don't get the correct behavior, because the row changes color clicking on it even without the detail being expanded, while I want it to change color only if the detail is expanded.
I tried to look at the official documentation of ag-grid, but I didn't find indications for this specific case.
Can you help me please?
Thank you
You can accomplish this with the grid callback getRowStyle and detect if the node is expanded or not:
gridOptions.getRowStyle = (params) => {
if (params.node.expanded) {
return { background: 'red' };
} else {
return { background: 'green' };
}
}
I have created a portfolio-type (WordPress-based) website, using FullPage and Flexslider (as a absolute positioned pop-up), and it has a FullScreen button, which is currently giving me some nightmares, but only on the second ".section" in of the FullPage (it only has two sections).
I am also using SlimScroll.js as advised on the FullPage documentation as it can be taller than the window.
For Chrome the animation is "clunky", and when it goes fullscreen it waits like a second until it actually does. Please see the image below:
Screenshot of transition happening
I have added the following code and it worked for the first section, but not to the second section...:
html:not(.ios) .fp-section.active {
height: 100vh !important;
}
html:not(.ios) .fp-section.active .fp-tableCell {
height: 100vh !important;
}
On Safari, though, the transition is smooth but, every now and then, when it finishes it flickers...!
On Firefox there's not much problem as the fullscreen fades in and out. (Is there a way to replace it for a zoom-type animation?
My FullPage settings:
$('#fullpage').fullpage({
// Navigation
slideNavigation: false,
// Scrolling
easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc
scrollingSpeed: 500,
scrollOverflow: true,
// Design
controlArrows: false,
// Events
afterLoad: function(anchorLink, index) { // after changing section
if (index == 1){
// Load scrollDown link so that you don't have to load it afterwards
$('#main').load(scrollDown + ' .main-content', function(){
$.fn.fullpage.reBuild();
});
// Hide menu
if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {
$( '#site-navigation' ).removeClass('toggled');
$( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );
$( '#site-navigation ul').attr( 'aria-expanded', 'false' );
}
}
colorInversion();
popupSlider();
},
afterRender: function() { // so that it applies to first section too
colorInversion();
popupSlider();
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide
//$.fn.fullpage.reBuild();
popupSlider();
}
});
My FlexSlider settings:
$('#popup-slider').flexslider({
animation: 'slide',
slideshow: false,
easing: 'easeInOutExpo',
animationSpeed: 0,
customDirectionNav: $(".flex-direction-nav a"),
// Usability features
video: true,
// Special Properties
manualControls: '.popup-slider-link',
// Callback API
start: function(slider){
$('.slides li *').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
},
after: function(){ // After each slider animation completes
flexslideColorInversion(); // Check for color inversion
$('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500
},
});
(Flexslider is initialised inside the popupslider() function.)
Is there a way to "fix" these issues?
Thank you so much in advance to anyone who may be able to help me with this.
EDIT:
I have seen that the lag in Chrome was because the popup was over the thumbnails and therefore was still resizing them even though they weren't in view; my solution to this was to apply a "display: none" to when the popup slider was on.
The Flicker in Safari is because FullPage.js changes the sections' sizes and their "translate3d", so there is a flicker when that adjustment occurs. The default Fullpage.js characteristic is to actually show part of the section above while it's adjusting, but as I am using 100vh for the .active section it doesnt show on Chrome, Opera or Firefox and only flickers in Safari (hence me wondering what the flicker was!)
Probably the only way around it is to recode Fullpage.js's translate3d (and height/width) codes also with "vh" so that it doesn't have to adjust the size. If any one has a ready code of this, that would be really appreciated! (IE8 is support is not required).
Cheers
I am using codemirror to show some code on a webpage. But when I initialize the codemirror editor, the height of the editor is way more than the number of lines in the code. Please see this fiddle or below image to understand what I am saying Below is the code to create the codemirror editor.
var myCodeArea = document.getElementById("codeArea");
var myCodeMirror = CodeMirror(function(elt) {
myCodeArea.parentNode.replaceChild(elt, myCodeArea);
}, {value: myCodeArea.innerHTML,
lineNumbers:true, mode:"javascript"});
I read codemirror doc but not able to figure out which property controls the height.
Please help me with this
The height can be set through CSS (by giving the .CodeMirror class a height property), or by calling the editor's setSize method.
If you want the editor height to correspond to the height of it's contents, see this demo.
If you see your fiddle, there is an entry in css which defines height.
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
}
You can either override this css or use setSize(width,height) method of codemirror.
Might help someone.
<textarea class="form-control" id="exampleTextarea"></textarea>
.
var config, editor;
config = {
lineNumbers: true,
mode: "text/javascript",
lineWrapping: true,
htmlMode: true,
matchClosing: true,
indentWithTabs: true,
readOnly: true
};
editor = CodeMirror.fromTextArea(document.getElementById("exampleTextarea"), config);
editor.setSize(900,"100%");
I'm having trouble setting the number of rows for a table to automagically fill the available estate of its encapsulating container.
According to the API, setting the visibleRowCountMode property to sap.ui.table.VisibleRowCountMode.Auto should render the table to
"[...] automatically fills the height of the surrounding container.
The visibleRowCount property is automatically changed accordingly. All
rows need the same height, otherwise the auto mode doesn't always work
as expected."
I have used the following code:
var oTable = new sap.ui.table.Table( {
rowHeight : 30,
height : "100%",
// The below property is seemingly ignored... What did I do wrong?
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});
...but as you can see in this jsbin example http://jsbin.com/vazuz/1/edit it just shows the default 10 rows, and certainly doesn't "change the visibleRowCount property accordingly" :-(
Anyone has a solution?
Thanks in advance!
=====================
EDIT: Thanks to #matz3's answer below, I was ultimately able to solve this issue.
Setting the surrounding container DIV to 100%, this seems to be ignored. Setting it to a fixed height, however, worked just fine. But what I really wanted, if a user resized the window, the number of available rows needs to be adjusted accordingly. Setting it to a fixed height is therefor not an option...
However, the trick was in some extra CSS: not only the DIV needed to be set to 100% height, also both BODY and HTML (!!) needed to have a height set to 100%:
html, body {
height: 100%
}
div#uiArea {
height: 100%
}
Now, the table spans the full height of the available viewport, and resizing the window adjusts the table rather nicely. See the final working solution here: http://jsbin.com/bosusuya/3/edit
Matz3, thanks for your help!
CSS hacks is a dirty way. In my application I use to bind visibleRowCount to Array.length
For example, if you have model with this data:
[{firstName: 'John', lastName: 'Smith',
{firstName: 'David', lastName: 'Ericsson'}]
You can bind to Array property length like this:
var oTable = new sap.ui.table.Table({
visibleRowCount : '{/length}'
})
[...] automatically fills the height of the surrounding container [...]
Your surrounding container is the view, so you have to set the height of it also to a value (e.g. 100%)
this.setHeight("100%");
And your view will be set into the uiArea-div, so this one also needs a height (e.g. 500px)
<div id="uiArea" style="height:500px"></div>
With these changes it now works as expected
I'm with the same issue. I "resolve" that in this manner. This is not perfect, but it's better than UI5 resizing...
_resizeTableRow: function () {
var oTable = this.getView().byId("referenceTabId");
var sTop = $('#' + oTable.getId()).offset().top;
var sHeight = $(document).height();
//if there a row, you can take the row Height
//var iRowHeight = $(oTable.getAggregation("rows")[0].getDomRef()).height();
var iRowHeight = 40;
var iRows = Math.trunc((sHeight - sTop ) / iRowHeight);
oTable.setVisibleRowCount(iRows);
},
Other option is to put the Table in sap.ui.layout.Splitter: