Trying to style a button using Pixate and MvvmCross in a Xamarin application. The class selector does not seem to work. You can see that the main button class does not set the font color to yellow and the background of the button is not blue
Has anyone worked with pixate and MvvmCross and found a solution to this issue?
defalut.css
button {
font-size: 30px;
border-radius: 15px;
border-width: 2px;
border-color: lightgray;
}
/* Cannot seem to get class selector to work with mvvm cross */
.mainbutton {
color: yellow;
background-color: blue;
}
main.xaml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<Button
android:text="Test One"
android:layout_width="match_parent"
android:layout_height="wrap_content"
class="mainbutton"
local:MvxBind="Click CommandOne" />
</LinearLayout>
Related
I would like the view port on Safari mobile to prevent horizontal scrolling and also hide any horizontal overflow content. The reason being is that I have some animations on a website that move content off screen. As a work-around I can perhaps not animate but I would like to get it working on mobile.
When viewed on an iPhone 6 using Safari the code below allows horizontal scrolling and still shows the overflow content.
I see four posts on the subject but the suggestions for use of overflow: hidden are not working.
overflow-x: hidden, is not working in safari
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
Mobile Safari Viewport - Preventing Horizontal Scrolling?
Hiding the scrollbar on an HTML page
Place this code in index.html on a server so the page can be viewed on an iPhone:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
<style>
html {
overflow-x: hidden;
}
body {
background-color: black;
overflow-x: hidden;
}
#content {
width: 100%;
overflow-x: hidden;
}
.tagline {
color: white;
font-size: 1.8em;
font-style: italic;
position: absolute;
white-space: nowrap;
overflow-x: hidden;
top: 10%;
left: 80%; /* This position is off screen on purpose */
}
</style>
</head>
<body>
<div id="content">
<span class="tagline">Testing span reaching outside edge of window on mobile</span>
</div>
</body>
</html>
If you position:fixed; the #content it would prevent it from scrolling:
#content {
width: 100%;
overflow-x: hidden;
height: 100%;
position: fixed;
}
I have a newbie React Native question. I am trying to use a WebView within a React View class but I am unable to get rid of the selection menu. I don't know if "selection menu" is the correct term, but it shows up when I press and hold down the mouse/finger.
I have tried browsing directly to the HTML page on an iPhone, and the "menu" does not pop up there.
React Native class:
var React = require('react-native');
var {
WebView
} = React;
var TestWebView = React.createClass({
render: function() {
return (
<WebView url="http://url/index.html" />
);
}
});
module.exports = TestWebView;
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
body {
background: pink;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: transparent; /* mobile webkit */
}
</style>
</head>
<body>
</body>
</html>
The result:
If I remove the second styling block, I get the following result:
So it seems the styling has some effect but it does not completely remove it.
Any ideas?
I'm using React Native 0.11.4.
I have some issues with my Phonegap app concerning the UI. When I view it in my Desktop browser it looks like this(the way it shoul be):
But when I implement it in Phonegap (on iOS) it looks like this:
This is my html:
<div id="page1">
<div id="formScales">
<div class="formContent" id="noise">
<p>Noise</p>
<input type="button" id="nbtn1" value="Noisy" />
<input type="button" id="nbtn2" value="Medium noisy" />
<input class="active" type="button" id="nbtn3" value="Neutral" />
</div>
[...]
</div>
And the CSS:
[...]
#formScales {
position: relative;
/* otherwise the float of the child gets it out
of the document flow */
overflow:auto;
}
input {
color: #3B444B;
width: 100%;
text-decoration: none;
text-align: center;
padding: 8px 12px;
margin-top: 5px;
font-size: 12px;
font-weight: 700;
font-family: helvetica, arial, sans-serif;
border-radius: 2px;
border: 1px solid #606060;
background-color: rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.active {
background-color: #99CCFF !important;
border: 1px solid #606060;
}
#noise {
float: left;
width: 31vw;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 7px;
background-color: rgba(255, 204, 204, 0.3);
}
My guess is that it has something to do with the Objective-C UIWebView class used by iOS... I would be happy about any advice on how to fix this - also what would be best to test the UI without always having to rebuild the PG app!
Thanks in advance!
adding "webkit-appearance:none" to input did the trick!
input {
/* webkit-appearance:none to override standard button design! */
-webkit-appearance: none;
[...]
}
Whether your page contents are overlapping on status bar of i-phone? Actually I unable to see it in screenshot. If it is, then you can do this in your config.xml. I was having same issue, I solved it by adding these lines to config.xml
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="ios-statusbarstyle" value="black-opaque" />
You can test UI on android emulator, without building app on PG-build, but this will not ensure you that you will get correct results for iOS also, I mean if you tested UI on android emulator, then it isn't guaranteed that it will work well on i-phone. So I will recommend you to use PG-build
I'm using the native date and time pickers with type=date and type=time for the mobile version of a website I'm working on. The input fields are not respecting the css I have, though.
Desktop:
iOS devices:
Essentially I need the two date and time inputs to fill ~50% of the width. This is the html and css I'm using:
<div class="arriveWrapper">
<div class="arriveDateWrapper fieldWrapper">
<input class="arriveDate" name="arriveDate" type="date" placeholder="What date?" />
</div>
<div class="arriveTimeWrapper fieldWrapper">
<input class="arriveTime" name="arriveTime" type="time" placeholder="What time?" />
</div>
<div class="clear"></div>
</div>
.arriveDateWrapper {
width: 49%;
margin-right: 2%;
float: left;
position: relative;
}
.arriveDate {
width: 100%;
height: 28px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.arriveTimeWrapper {
width: 49%;
float: left;
}
.arriveTime {
width: 100%;
height: 28px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If anyone can tell me how to get the placeholders to show up when using the native date/time pickers that would be great, as well.
Thanks!
Just add this to your styles
.arriveDate, .arriveTime {
-webkit-appearance: none;
-moz-appearance: none;
}
The reason behind this is that IOS device render by default the inputs using the IOS buttons
To avoid losing any style elements applied to other input boxes, use textfield instead of none.
.arriveDate, .arriveTime {
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
Also, if you just want to make all the date fields appear like textboxes but still work like date fields...
input[type="date"]
{
display:block;
-webkit-appearance: textfield;
-moz-appearance: textfield;
min-height: 1.2em;
}
Does anyone know how to make CSS link hover properties work for links that don't link to another html page or anchor?
For example this works:
Page1
Link
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
But the moment I change the link to something that's not an anchor or an html file, let's say a mailto:
<a href='mailto:bla#bla.com'>Send email</a>
It no longer changes color when I hover over the link.
Why is this?
You are overriding your own styles. Try
<style type="text/css">
a:link, a:visited
{
color: #555;
text-decoration: none;
}
a:hover, a:visited:hover
{
color: #fff;
text-decoration: none;
}
</style>
You don't need to do a:link, just a will do fine when defining your anchor tag style, however, if for some reason you do need it then you need to define your hover style more specifically than your link style.
a:link:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
or
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a,a:visited{
color:#555;
text-decoration:none;
}
will fix your problem