Develop Reference

Page breaks in SAPUI5

What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.

You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)

The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}

bootstrap-multiselect options too long, overruns container

I am using David Stutz's Bootstrap-Mutliselect. I have used the following code to hook it up to all the select elements in my page:
$(function () {
$("select").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ multiple: false }
);
$("[multiple]").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ enableCaseInsensitiveFiltering: true }
);
});
The code above works perfectly. The problem is that options with long text values overruns it's container boundaries as per the following screenshot, instead of wrapping over to a new line.
How can I fix this? Preferably if there is a way to do it by simply altering my above .js code that would be a bonus.

By default, nothing should be applying a width to the .multiselect-container, so it will take up as much room as it needs in order to display all the items on a single line:
If however, something is applying a width to the .multiselect-container, you'll encounter the problem you identified:
The problem is that bootstrap multiselect uses a dropdown-menu to which the bootstrap library applies the following code:
.dropdown-menu>li>a { white-space: nowrap; }
In order to fix this, we can return white-space to it's normal wrapping mode with the following css:
.multiselect-container > li > a { white-space: normal; }
Demo in jsFiddle
Couple more notes:
maxHeight takes the number of pixels, so passing in 5 will make the control only 5px high. You should pass in something like maxHeight: 200
enableCaseInsensitiveFiltering does the same thing as enableFiltering so you don't need both. Decide whether you want case sensitivity or not and then set either one to true
Update with further explanation
#user2105811, You do not need to target the label specifically and you do not need to use !important here's the HTML structure and CSS that is generated for this solution:
Notice that white-space is always inherited from the parent, so targeting label will do the same thing as targeting a, but will address the problem at it's root.
The original bootstrap code has the same degree of specificity as the selector being used to fix it. Meaning it will override it as long as your custom CSS is placed after the bootstrap css which should always be the case. If it's not working, I suspect you are not doing this.

Your suggestion to use:
.multiselect-container > li > a {
white-space: normal;
}
doesn't work. Instead I added the label tag to the CSS and set it to !important. Now it works.
.multiselect-container > li > a > label{
white-space: normal !important;
}

Can I use JQuery with inline html? If so how?

I learned html and css a week ago. I completed my first project only to find that a div tag I used was not resizing to mobile formats. I have done some research and it seems the answer may reside with JQuery or .JS. I am working within a contained environment, Wordpress.com, and I don't know Java Script yet, but I am familiar with if then statements from studying logic for years.
So I effectively have two problems:
Can I use JQuery with inline html: no css?
How do I do it?
I know I am way off here. I am in the process of going through a .JS tutorial on codeacademy, but I am not finished.
Just thought I would try for advice here. I may not even be in the ballpark!
Here is my div tag and here is what I attempted:
<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>
$(window).resize(function() {
if ($(this).width() < 951) {
$('.divIWantedToHide').hide(<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>);
} else {
$('.divIWantedToHide').show(<div style="width:450px;height:5px;background-color:#FFFFFF;"></div>);
}
});

Javascript is kind of over-kill for this kind of thing.
I would suggest using CSS media queries.
Paste this in and it should work just fine :)
<style>
#YourDiv{
height:5px;
background-color:#FFFFFF;
}
#media only screen and (min-width:951px){
#YourDiv{width:950px;}
}
#media only screen and (max-width:950px){
#YourDiv{width:450px;}
}
</style>
<div id="YourDiv"></div>
Instead of having your style defined in the div tag, your div now has a unique name (an id) that can be styled separately. This is incredibly useful, and most would argue necessary, once you start building more complicated pages. The #media tags do basically the same thing as your if statements, where min-width:951px will set the style when your window is AT LEAST 951px and max-width:950px sets the style when your window is AT MOST 950px. The rest of the styles that don't change are set above ONE time because they are the same regardless of window size.
And now, just for fun I'll show you how to do it in pure Javascript as well:
http://jsfiddle.net/AfKU9/1/ (test it out by changing the preview window size)
<script>
var myDiv = document.getElementById("myDiv");
window.onresize = function(){
var w = window.innerWidth;
if (w > 600){
myDiv.setAttribute("style",'position:absolute;height:50px;background-color:#CCC;width:400px;' )
}
else{
myDiv.setAttribute("style", 'position:absolute;height:50px;background-color:#333;width:100px;' )
}
}
</script>

