I've got a ToolBarButton floating right within a heading similar to the example given on the documentation for dojox.mobile.heading ( http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/Heading.html ):-
<div data-dojo-type="dojox/mobile/Heading" data-dojo-props='label:"Voice Memos"'>
<span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Speaker"'></span>
<span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Done",defaultColor:"mblColorBlue"' style="float:right;"></span>
</div>
Produces:
My issue is that while this is fine with a short title (e.g. Voice Memos as above), for longer titles on smaller width devices the toolbarbutton on the right is sacrificed and not shown at all.
I'd like to show something on the page if that isn't visible. Is it possible to detect the visibility of the right-floated toolbarbutton and if it isn't visible add something further down the page (e.g. a link)? And if so, how would I do it?
Using Dojox Mobile 1.9.2
One way to go would be to set the label by code, using a long or a shortened text depending on the actual screen size. Here's a rough implementation:
var heading = registry.byId("heading");
var adjustLabel = function() {
var dim = common.getScreenSize(); // dojox/mobile/common
var label = dim.w > 350 ? // adjust the value as needed
"This is quite a long label" : "Short label";
heading.set("label", label);
heading.resize();
}
adjustLabel();
connect.subscribe("/dojox/mobile/resizeAll", function(){
adjustLabel();
});
Live here: http://jsfiddle.net/adrian_vasiliu/3p64t/ (you can test it by resizing the right-side pane: the label adjusts itself automatically; the same would happen on a phone or tablet upon orientation change).
That said, I do not reproduce (with Dojo 1.9.2) the fact that, with your code as-is, the button on the right is not shown. You can try it here: http://jsfiddle.net/adrian_vasiliu/QYjY5/. I also tested it outside of jsfiddle by adding your piece of HTML into dojox/mobile/test_Heading.html - and it behave the same in Chrome/Windows, Chrome/Android and Safari/iOS.
Related
I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:
I almost use the same code as ScriptLab:
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
<PrimaryButton
style={{ margin: 'auto' }}
text="Open link in new window"
// tslint:disable-next-line: jsx-no-lambda
onClick={() => {
window.open(this.props.url);
}}
/>
</div>
);
Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.
Does anyone know how to amend the code to get the effect like Script Lab?
Edit 1:
I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js
Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?
On button width:
In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).
On font adjustments
For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.
The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
You can also try to minimize the FOUT by telling the browser to try to preload the font files that will be needed for the page (part of the reason why FOUT happens is that browser discovers the fonts very late) https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window.
width:280px;
Second Option: If you use min-width, the button width will decrease to a point.
Third Option: If you use max-width, the button width will increase upto a point.
Fourth Option: You can also use '#media' queries to customize the width according to size of the screen.
You don't want the button's text to wrap, so you'll need to change the font size, which you can do when you find that the button's height increases when the text wraps. I suggest that you create a invisible, but not 'display: none', possibly 'off-screen' version of the button so that the real button's font is changed after you know the right size is needed. Alternatively, what about an image or glyph instead of text, and a Title for the button text?
I am using jsreport with PhantomJS for making reports for bills/invoices.
I need to place a div element on the bottom part of some pages. It is the part of a bill that the cashier of a bank can cut with a scissor.
I tried different ways with CSS to do it but when jsreport renders, the result is not what I expect.
These two examples show what I need:
One page:
Two pages:
I made a very basic example here if someone wants to edit it:
https://playground.jsreport.net/studio/workspace/rJRuPJkfW/57
The javascript based solution:
You can find out the full height of the single page. You can also find out the real height of the document. These two values helps you to calculate the bottom of the last page. Then you can absolute position the cut area to the last page using js.
<script>
// magical page size number was only estimated based on very long pdf
// it differs based on the recipe and platform used to render
// windows phantomjs 1.9.8 = 1274
// linux/osx phantomjs 1.9.8 = 989
var pageSize = 1274
// the size of the area you want to cut
var cutDivHeight = 200
var numberOfPages = Math.ceil(document.height / pageSize)
// run debug to see the values
console.log(numberOfPages * pageSize - document.height)
// find out if the extra div fits to the last page space
if (numberOfPages * pageSize - document.height < cutDivHeight) {
numberOfPages++
}
// add the cut area
var watermark = document.createElement('div');
watermark.innerHTML = "CUT ME"
watermark.style.top = (numberOfPages * pageSize) - cutDivHeight
watermark.style.height = cutDivHeight + 'px'
watermark.style.width = '100%'
watermark.style['background-color'] = 'red'
watermark.style.position = 'absolute'
document.body.appendChild(watermark)
</script>
Demo here
https://playground.jsreport.net/studio/workspace/BJEMYu3bb/36
i think that you can achieve the desired design customizing the phantomjs footer with a fixed size and custom html, and adding custom page margins.
you can see a live example here: https://playground.jsreport.net/studio/workspace/BJEMYu3bb/31
take a closer look at the template's phantom options and the logic inside the footer to only be printed in the last page, also i'm not sure that it is going to work when you have content that move to another page maybe there is some kind of workaround that you will need to apply to have everything in place, but anyway this is a start.
I have noticed this for a while however that when using Lightswitch and setting properties to "Stretch to Container", that the screen sometimes appears to be over-stretched and moves items down to the next line, for example:
When pressing the "See My Projects Only" the buttons switch (so I hide this one and display the other option" using the below code:
if (screen.ChangeDefaultValue.count > 0) {
screen.ChangeDefaultValue.selectedItem = screen.ChangeDefaultValue.data[0];
screen.ChangeDefaultValue.selectedItem.HomepageProjectsDefault = false;
screen.DefaultOption = null;
myapp.applyChanges();
setTimeout(function () {
screen.Projects.refresh();
}, 100);
screen.findContentItem("SeeAllProjects").isVisible = false;
screen.findContentItem("SeeMyProjectsOnly").isVisible = true;
}
else {
}
This works perfectly, however as you can see in the 2nd image above, the button moves down below the parameter search box as if it has been overstretched. I have tried changing the margin and padding of the .msls-content however this error still occurs here and on multiple of my other pages.
Has anyone found a fix to this problem?
Further information:
I am using msls-2.5.3.css and is declared in the default.htm file
I have tried this https://social.msdn.microsoft.com/Forums/vstudio/en-US/fb1305c5-ac13-474e-8ae0-df74ebf12590/html-client-custom-control-stretch-to-container-sizing-bug-problem?forum=lightswitch
THE PROBLEM
this small block of code in the msls-2.5.3.css appears to be the issue however if I comment it out then other screens break. all of the padding in the height appears to disappear and they all overlap each other on the modal screens
.msls-clear {
clear: both;
}
In LightSwitch HTML, we can use column layout option to render the control in each column. By setting "stretch to container" property, column is only stretched to container size and not the control inside each column is stretched with container. Controls are properly rendered inside the container. Issue occurs due to the column width stretches when hide and show the content item and this is not related with component used in the page. Follow the below workaround solution while remove the content item dynamically by click on the button. Please remove the class ‘msls-clear’ on button click or apply clear: none to the class ‘msls-clear’.
this.element.parents(".msls-column").next(".msls-clear").removeClass("msls-clear")
Hope this will helps you..!
Thanks,
Francis
Im no expert in CSS but this appears to have fixed my issues:
.msls-clear {
clear: right;
max-width: 1850px;
}
all of the machines I have tested have a resolution of 1920 x 1080 so by reducing the width down slightly it will never over stretch the items.
I did originally comment out the clear: right; which worked in internet explorer, however I tested some Syncfusion controls in google chrome/firefox. I could not click on any of them and therefore had to add in the max-width.
If someone can propose a better solution I would be grateful but at least for now this works
I would like to customize the design (view) of the extension action button of my Chrome Extension.
I would like to know if it is possible to use html and not only a picture. I would like the button to show text and number. i would like to be able to update the text and number.
I did look it the happy if i could generate an image with the needed informations and change the default button icon. But i did not found anything.
In advance thanks
To create a dynamic browser action icon, use the HTML5 Canvas element; create a canvas, add images and/or text to it, then pass the canvas' image data to chrome.browserAction.setIcon.
Here's a small example (please note that this uses jQuery to create the canvas element):
$('body').append('<canvas id="myCanvas" width="19" height="19"></canvas>');
var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');
context.fillStyle = "blue";
context.font = "normal 9px Arial";
context.fillText("foo", 0, 19);
chrome.browserAction.setIcon({ imageData: context.getImageData(0, 0, 19, 19) });
Keep in mind that you only have 19x19 pixels to work with, so the font probably needs to be really small.
Depending on your needs, you could get creative with creating text as images and adding images to the canvas instead, and/or using chrome.browserAction.setBadgeText.
For further reading, see:
How can I write text on a HTML5 canvas element?
Drawing text using a canvas
I have a div at the top of my mobile application that is position:fixed so it will stay on the top of the browser (it scrolls away in ios 4 and lower which is fine). When an input is focused and brings up the keyboard, the div moves down to the middle of the page. See screenshots:
http://dbanksdesign.com/ftp/photo_2.PNG
Edit:
Here is a simplified test page:
http://dbanksdesign.com/test/
<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>
.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }
Unfortunately you are probably best off using absolute positioning for your fixed elements when working with IOS. Yes, IOS5 does claim to support fixed positioning, but it all falls down when you have interactive controls within that fixed element.
I had the same problem with the search box on my switchitoff.net site. In IOS5 the fixed header would jump down the page if the search box gained focus while the page was scrolled. I tried various workarounds, and the one I currently have is a <div> which sits over the search box. When this <div> is clicked the following occurs:
The page is scrolled to the top
The fixed header is changed to absolute
The <div> covering the search box is hidden
The search <input> is focused
The above steps are reversed when the search box loses focus. This solution prevents the header jumping down the page when the search box is clicked, but for a simpler site you are probably better using absolute positioning in the first place.
There is another tricky issue with IOS5 and fixed positioning. If you have clickable elements on your fixed area with body elements scrolled behind them, this can break your touch events.
For example, on switchitoff.net the buttons on the fixed header became unclickable when interactive elements were scrolled behind them. touchstart was not even being fired when these buttons where tapped. Luckily onClick still seemed to work, although this is always a last resort for IOS because of the delay.
Finally notice how (in IOS5) you can click on the fixed header and scroll the page. I know this emulates the way you can use the scroll wheel over a fixed header in a normal browser, but surely this paradigm doesn't make sense for a touch-UI?
Hopefully Apple will continue to refine the handling of fixed elements, but in the meantime it's easier to stick with absolute positioning if you have anything interactive in your fixed area. That or go back to IOS4 when things were so much easier!
Using the JohnW recomendation to use absolute instead of fixed I came up with this workaround:
First set up a bind to detect when the input is onFocus, scroll to the top of the page and change the element position to absolute:
$('#textinput').bind('focus',function(e) {
$('html,body').animate({
scrollTop: 0
});
$('#textinput-container').css('position','absolute');
$('#textinput-container').css('top','0px');
});
Note that I'm using the id textinput for the input and textinput-container for the div top bar that is containing the input.
Set up another bind to detect when the input is not on focus anymore to change the position of the div back to fixed
$('#textinput').bind('blur',function(e) {
$('#textinput-container').css('position','fixed');
$('#textinput-container').css('top','0px');
});
I've been using a similar solution for a bar fixed at the bottom of the page, the code posted should be working for a bar fixed at the top but I didn't test it
Modified version of pablobart's solution but without scrolling to top:
// Absolute position
$('#your-field').bind('focus',function(e) {
setTimeout(function(){
$('section#footer').css('position','absolute');
$('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
}, 100);
});
// Back to fixed position
$('#your-field').bind('focusout',function(e) {
$('section#footer').removeAttr('style');
});
The simple CSS:
section#footer
*{ position:fixed; bottom:0; left:0; height:42px }*
This solution works pretty well for me. All the code does is wait until the user taps on a text field, then changes the element identified by the 'jQuerySelector' parameter from a 'fixed' to 'static' position. When the text field looses focus (the user tapped on something else) the element's position is changed back to 'fixed'.
// toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
// find the input element in question
var element = jQuery(jQuerySelector);
// if we have the element
if (element) {
// get the current position value
var position = element.css('position');
// toggle the values from fixed to static, and vice versa
if (position == 'fixed') {
element.css('position', 'static');
} else if (position == 'static') {
element.css('position', 'fixed');
}
}
};
And the associated event handlers:
var that = this;
// called when text field gains focus
jQuery(that.textfieldSelector).on
(
'focusin',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
// called when text field looses focus
jQuery(that.textfieldSelector).on
(
'focusout',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
The reason the buttons are becoming unclickable is because they have actually scrolled invisibly with the content. They are still there, just not at the location they were originally, nor where you see them.
If you can guess how much the button has moved (based on how much the content has moved) you can click on the invisible button and it will function normally. In other words, if the content has scrolled by 50 pixels, click 50 pixels away from the button and it will work.
You can scroll the content manually (even by a tiny amount) and the buttons will again work as expected.
Just hide your fixed element on focus and then show it again on focusout. I bet your users don't need to see it when focused. I know this is not a solution but I think it is a better approach. Keep it simple.