The toast is displayed on top of the tabs. How can I make a tab on top of a toast?
The answer probably comes late, but in case somebody else will need to solve it:
HTML of ion-toast looks like this:
ion-toast DOM
There are:
ion-toast: covers whole page as invisible wrapper for toast message itself
.toast-wrapper: which represents the toast message itself, positioned within ion-toast
.toast-wrapper is inside of Shadow DOM and doesn't have part attribute set, so we can't manipulate with it.
But we can manipulate ion-toast element itself. So what you can do it to adjust it's size, so .toast-wrapper will be rendered at different place.
For example like this:
ion-toast {
height: calc(100% - 70px);
}
You can try overwriting this class in your scss file.
.toast-ios,.toast-md {
.toast-wrapper {
&.toast-bottom {
bottom: 46px;
}
}
but you can put out of the scss page
for example:
page {
}
.toast-ios,.toast-md {
.toast-wrapper {
&.toast-bottom {
bottom: 46px;
}
}
}
Related
Demo
I have 2 + 5 blocks here, in small screen, each panel in blocks are in full width.
But in large screen, blocks are in 3:3:3 or 6:3. I want them all in a single row.
each section is contained in <div class="sapUiRespGridSpanL4 sapUiRespGridSpanM6 sapUiRespGridSpanS12 sapUiRespGridSpanXL3">
How to change it to class="sapUiRespGridSpanL12 sapUiRespGridSpanM12 sapUiRespGridSpanS12 sapUiRespGridSpanXL12" ?
I've tried to add layout in Panel, but not working.
Refrence:
sap.uxap.ObjectPageLayout Documentation
layout of blocks, blocks are in the same color, hard to specify
Finally after 1.5 hours figured out
Reason: Blocks will have to be extended from BlockBase to apply columnLayout.
Extending the BlockBase:
sap.ui.define(["sap/uxap/BlockBase"], function (BlockBase) {
"use strict";
var BlockPanel = BlockBase.extend("sap.uxap.sample.ObjectPageSubSectionSized.blocks.BlockPanel", {
metadata: {
/* no additional views provided */
}
});
return BlockPanel;
});
Then create a view and controller using the above new ui5 extended control. Use that in your page with columnLayout
xmlns:sample="sap.uxap.sample.ObjectPageSubSectionSized.blocks"
...
...
<uxap:blocks>
<sample:BlockPanel columnLayout="4"/>
</uxap:blocks>
columnLayout can't be applied if you don't extend block base. (which is really pathetic design). Nevertheless, values range from 1-4 and "auto".
Created working plnkr here
How to build custom SAPUI control?
You can wrap the target controls up with sap.uxap.BlockBase[API]. BlockBase controls are intended to be used inside sap.uxap.ObjectPageSubSection (hence the name <blocks>) and support customizing the grid spans with the property columnLayout.
Here is a demo: https://embed.plnkr.co/lSrDk9/?show=view%2FHome.view.xml,preview
<uxap:ObjectPageSubSection>
<block:MyBlock columnLayout="4"/>
<block:MyBlock columnLayout="4"/>
</uxap:ObjectPageSubSection>
Provide a not elegant, but very fast way: Overwrite CSS
<uxap:ObjectPageSubSection class="fullWidthPanel">
/* CSS specificity */
.fullWidthPanel .sapUiRespGrid.sapUiRespGridHSpace1 > div {
width: 98.88888889%;
width: -webkit-calc(100% - 1rem);
width: calc(100% - 1rem)
}
Can the navigation between tabs be customized to as in the navcontainer i.e. while selecting tabs the view should scroll and change from left to right like swipe navigation with new page as in navcontainer.
You could achieve the slide in effect rather easily by adding the following CSS to your application
#keyframes slidein {
from {
right: -100%;
}
to {
right: -6px;
}
}
.sapUiTabPanel {
overflow:hidden;
}
.sapUiTabPanel > * {
animation: slidein 500ms;
position: absolute;
}
Note that you may need to add CSS with vendor prefixes depending on which browsers you are supporting.
To achieve the slide out of the current displayed tab is a bit tricky, one possible way this could be achieved is with the following code added to somewhere like the onInit method of your controller
oTabStrip1.attachBrowserEvent("mousedown",function(oEvent){
var oTarget = oEvent.target;
if(oTarget.className==="sapUiTabClose"){
return;
}
var iIdx = oTabStrip1.getItemIndex(oTarget);
if (iIdx > -1) {
if ((iIdx !== oTabStrip1.getSelectedIndex()) && (oTabStrip1.getTabs()[iIdx].getEnabled())) {
oEvent.stopPropagation();
oEvent.preventDefault();
jQuery.each(
oTabStrip1.getTabs()[oTabStrip1.getSelectedIndex()].getContent(),function(i,o){
var sAnimateLeft = (o.$().innerWidth() * -1) + "px";
o.$().animate({left:sAnimateLeft},500);
});
setTimeout(function(){
oTabStrip1.selectTabByDomRef(oTarget);
},250);
}
}
});
The above is assuming oTabStrip1 is the instance of your tabstrip control. Although it's often not good practice to modify the DOM directly within UI5 applications, in this case it's probably safe as the content of the displayed tab is removed and replaced with the clicked tab content, so all we are doing is delaying this until the slide out animation is complete.
You can see a working example at http://jsbin.com/vukibi - the code has been taken directly from the tabstrip example with the above CSS and JS added
Problem
Width of the <textarea> is defined by CSS class, for ex.: wMax or wDefault. In first case it is 100%, in the second, lets say 200px. By default TinyMCE converts everything to fixed width in pixels. Ofcourse I can set width:100% inside tinyMCE.init(), but that will not cover textarea's with wDefault / fixed with.
What I need
I need TinyMCE width to behave the same as original, % or px depending on it's CSS class.
If I could find a reference to the original textarea element within tinyMCE.init() procedure, then I could read CSS class from it, and set width: (textarea.hasClass('wMax') ? '100%' : null) or something like that
I am aware of the getElement() function, which gets me exactly that textarea. But where do I run it from? tinyMCE.activeEditor is null within init().
I'm currently still using TinyMCE 3, but it would be nice if you could answer this also for 4.x version, if there is any difference ofcourse...
Found the solution myself. Sharing.
Answering my own question in the title: It's not possible to refer to the textarea within init() procedure directly, because it does not run for each tinyMCE instance. It runs only once. But: TinyMCE has a customizable setup function, which does run for every instance and has all required references to solve the mentioned problem.
With the following code:
tinyMCE.init({
// ... your settings here ...
setup: function(ed){
if(ed.getElement().hasClass('wMax')){
ed.settings.width = '100%';
}
}
});
Any textarea with CSS class 'wMax' (replace with your own) will be replaced by TinyMCE instance having 100% width. All others will have a fixed width, equal to the width of the textarea at the moment of initialization. You can expand this approach with any width, like wHalf width:50% etc.
Note: .hasClass() function is a part of Mootools JS library. Replace with another if you use a different library.
I don't know if this will lead you into the right direction. I use this code to adjust the iframe height to fit the entered content. You could tweak it a bit to adjust its height and width to your needs (you will need to get the textarea by $('#' + ed.id) onInit.
Here is the function. Basically it changes the style attributes explicitly of the editor iframe
resizeIframe: function(frameid) {
var frameid = frameid ? frameid : this.editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},
I am implementing multiple themes in our GWT applications.
The problem is when a DataGrid is constructed, I can't find a way to change the style resource that has been passed to it. Does anybody know how to solve the problem. Or on every theme change, do we have to reconstruct the grid?
Any other new idea to solve the problem (having multiple themes on these widgets) is appreciated.
Thanks.
You could use uibinder.
At this page
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Programmatic_access,
search for the section
Programmatic access to inline Styles
However, you need to be familiar with uibinder.
I was able to do this using -
cellTable.setRowStyles(new RowStyles>() {
#Override
public String getStyleNames(Map<String, String> row, int rowIndex) {
if (rowIndex % 2 == 0) {
return "cellTableEvenRow";
} else {
return "cellTableOddRow";
}
}
});
Since, I had to provide the user 3 color themes, I used 3 style sheets for each color and specified the below style with different colors in each style sheet.
.cellTableEvenRow {
background: #fffff !important;
}
.cellTableOddRow {
background: #E9FDE4 !important;
}
Hope it helps!
I am using a TabLayoutPanel in GWT and I want to have the last tab show up on the right side of the page. Is it possible to do this?
Common idea:
set tab container width to "auto" instead of predefined "16384px"
set "float: right" css property to last tab
move last tab to firts position
public void onModuleLoad() {
.....
// init TabLayoutPanel
.....
Widget rightTab = tabPanel.getTabWidget(0).getParent();
DOM.setStyleAttribute(rightTab.getElement(), "float", "right");
Widget tabBar = rightTab.getParent();
tabBar.setWidth("auto");
tabPanel.selectTab(1);
}
If you want to align all tabs to right try this:
.gwt-TabBar .gwt-TabBarFirst {
width: 100%;
}
.gwt-TabBar .gwt-TabBarRest {
width: 4px;
}
.gwt-TabBar .gwt-TabBarFirst-wrapper {
width: 100%;
}
Short Answer - NO.
I drilled down to the source at GWT 2.3 and AFAIK it easier to build your own composite from TabBar and StackLayoutPanel than start fighting this implementation.
Just to save you an effort it cannot be centered easily too.
I am sorry it is like this.
it all hardcoded...
private static final int BIG_ENOUGH_TO_NOT_WRAP = 16384;
private final FlowPanel tabBar = new FlowPanel();
...
tabBar.getElement().getStyle().setWidth(BIG_ENOUGH_TO_NOT_WRAP, Unit.PX);
Why not pure CSS solution ? It is good practice to separate your code from design.
.gwt-TabLayoutPanelTabs {
width: auto!important;
}
.gwt-TabLayoutPanelTab {
float: right;
}
Remember that your tabs will come in reverse order (first added will be first on the right)
It is possible and will be very easy if you create your own tab.Just create an png image of tab shape (which is having rounded corner at top).Write one css rule.Take one FlextTable and apply that css to each cell that will be your tabs and then add that FlexTable into another mainTable. So in your mainTable in first row there will be tabFlexTable and in second row whatever you want to display after selecting particular tab.So for the first row apply horizontal alignment to right. This the way and same way I am also using in my professional projects.