$('.divIWantedToHide').hide() will hide the div !!
In order to apply css to this div you need to use css:
$('.divIWantedToHide').css('width':'950px','height':'5px','background-color':'#FFFFFF');
If you want to append any div and apply css to it then use append/html
$('.divIWantedToHide').append('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');
or
$('.divIWantedToHide').html('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');

No, at wordpress.com you won't be able to use inline JavaScript. Not in regular posts using the HTML editor nor using the Custom Design upgrade that only includes a CSS editor.
Maybe you'll benefit from the following:
Preprocessor
WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information. You can select which syntax you would prefer to use at the bottom of the Appearance -> Customize -> CSS panel.

If you want to resize or apply another style to some elements adapted to the device screen size, yout can just use the #media css property.
#your_div_id {
width: 950px;
/* ... */
}
#media (max-width: 38em) {
#your_div_id {
display:none;
}
}

You are trying to hide a div with class '.divIWantedToHide'. But your div does not have any class.
So you should add to your div the class:
<div class="divIWantedToHide" style="width:950px;height:5px;background-color:#FFFFFF;"> </div>
And then, you can show and hide it like here:
$(".divIWantedToHide").hide()
$(".divIWantedToHide").show()

Use Javascript to Change Display Styles (CSS) Without Affecting Print Styles

I have a web application that utilizes a separate print stylesheet to control how the page looks when it comes out of the printer. That was working wonderfully until I recently made some Javascript enhancements to the site. One of these enhancements allows the user to freeze the page header and navigation, as well as table headers. The Javascript behind this does some CSS trickery to freeze the elements on the screen. Unfortunately, applying position: fixed to my header (for example) causes it to print on every page, and this is not a desired effect. How can I use Javascript to tweak element styles on the client-side without affecting the print style?
#media print { #foo { color: blue; } } /* Print definition */
#media screen { #foo { color: green; } } /* Display definition */
document.getElementById('foo').style.color = 'red'; /* Overrides both! */

Instead of changing properties on your elements with this:
document.getElementById('foo').style.color = 'red';
append a new <style> element, for example:
$('<style>#media screen { #foo { color: green; } }</style>').appendTo('head');
It would be better to concatenate all your required changes into one <style> element, if possible.

Add !important to your print rules.

You can try this
#media print { #foo { color: blue !important; } }
The problem is that javascript .style.something, edits the inline css of the element, therefore it will override the normal css class/id rules.
Or you can, work with classes.
document.getElementById('foo').className = 'redText';
and keep the .redText in your regular css file (not the print one), much much better than filling your print css with !important rules.

No good solution! What I ended up doing is utilizing the onbeforeprint and onafterprint functions in IE (I am in the position here that we only have IE users) to "unfreeze" and "refreeze" the elements...
window.onbeforeprint = function() {
document.getElementById('foo').style.position = 'static';
}
window.onload = window.onafterprint = function() {
var el = document.getElementById('foo');
// Get element position and size
// Set left/top/width/height properties
// Set position to fixed
el.style.position = 'fixed';
}

The proper solution is not to poke styles onto nodes, but to instead tie your screen-specific style tweaks to css classes that only affect your screen rendition of things:
#media screen { .freeze { position: fixed; } } /* Display-only definition */
+
document.getElementById('foo').className = "freeze";
As a bonus, this also makes it easy to change tons of styles with just one line of js, which makes things faster and easier to maintain, too.

counteracting existing styles

I have a div with a padding, created and styled by Javascript.
This div is created on a page with the following CSS rule:
div {
width: 100%;
}
This messes up, as it changes the width of my created div to what it naturally would be PLUS its padding (so I end up with buttons outside of the div borders). I can't statically set div widths because they depend on the content. So how can I overwrite this rule and bring it back to "default width"?

You need the following CSS:
div { width: auto; }
Since the CSS rule is applied through JavaScript, which causes it to be an inline style, you may have to use !important to make sure the new rule has a higher specificity so you can overwrite the old one.
div { width: auto !important; }
Of course, it would be even better if you could just edit the JavaScript so it wouldn’t add the style to the div anymore.