I'm getting two scrollbars on my page. I'm using sap.m.App and then sap.m.Page. I want to disable scrolling on my App. I tried searching online but couldn't find anything relevant.
The scrollbar (2) goes away if the root view (the view containing the <App> control) has the properties height="100%" and displayBlock="true" added.
Set (displayBlock) to true if the default display "inline-block" causes a vertical scrollbar with Views that are set to 100% height. (Source)
For example, in manifest.json:
{
"sap.ui5": {
"rootView": {
"...": "...",
"height": "100%",
"displayBlock": true,
"async": true
}
}
}
Or in the view definition itself:
<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%" displayBlock="true">
<App xmlns="sap.m"> <!-- root view -->
Try adding an enableScrolling="false" attribute to the <Page> controls in your views:
<Page
id="myPage"
enableScrolling="false"
>
Related
The header block has 3 inspector controls defined:
But inside the block definition there is no InspectorControls tag:
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/heading/edit.js
Also in the rich text control there is no InspectorControls definition.
How are the inspector controls for the header block being added?
The InspectorControls are a slot that exposes a way for plugin/block developers to easily add/insert content into the UI.
Its reasonable to expect that the "Heading Block" source would also contain InspectorControls,
however, given that InspectorControls use useDisplayBlockControls it then becomes a little less obvious how/where they are added..
Digging a bit deeper into the Sidebar (packages/edit-post/src/components/sidebar/settings-sidebar/index.js) where the "Block" component is defined, we find that BlockInspector is actually used:
{ sidebarName === 'edit-post/block' && <BlockInspector /> }
Which eventually leads to gutenberg/packages/block-editor/src/components/block-inspector/ and the revelation that the BlockInspector contains an InspectorControls slot..
...
<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
<div>
<AdvancedControls
slotName={ InspectorAdvancedControls.slotName }
bubblesVirtually={ bubblesVirtually }
/>
</div>
...
Ref: packages/block-editor/src/components/block-inspector/index.js
The block displays the controls for the attributes it supports, eg for Heading: "typography", "color" and "advanced > custom css" are displayed.
I use wix react-native-navigation. Navigation.showModal open fullscreen size. Is it possible to open the custom size? where do I find all the properties list about navigation layouts? Documentation is too meager...
Modal is always full screen. You can control your view's dimensions in jsx.
Instead of flex: 1 - use a predefined width and height according to your needs.
render() {
return (
<View style={{width: '80%', height: 150}}>
{ /* render Modal content */ }
</View.
);
}
Alternatively, if you need to interact with the UI behind the Modal you should use a Navigation.showOverlay
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
overlay: {
interceptTouchOutside: false // this make touch events pass through the invisible parts of the overlay
}
}
}
});
For more examples on Overlay used you can see code examples in the playground app
I want p:selectOneMenu width to be auto regarding to the parent cell not regarding to the values it has.
<p:panelGrid>
<p:row>
<p:column><p:outputLabel value="Value01" for="idInput01"/></p:column>
<p:column><p:inputText value="#{bean.input01}" id="idInput01" /></p:column>
<p:column><p:outputLabel value="Value02" for="idSelect" /></p:column>
<p:column>
<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter">
<f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="#{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>
</p:column>
</p:row>
</p:panelGrid>
What I've got :
What I'm expecting :
Note: I don't want to specify a fixed width.
My solution: autoWidth="false"
i overrode .ui-selectonemenu, .ui-selectonemenu-label to:
.ui-selectonemenu{
width: 100% !important;
}
.ui-selectonemenu-label{
width: 100% !important;
}
The only way I found is to use jQuery to initialize width at load time.
You can create simply a CSS class like this (just to be used as a futur selector) :
.full-width
{
}
And add it to your component :
<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width">
<f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>
Since you will need jQuery, you should add this inside your h:head if you are not already using PrimeFaces components that use it.
<h:outputScript library="primefaces" name="jquery/jquery.js" />
Here is the small script that initialize all p:selectOneMenu in the selector :
<script>
$(document).ready(
function()
{
$("div.ui-selectonemenu.full-width").each(
function()
{
$(this).css("width",$(this).parent().width());
}
);
}
);
</script>
you can add the value of width directly in the component to modify it, to avoid impacting other p: selectOneMenu existing in the page.
<p:selectOneMenu style="width: 100% !important">
...
</p:selectOneMenu>
I now have a proper fix for this.
Primefaces 6.0 now has a new field called autoWidth that by default is set to true, and you can set to false.
IF you do as some of the above responses say and set it to false, all you are doing is playing roulette with you app css.
By setting it to false, primefaces will leave it up to you to manage the width.
You can either have the width set on the selectOneMeny expliclitly by style attribute, or some css class in your application.
But this is not what this issue is about, this issue is about the fact that the default behaivor of not specifying any width to a drop down makes leads our drop downs to normally be way too small for the labels in there.
So what we actually want is for the autoWidth to work proplerly.
FInally, I looked at the component and at the renderer, and it is obvious the auto-width mechanism does not work in the backend side.
The backend side only builds some JSON like data that the primefaces javascript builder can use to properly tune on the browser the behavior of the widget.
If you loook at primefaces 6.0 source code, the bug is in META-INF\resources\primefaces\forms
Search for the code that says the following:
PrimeFaces SelectOneMenu Widget
In this javascript function hunt for the code chunk that says:
_render: function() {
if(this.cfg.autoWidth) {
In this section of code your bug is the following line:
this.jq.css('min-width', this.input.outerWidth());
Here, I applied the following patch that hopefully should work in geting the drop down box to be as fat as the largest label:
_render: function() {
if(this.cfg.autoWidth) {
// BEGIN: PATCHING
// ORIGINAL CODE:
// this.jq.css('min-width', this.input.outerWidth());
// BUGFIX:
// (a) compute the original min-with primefaces 6.0 would put on the root div
var primefacesBugWidth = this.input.outerWidth();
// (b) compute the length of the hidden select element with all the labels inside of it
var widthOfHiddenDivWithSelectLabels = this.jq.find('div select').width();
var widthOfTheDropDownTriangle = this.jq.find('.ui-selectonemenu-trigger.ui-state-default.ui-corner-right').width();
var widthOfLabelPlusTraingle = widthOfHiddenDivWithSelectLabels + widthOfTheDropDownTriangle;
// (c) we will use whichever length is longer
// in bug-fixed primefaces version the outerWidth should be computed correctly
// but this seems not to be the case
var maxWidthOfTwoPossibleOptions = primefacesBugWidth > widthOfLabelPlusTraingle ? primefacesBugWidth : widthOfLabelPlusTraingle;
this.jq.css('min-width', maxWidthOfTwoPossibleOptions);
// END: PATCHING
}
}
The idea of the code above is:
(a) look at the hidden div with all labels and get the width of that div
(b) add to that length the width needed for the primefaces triangle facing down
(c) compare the width we have computed to that that is suggested by primefaces and that seems to be way too small
NOTE:
To install the patch you have to copy all of the Primaces code for the SelectOneWidget.
Add it to a javascript file under your control.
Make sure you only run the compilation of your javascript file after the primefaces javascript file has been loaded.
Normally primefaces is being rendered at the HEAD.
So if you have you jasvacript as the last ement in the body you should be fine.
The patching is working fine for me.
THis is code I do not like to maintain however.
You can ID the element and change the style width through CSS. Make it 100% of its container.
If your p:selectOneMenu is in a DIV with an assigned width, I find setting style="width:100%;" on the p:selectOneMenu seems to work in my case.
The problem might be min-width, which is set in the rendered HTML. If that is your case, use a CSS selector fixed-width like this:
<p:selectOneMenu styleClass="fixed-width" ...
then define CSS
.fixed-width { min-width: 100% !important; }
That sets the width of the selectOneMenu widget to the width of the parent element. To have it work, parent elements's width should not be 'auto'.
Those who still got problem with selectonemenu may try this
.ui-selectonemenu {
min-width: 0 !important;
}
Perfectly worked for me.
You can use something like
style="min-width: 12rem"
Things go weird when i tried position a button in titleContent of ActionBar. Set both the "left" and "horizontalCenter" can't move my button.Code as below:
<s:titleContent>
<s:Button label="HELLO" left="50"/>
</s:titleContent>
How can I position a Button at the middle of this Actionbar??
The docs say that the default layout for the titleContent is HorizontalLayout. So 'left' and 'horizontalCenter' do not apply.
You can use the titleLayout property to use a different layout (BasicLayout) for the title content:
<s:titleLayout>
<s:BasicLayout />
</s:titleLayout>
You can also use css :
s|ActionBar
{
titleAlign: center;
}
I have a flowplayer that I am using with a few pictures below it. When you click on these pictures a dialog is created with an enlarged version of these pictures. The problem is the flowplayer will always be on top of the dialog.
I have tried setting the z-index of the dialog high and the flowplayer low, but it doesn't work.
Is there a method in flowplayer that will lower its z-index or allow for my dialog to be placed over it?
Edit Heres the flowplayer:
//Uses flowplayer to create player
$f('#rightVideoContent', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
//Creates a single clip for the flow player
clip: {
url: videoLocation,
autoPlay: true,
autoBuffering: true
},
plugins: {
controls: null
},
onLoad: function () {
//Do nothing here
}
});
And here is the div
<div id = "rightVideoContent" class = "VideoDiv"></div>
I use flowplayer-3.2.6.js as well
I think what you've missed is :
<param name="wmode" value="transparent" />
a bit more about wmode
edit: take a look at your code ... to embed a swf file you gotta have something like:
<object width="550" height="400">
<param name="movie" value="somefilename.swf" />
<embed src="somefilename.swf" width="550" height="400"></embed>
</object>
all you need to do is just add another <param ... after the first one
edit2: you should replace the second parameter ... instead of the url string put there
{src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', wmode: 'transparent'}
You probably need to embed the flash with wmode="transparent".
As in #locrizak's answer, you can also use wmode="opaque", which is better because it's less processor intensive.
These should help:
http://flowplayer.org/forum/2/10645
http://flowplayer.org/documentation/configuration/player.html#embedding
You need a wmode: "transparent/opaque" parameter on the flash object.
I had trouble with this and Flowplayer wouldn't add the wmode parameter no matter what i tried
I used this jQuery snippet and it solved it!
$('#videocontainerid object').prepend('<param name="wmode" value="opaque">');
or for every object:
$('object').prepend('<param name="wmode" value="opaque">');
see HTML Overlays in Flowplayer
example code:
flowplayer("player", {
src:"http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf",
wmode: "opaque" // This allows the HTML to hide the flash content
}, {
clip: {
url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv'
}
});