I want to make the tab bar transparent and actionbar transparent over a swipelayout or page. The action or tab bar must sit on top of the page like in two layers
I have tried using css to make transparent but its doesnt become transparent over the page.
<ActionBar title="Name" backgroundColor="#00000000"></ActionBar>
<TabView androidTabsPosition="bottom" selectedTabTextColor="white">
<page-router-outlet
*tabItem="{iconSource: getIconSource('test')}"
name="homeTab">
</page-router-outlet>
<page-router-outlet
*tabItem="{iconSource: getIconSource('test2')}"
name="locationTab">
</page-router-outlet>
<page-router-outlet
*tabItem="{iconSource: getIconSource('test3')}"
name="searchTab">
</page-router-outlet>
</TabView>
transparent actionbar over the page
Example
Style page / root layout with a background image or color of your choice
.page {
background: url(https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962__340.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Android
Set ActionBar's backgroundColor to transparent
Upon loaded event adjust Page elements unit system
onLoaded(event: EventData) {
const layout = <GridLayout>event.object,
page = layout.page;
if (page.android) {
page.android.removeRowAt(0);
}
}
Adjust padding of root layout so the content will not overlap with ActionBar
iOS
Adjust ActionBar attributes upon loaded event
onActionBarLoaded(event: EventData) {
const actionBar = <ActionBar>event.object;
if (actionBar.ios) {
(<any>actionBar).updateFlatness = function (navBar) {
actionBar.ios.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
actionBar.ios.translucent = true;
};
}
}
Playground Sample (Compatibility verified against v5.x)
Related
Is there any way to remove the top border of a TabView on iOS?
I've tried adding border-width: 0; and border-color: transparent; to the TabView but neither of these seem to have an effect.
You have to set clipsToBounds to true on UITabBar.
HTML
<TabView (loaded)="onTabViewLoaded($event)">
TS
onTabViewLoaded(event) {
if (event.object.ios) {
event.object.viewController.tabBar.clipsToBounds = true;
}
}
I need my page to adapt from portrait to landscape for Iphone X without having to reload the page.
Here are the media Queries I use:
// Screen size variables
$screen-sm-min: 576px; // Small tablets and large smartphones (landscape view)
$screen-lg-min: 992px; // Tablets and small desktops
//$screen-lg-min: 1024px;
$screen-xl-min: 1200px; // Large tablets and desktops
// Mixins
#mixin xs { #media (max-width: #{$screen-sm-min}),
(min-device-width : 375px) and (max-device-width : 667px),
(min-device-width : 414px) and (max-device-width : 736px),
(min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3)
{#content;} } // Tiny devices
#mixin md { #media (max-width: #{$screen-lg-min}), (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-height : 1024px) and (max-device-width : 1366px)
{#content;} } // Medium devices
And here is a link to the page:
http://dev2.lemeilleurducbd.com/location_etu/home.html
I have looked on Google but I could not find an answer to this issue.
Thanks for your help
CSS solution
You can use orientation in media queries.
landscape rules apply when the browser window width is greater than height:
#media (orientation: landscape) {
...
}
portrait rules apply when browser window height is greater than width:
#media (orientation: portrait) {
...
}
JS solution (Source)
Note: Unfortunately this feature is not supported in safari.
You can listen to the orientationChange event for when the orientation changes, and read screen.orientation when you need to know the current orientation.
screen.addEventListener("orientationchange", function () {
console.log("screen orientation: " + screen.orientation);
});
Another option would be to listen to window resizes and compare the ratio of width and height.
if (width/height > 1) { //landscape } else { portrait }.
I recommend throttling the window resize listener.
I put a piece of javascript on the body tag, that was adapting the body width according to the windowWith, this is what was preventing to go on landscape mode without reloading the page..
I want to have a border on some of the slots in my GridLayout.
If I set the border on the element within the slot (with the help of a style name), the border is not drawn all the way.
How can I access the enclosing gridlayout-slot, so that every other slot has a border?
I recommend you put a CssLayout in the GridLayout and style that like this:
final GridLayout gridLayout = new GridLayout(2, 2);
// the size of the grid layout has to be defined, otherwise you can't place a relatively sized component inside it
gridLayout.setHeight("400px"); // example height
gridLayout.setWidth("100%"); // example width
final CssLayout border = new CssLayout();
border.setStyleName("myCellStyle");
// make the layout fill the whole slot
border.setSizeFull();
// wrap your content with that border layout
border.addComponent(new Label("forth"));
gridLayout.addComponents(
new Label("first"),
new Label("second"),
new Label("third"),
border);
In your mytheme.scss write your border style:
.myCellStyle {
border: 10px solid red;
}
This is the code I have:
<a class="image_show" href="#"></a>
.image_show:
background-image: url("/images/img.png");
display:block;
}
. image_show:hover {
background-image: url("/images/img2.png");
display:block;
}
The above solution doesn't display the image unless there is text in there. How can I show my image without text in the anchor tag?
Do
.image_show {
display: block;
width: 123; // width of your image
height: 123; // height of your image
}
You could also use inline-block. This more closely resembles how a normal image would fit in a page.
I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.
I would just like to clarify that I have the media queries set up correctly before I change out all my background images.
I have doubled the size of all my background images and perfixed
them with the "#2x" naming convention. e.g icon-user#2x.png.
I have added a jQuery function into my code to swap out the images with the CSS class of hires.
In my CSS document I have a normal CSS class for a background image.
Normal CSS query
.side-nav .arrow {
background: url(../images/arrow-nav.png) no-repeat top left;
width: 5px;
height: 8px;
display: inline-block;
margin-left: 10px
}
Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?
/* All Retina Ready devices larger than 1.5 pixel ratio */
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
-webkit-background-size:5px 8px;
-moz-background-size:5px 8px;
-o-background-size:5px 8px;
background-size:5px 8px
}
}
jQuery Code
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
/* loop through the images and make them hi-res */
for(var i = 0; i < images.length; i++) {
/* create new image name */
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "#2x" + imageType;
/* rename image */
images[i].src = imageName;
}
}
});
Thank you
As long as there is some form of scaling taking place, like when you declare
<meta name="viewport" content="width=..."> (for android/ios/blackberry/WP8)
or
#ms-viewport {width: ... ;} (for non-WP8 IE10)
or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px
then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI
this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
}
}