i'm currently working with Twitter Bootstrap and have a problem concerning the size of elements. I'd like to create an input field with an appended button. That's why I'm using a div with "input-append", which sorrounds the input and the button tag.
Now my problem: I want everything to be a bit bigger. So i gave the button tag the property "btn-large". Unfortunately there doesn't seem to be a similar property for the input field.
How can I fit the input field to the appended button?
<div class="input-append">
<input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn btn-large" type="button"><i class="icon-search"></i></button>
</div>
Heres an impression of my problem:
Regards,
Christoph
Define box-sizing to your input field. Write like this:
input, button{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
You can use following style and if you want bigger then increase padding.
input, button{
padding: 7px;
}
Related
I am using w3.css in my codeiniter project and I want to put them next to each other.
Here is my code:
<a type="button" class="w3-btn w3-blue w3-pull-left" href="http://localhost/cblog/posts/ikkinchi-post">Tahrirlash</a>
<form action="http://localhost/cblog/posts/delete/2" method="post" accept-charset="utf-8">
<input type="submit" value="O`chirish" class="w3-btn w3-red">
</formm>
Why do you have type="button" attribute on your link?
To display the elements on one line change their style to:
display: inline-block;
Or if you don't need padding
display:inline;
So it will look like this
a,form{
display:inline-block;
}
You can take a look at the documentation for W3.css and see if there's a class that will make an element display inline and maybe use the classes designed for navigation bars. If there's not, then you can create a class yourself and assign it to the element you wish.
.displayInline { display: inline;}
I've got a file submit form and I want to change how the buttons look. Previously, I've done it this way, by wrapping the form inputs into divs and then using CSS to make the divs look a certain way.
However, It doesn't seem to work for the file submit button #myFile. It just places the button inside of the div. Whereas the submit button looks how I want it to look. Anyway to fix this? I would like the Choose File button to look like the submit button. Just text, no gray oval.
<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
<div id="btn_upload_data">
<input type="file" name="myfile" id="myFile"/>
</div>
<div id="btn_sub_data">
<input type="submit" id="data_submit" value="Submit File"/>
</div>
</form>
Some CSS:
div#btn_upload_data input {
cursor:pointer;
padding-top:40px;
padding-bottom:60px;
width:130px;
height:0px;
background-color:#a6e79b;
border: none;
text-align:center;
display:inline-block;
float:left;
white-space: pre-wrap;
}
Try using
#btn_upload_data input[type="file"] {
opacity: 0;
filter: aplha(opacity=0);
}
And then place a text inside the div as Choose File.
<div id="btn_upload_data" title="No File Chosen"> // if title needed
<input type="file" name="myfile" id="myFile"/>
Choose File...
</div>
There is no alternate way of editing it. It is a pre-defined input type file's style. That is set by the OS itself. So you cannot edit that! You need to override it completely.
I have a web application in which i have these two submit button inside a table
<input type="submit" value="Modifier" name="btn" style="display:inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />
I'd like that it be displayed in the same line but i have this result:
Why this happens? how can i fix my code to show the buttons in the same line?
I'd stay away from this method of css personally, just my preference this will mean that every submit button is exactly the same but what if you don't want this styling with every submit button. But then again that method is much better than doing css inside a HTML file
input[type=submit]{
}
You're better off giving the submit buttons a class called submit then you can pick and choose which submits you want to do you're styling for
<input type="submit" class="submit">
.submit{
float: left;
etc.
}
The main problem is your table column widths perhaps give them all a class and give them a width and/or height that meets your needs inside an external css file.
you may try this styling;
input[type="submit"] {
float: right
}
you may also try float left.
Though you could increase the width of the table column or use display: inline-block, maybe you want to do something else:
Increaseing table/column width seems natural, as the two buttons look too wide to fit into that.
Once you have it, you may prefer to use something like block display with a float component.
The inline-block performs poorly in Internet Explorer browsers, even in recent versions like IE9, and a lot of your visitors will be using it for a while.
input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
You can try like this
Define a css rules for your submit buttons
input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}
here is an example.. uses bootstrap though
http://jsfiddle.net/QYBHm/
<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>
Sign up
or
Sign in
Increase your column size if not auto and add float:left to "Exporter"
In your table row in column with the buttons try this code
<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>
I would say that the container column isn't wide enough, so even too they are inline they appear like this. Try changing the width of that column to check if that's the problem.
Try this css
input[type=submit] {
display: inline-block;
float: left;
width: /*adjust as per your table */;
}
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>
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)">