Using iOS 4.2.1 on iPad/iPhone, when I view a specific web page with type="number" for a text field, the text input space is slightly shorter than when it's type="text". And when I enter 3 digits, the first one gets cutoff, while it does not get cutoff with type="text". This problem does not happen on iOS 3.x on iPad/iPhone. The input field input area is identical, and it works fine.
Has anyone noticed this problem? Is there anything I can do to fix it? Thanks.
It's probably to do with the device browser's default style sheet. If you just apply styles the same styles to the text and number input fields it should render the same.
input[type=text], input[type=number] {
width: 100px;
padding: 1px 0;
...etc...
}
You need to set the unit when styling width and height.
<input syle="width: 45px; padding: 1px 0;" name="mname" type="text" value="" autofocus />
or preferred:
input[type=number] {
width: 45px;
}
Related
This is for terms&condition kind of page where there is checkbox next to the term. I dont know how to change the checkbox shape and it still stuck as a blue square. Please help, thank you
I would update the style by applying a classname to the Checkbox and changing the CSS.
Something like:
// style.css
.ant-checkbox.foo span.ant-checkbox-inner {
background-color: hotpink;
border-radius: 50%;
}
// jsx
<Checkbox className="foo" />
I'm trying to override the colors on my material input elements to always be white. This includes the outline of the input/select field, the placeholder, and the text itself even when the field is out of focus.
I did read through the official material overriding styles guide, but I found it a bit broad and was hoping for some more direction to do this.
This is my code:
<mat-card class="coverage-card">
<mat-card-content>
<form>
<mat-form-field appearance="outline" class="address-zip white-text">
<mat-label>Square Footage</mat-label>
<input type="number" matInput>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
css styles:
.coverage-card{
min-width: 400px;
max-width: 620px;
background-color: #FF6A13;
height: 575px;
border-radius: 20px;
}
.address-zip{
max-width: 190px;
margin-right: 10px;
}
.white-text{
color: white;
}
The out-of-box material color only applies when the field is focused on. I haven't been able to find the style that is being applied to the outline or placeholder when the field isn't in focus.
I tried overriding classes like .mat-form-field-appearance-outline in styles.scss with an !important, just to see if I could find the right class and haven't had any luck yet.
Not in Focus
Focused
Filled In
Recent upgrade to Bootstrap 3 on a Rails app. SimpleForm text box and also other form inputs are too large - they are erroneously full-page in length. The app does have responsive design, and the form input boxes do resize.
I'd like to limit the form input size to 50% instead of full page.
I did add this initializer gist https://gist.github.com/tokenvolt/6599141 but it did not seem to have an effect.
I am unfamiliar with the Bootstrap3/Simpleform2.1.1 conflicts.
I adjusted the width to 50% in the application.css.scss, but that did not make a clean change
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
margin-bottom: 15px;
#include box_sizing;
}
By length do you mean width? If you don't want the form to be too wide you could divide the page into columns and then put the form into a smaller column.
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<%= simple_form-for...
</div>
</div>
Bootstrap uses a gridsystem that divides the page into 12 columns. if you just put the form on, it will take up all 12 columns (the whole page) so you need to specify how many columns you want the form to take up. Here's a post that really helped me understand the new gridsystem: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
Hi How to reduce the height of the textbox...
HTML CODE:
<textarea id="" name="" placeholder=""></textarea>
#pageID div textarea.ui-input-text {height: 20px;}
Using rows attribute you can change the number of lines in your textarea, not exactly the height property (that is specified in pixels), but I think rows is what you want. Example with 20 lines of height:
<textarea id="" rows="20" name="" placeholder=""></textarea>
In the same manner there's a cols attribute to specify the width of the textarea in characters.
For textarea use rows "or and" cols and set the value that you want,
for normal textbox you can set a style for it as style="height:20px;"
By using CSS you can adjust the height of <textarea>
First, put some name on your id
<textarea id="box" name="" placeholder=""></textarea>
Then, your desired height in px
#box {
height:10px; /* example */
}
See here.