I have the following code to display text on a generic button: https://jsfiddle.net/6ogo4bqr/
<input id="Button1" type="button" value="Log In" class="btn1" />
<br />
<input id="Button2" type="button" value="Log In" class="btn2" />
<br />
<div id="Button3" class="btn3">Log In</div>
It works fine on Firefox but on an iPad the button text appears more towards the top of the button (though it's OK when it uses Helvetica or Arial):
How can I get the text to align vertically on iOS (BTW I couldn't get JSFiddle to use #font-face)?
Try and remove the top and bottom padding of the text and adding a line-height instead.
#selector{
/*set both top and bottom padding with same values */
padding-top: 20px;
padding-bottom: 20px;
}
I eventually found that the particular font file I used was corrupt. It all worked ok when I replaced the file.
Related
I was wondering if I could add some left margin inside textarea, I want there to be some space because I am using an image icon as my button and thats inside the textarea, when I type the words eventually cover the image.
<div id="inputBox">
<textarea class="txtarea" rows="50" name="Text" Id="Text"> </textarea>
<button mat-button id="send">
<mat-icon>send</mat-icon>
</button>
</div>
always search google first
Web development resource
.txtarea{
margin-left: 20px;
}
I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...
<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>
http://jsfiddle.net/jjaleel/kVHbV/339/
Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?
Thanks.
You could use a button tag instead, they were made to be styled with much more control than an input.
Here's how I would use one with the latest bootstrap..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
Use a <button>, with the submit action, instead:
<button type="submit"><i class="icon-refresh"></i> Test</button>
JSFiddle
Put the refresh icon in a span inside a button:
<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>
update (based on OP comment)
Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}
Ok so here's my problem, i have 3 buttons that work on both pc and mobile phones, but 1 major difference, on mobile devices the button shrinks by 50% and magically gets round corners. (ignore the fact that the top image has a check and the bottom has a plus sign, they do the same exact thing)
<button type="button" onClick="parent.location='../index.php'" title="Back to Main Menu">
<img src="../../css/images/back_25.png" />
</button>
<button type="reset" title="Reset">
<img src="../../css/images/restart_25.png" />
</button>
<button type="submit" title="Done">
<img src="../../css/images/plus_25.png" />
</button>
<input type="hidden" value="submit" name="submit" />
is there a quick fix to this problem? Once again both sets of buttons work properly, just look different.
As requested: i've also tried this code.
<button type="reset" style="width:49px; height:33px;">
<img src="../../css/images/restart_25.png" width="25" height="25" />
</button>
it's the same thing. i've also tried to set to style="width:50px; height:50px, and the button becomes a full circle.
Well, i really don't see anyone going to have an answer to my problem, so i just started messing with the height and width on the buttons a little more and got kinda of lucky to land on a middle ground on both browsers.
<button type="reset" title='Reset' style='height:33px; width:50px'>
<img src="../../css/images/restart_25.png" />
</button>
This seemed to be the sweet spot for my specific situation. because the pc broswer side was not effected and the iphone/safari side is acceptable to see the icons.
Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">
I've been wondering if there is any technique to use HTML/CSS like Flex/MXML. I mean, in MXML the HBox, VBox and Spacer are globally used, and their behavior is predictable. But in HTML/CSS we use a lot of float and it always have some 'hidden surprises'.
With Flex/MXML I would do:
<hbox width="100%">
<button label="Button A" />
<spacer width="100%" />
<button label="Button B" />
<button label="Button C" />
</hbox>
If you don't know flex I explain this code: the HBox places every element inside it side by side, and the Spacer is an invisible element; the spacer with 100% does not have the same width as the parent (HBox) but it fills the remaining space; this means that A will be aligned to the left, and the two other to the right.
Now in HTML/CSS I would make buttons B and C float to the right. I also would have to reverse the order of the buttons to the final result be the same. Besides, I probably would put some blank tag with "clear:both" to ensure that nothing below will be messed up.
So, is there any technique to obtain the same functionality in HTML/CSS? That would be fantastic if we could make .HBox .VBox .Spacer CSS classes and without javascript.
thanks in advance.
I do something similar to this using the following kind of markup
<div class="formline"><!-- kind of like your hbox -->
<div class="buttongroup" id="group1">
<button label="Button A"> <!-- of course, that's usually input type="submit" or something. -->
</div>
<div class="buttongroup" id="group2">
<button label="Button B">
<button label="Button C">
</div>
</div>
Then use CSS to style it.
I'd float group1 to the left, float group2 to the right. The enclosing formline contains the floating within it. The buttons appear in the correct order, I don't have to reverse them.
This is all logical/structural markup and can be styled different ways; it's not there just for presentation.
I use sensible names depending on what I'm doing, not things like "group1", "group2".
You could give your top level div a class named hbox and target its sub items. Example: http://jsfiddle.net/soparrissays/WJ2Lk/4/
html:
<div class="hbox">
<input type="button" value="Button A" class="left-button" />
<input type="button" value="Button C" />
<input type="button" value="Button B" />
<div class="clear"></div>
</div>
style:
.hbox {
margin-top:45px;
}
.hbox input {
float: right;
}
.hbox .left-button{
float:left;
}
.clear{
clear:both;
}
Is this what you are looking for?