i have a problem with the input from ionic framework. input seem to fit to mobile device / small screen device, it cannot stretch to fit to medium or large device view port. is it deliberately or a bug there? and how make it fit to any screen at least to medium screen as i am writing an apps for tablet or ipad.
this pen explained the case, try to type along words / sentences in the your own content box.
input code
<input type="text" placeholder="Your own content" ng-model="customQuote" required>
It seems to me you find the bug. You should patch ionic.css:
.item-input-inset .item-input-wrapper input {
padding-left: 4px;
height: 29px;
background: transparent;
line-height: 18px;
// you should add the following:
box-sizing: border-box;
width: 100%;
}
or make your own style and add to your input
Related
I have a textbox that is not getting focus when in landscape mode for iPhone 6 plus only. Its working for all other versions.
Even if its a simple html page, it doesn't work.
Code:
<html>
<body style="margin:0; width: 250px; height: 500px;">
<input type="text" id="txt1" autofocus style="border: 4px solid red; width: 90%; height:50px;">
Any help would be appreciated. Thanks in advance.
I'm seeing strange behavior on an iphone 4s device when it comes to specifying sizes of a div in pixel units.
My iphone is 980 pixels wide in portrait orientation.
As a first test, I just created a plain html implementation. This works exactly as expected - the div takes up the entire width of my screen, but is no wider:
<body>
<div style="width:980px; height: 30px; background-color: red;"></div>
</body>
Now in GWT, I try the same thing (at least I think it's equivalent):
FlowPanel fp = new FlowPanel();
fp.setWidth("980px");
fp.setHeight("30px");
fp.getElement().getStyle().setBackgroundColor("red");
RootPanel.get().add(fp);
but when loaded on my iphone, the div appears to be twice the width of the screen. Is GWT doing some kind of scaling automatically? I know the iphone 4S is a retina display, therefore it has a 2x pixel ratio. Is it something related to that?
I can't examine the output html on my iphone, but when I look at the GWT version in firefox, I can see GWT is indeed outputting the 980px size I specified:
// What GWT outputs - looks the same as my hand-written version:
<div style="width: 980px; height: 30px; background-color: red;"></div>
So why would the GWT version render the div 2x as wide?
------ Update ----------
As Woojah recommended, I tried via a style definition:
.sanityTest {
width: 980px;
height: 30px;
background-color: green;
}
FlowPanel fp = new FlowPanel();
fp.setStyleName("sanityTest");
but still the same behavior - on the iphone 4s screen, the div is twice the width of the display. The dom looks exactly the same as in my handwritten version. The size behaves correctly on a non-retina device.
Thank you
I would recommmend you try the following:
do:
getElement().getStyle.setWidth(x, Style.Unit.PX);
getElement().getStyle.setHeight(y, Style.Unit.PX);
That is the equivalent for your
style="width:980px; height: 30px; background-color: red;
Another alternative is to defina inside your css stylesheed a class like
.yourCss
{
width:980px; height: 30px; background-color: red;
}
and then in your code do flowPanel.setStyleName("yourCss");
im having some problems to understand how to render a web page in a decent way on the iPhone, i think the problem have to be releated with the margin-left but i have no idea how to solve the problem in order to have a good render on pc and mobile.
Here is how it looks on a pc browser:
Sorry for so many white spaces, is just to clarify the div is centered. And this is how its looks on my iPhone:
Even if a move the page with my finger im not abble to see the left side of the blue ribbon, it is just "out of the screen".
This is my code (part of it):
CSS
#center-coupon {
width: 474px;
height: 255px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -237px;
margin-top: -150px;
text-align: center;
}
#rib {
background-image:url(img/ribbon.png);
height:75px; width:474px;
}
#main4 {
position:relative;
background-color:#eeeeee;
height:300px;
width:340px;
left:66px
}
Html
<div id="center-coupon">
<div id="rib"></div>
<div id="main4">
<p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
<p>coupon awarded to</p>
<img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
<span style="font-size: 25px; font-weight:bold;"> Domingo</span>
<p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
<p>created on 2012-10-21</p>
<a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>
</div>
</div>
I know the center-coupon div is widder than the iphone screen, but that does not explain why im not abble to see part of the left side of the ribbon... A good solution will be forse the iphone to render the site with less zoom, but i dont know if that is possible, and dont know if that propety will be compatible with other mobile platforms. So what do you think?
I am no iPhone expert, but it is my understanding that the pixel density of the device has nothing to do with the CSS pixels. So, as far as CSS is concerned, the width of the phone is 320px. You are positioning the left edge of the coupon in the middle of the page, then moving it 237 pixels to the left, which essentially places it off of the screen. Have you tried changing the negative margin to a smaller amount?
You're negative margin is more than half the viewport width of an iPhone, therefore it is dragging it out of view.
If you want to center an element, you can use margin: auto (so long as an explicit width is set) rather than positioning the element with absolute positioning.
I'm making a website and I've got it working on the Mac and the iPad. When I see it on the iPhone, one of the pages doesn't place the background-image correctly.
I'm using 2 background images on the of the website and I've already set it's height to around 1200px. When I see the same page on the iPhone, all the text wraps up and makes the page longe. My footer image stays in the same position and the text overlaps it. Shouldn't it work as the iPad since I've got all the text wrapped inside a ?
I'm noticing that the problem is that the image is set on the body and as it's not a , it will not follow the increased length of the text.
How can I specify a height of that background-image specifically for the Mac + iPad and another one for the iPhone?
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#333;
background:#000;
margin: 0px auto;
background-image:url(images/gradcinza_top.png), url(images/gradcinza_bot.png);
background-repeat:repeat-x, repeat-x;
background-position:0px 115px, 0px 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
On the iPad and the Mac, those 950px put the footer image on the exact place I want it. In the iPhone, since I have less area to present the text it simply makes it longer. I need something to say to the website to put the background-image on on position while it's being viewed on the Mac and iPad and another condition to specify a new position for the iPhone.
Thank you.
read some Responsive Web Design Guidelines..Use CSS Media Queries for this...
e.g.:-
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
I'm trying to style a select input on iOS. The first option or initial state should have smaller font-size but not the rest of the options.
I have the following html structure:
<select class="dropdown">
<option selected="" value="Navigation">Navigation</option>
<option value="some-link">Whatever</option>
<option value="some-link">Another option</option>
<option value="some-link">Why</option>
<option value="some-link">What</option>
</select>
My CSS for it looks like this:
select {
-webkit-appearance: none;
font-family: 'Custom-Font', sans-serif;
font-size:.5em
line-height:1.8em; // optical center
background-color: #ccc;
color: #333;
border: none;
padding: 6px 10px 4px 10px;
}
.dropdown {
background-image: url(img/assets.svg);
background-position: right 2px;
background-repeat: no-repeat;
width: 100%;
display:block;
margin-bottom:-1.5em;
option:not(:first-of-type) {
font-size:1.5em;
}
}
The <select> menu looks exactly like I want it to look. It says "Navigation" inside a light-gray box with a rather small font-size.
However when clicking/tapping the select on my iphone the native UI view of iOS shows all options also in a very small font-size.
How can I just make the selected option (or the box itself) use the custom formatting but not the options. I want my options to have a "normal" readable font-size.
Any ideas on that? I tried with option:not(:first-of-type) and increase the font-size but no effect!
Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.
Try this 100% worked for me
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
For what it's worth - I had a transparent <select> dropdown with a border radius when closed. On iOS (I'm not sure about android, I didn't test it) the default grey box for the <select> would appear inside of my custom border which was unappealing and unwanted.
To get rid of the inner grey box I used the following CSS:
-webkit-appearance: none;
And further more - pertaining to this OP's topic. Bootstrap offers a convenient solution with great documentation to enable custom dropdowns with Javascript. Check it out here.