I have a button with a Fontawesome icon inside of it, as bullet that I want to be always on the right of the button's text. See Fiddle
Let's say I always want that icon to be in a fixed distance of 6px from the left edge of the button.
I can't figure how to do that, so right now I'm using right:150px as the positioning value, but this only fits the dimensions of a certain button, according to the text inside of it. Once I change the text to longer/shorter, the icon would move as well.
How can I make it fixed?
(I don't remember if my current code works well on IE7/8 in the first place, but if it does, I want the solution to work with these versions as well).
HTML:
<form>
<div class="button-area">
<label>
<span class="fa fa-eye fa-lg bullet"></span>
<input type="submit" class="button" value="Changing Text">
</label>
</div>
</form>
CSS:
.button-area{float:left;margin-left:5px;position:relative;padding-bottom:8px}
.button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:inherit;font-family:'Open Sans',arial;font-size:17px;padding:.6em .8em .5em 1.8em;text-decoration:none;border-radius:4px}
.button{color:#fff;background-color:green}
label{display:inline-block;cursor:pointer}
.bullet{position:absolute;height:11px;top:15px;right:150px;width:3px;color:white;font-size:1em !important;text-shadow:0 1px 1px rgba(0,0,0,.2)}
If i read your question right, you want the .bullet span to be 6px from the left, but you are using right:150px; to place it?
Why dont you just use left:6px;, thats what it is for.
JSFIddle
Easy enough. when you using font based icons you just have to treat your image as if it were a single letter from a font.
that means. Don't give it any width. If you want to make it bigger use font-size and then. If you want to make the position of your single "letter" absolute, it's fine (although I would prefer other ways). Just remove your "width" from your css and add left:6px insteed of right.
for your next fiddles I recomend you to make it a bit cleared (a propertie for line) as it's hard to look it easily as you have it right now.
I just change this css:
.bullet{position:absolute;height:11px;top:15px;left:6px;color:white;font-size:1em !important;text-shadow:0 1px 1px rgba(0,0,0,.2)}
EDITED: I am adding one of my comments as I think it may relevant to make a better use of html/css (imho)
But it you really want it to do it really right.. insteed of an
input.. and if you can't use simple links ( a tag) then use button tag
insteed. because you could do something like this:
https://jsfiddle.net/gw6ce83o/5/, your users now can click everywhere
in your button (insteed of just the input) and there's a very high
posibilitie your submit will works the same (programming) than it does
your input atm
updated FIDDLE
Related
I just installed Foobar on my blog but the customer support hasn't responded yet after a few weeks to my query.
I'm basically applying this custom modification offered by them (http://codecanyon.net/item/foobar-wordpress-notification-bars/full_screen_preview/411466) to add a Like button to the toolbar at the top.
What I'm struggling with is to align some Text before the <div id="social_target"></div>, so that the text and the Likebutton will be aligned to look like "Like Us On Facebook! LIKEBUTTON".
Right now when I add text before the <div id="social_target"></div>, the text appears but the Likebutton appears underneath the text so it isn't visible at all.
How would I do this?
I don't know exactly how wordpress works and if you have access to the html code, but if yes, try putting the text inside a div and applying some css to it, something like this should work:
<div style="width: 400px;">
<div style="float:left;">Like us on Facebook!</div>
<div id="social_target"></div>
</div>
The value of the width is just a guess, you can adjust it.
A few things to check:
Is the Div that your entire code (the text and the social_target div) being put into too small? If so, it'll push the Div onto the next line. You'll need to edit the size of the Div you're putting this stuff into.
Make sure you apply CSS to the Div so that it stays on the same line. Alternatively, you could use a span:
<span id="social_target"></span>
Otherwise, Divs will get pushed to a new line unless you specify something like:
#social_target { display:inline-block; }
or
#social_target { float:right (or left); }
Like Lucas has in his code above.
First off, I say "without HTML hacks" in the subject because I don't have enough room to put all of these hacks on a single line.
I came across these questions, but they do not serve my needs:
CSS Input with width: 100% goes outside parent's bound
How to set the same width for HTML text input and drop down input
Can I stop 100% Width Text Boxes from extending beyond their containers?
Here are some reasons why:
I cannot use block elements
The input must retain its bevel/inset style so that it looks like a textbox (the business will not like an inconspicuous rectangle with a 1px solid border around it)
No CSS3 (some users are still on IE6 and IE7)
I cannot go wrapping every single input on our company website with magical DIV elements.
I've discovered that the <!DOCTYPE> directive affects this overflow behavior on inputs. Research has told me that, without this directive, the browser is in quirks mode. I guess that's why, in quirks mode, inputs look... correct? I don't get it.
At any rate, here is a fiddle:
http://jsfiddle.net/pJkGB/2/
In case of rot, here's the HTML in that fiddle:
<input id="txtwoo" style="width:300px" type="text" />
<br />
<select id="cbowoo" style="width:300px">
</select>
Notice how the textbox is wider than the dropdown. I want the outer bounds of the textbox to match the exact same width of the dropdown right down to the pixel (outer bounds included any borders, margins, etc). The dropdown must be left alone. I do not want to wrap the input with any elements. I want a style that I can apply directly to the text input itself that will keep it from extending past the set pixel width. I want it to retain its bevel/inset style.
If this is impossible, your answer of "you cannot do this" will suffice as an answer. Otherwise, please fiddle with my fiddle and let me know how I can get this to work.
Try using:
input{
box-sizing:border-box;
}
If you want to go nuts, you could even use the below to specifically zero-in on text boxes:
input[type=text]{
box-sizing:border-box;
}
Have a look at this fiddle
I've just started using Twitter Bootstrap (I'm new to it so I don't fully grasp it quite yet!) and I'm trying to create a two-column form with some specific visual elements.
The complete width of the form is approx. 80% of the width of the viewport and within here are two (roughly equally spaced out) columns of labels and associated textboxes. Some of the textboxes need to have a small icon affixed to the right-hand side of the textbox and for that icon to remain fixed to the righ-hand side of the textbox when the user resizes the browser window (to remain like this at least down to 1024x768 resolution). I'm also trying to achieve all of this with a "responsive design".
I can get it looking good at higher resolutions, but I know I'm doing something wrong as the icons are displaying "inside" the textboxes when the user resizes the browser window.
This first image shows how the form should look (roughly) at all sizes:
But when resizing the browser window, it does this:
I'd like that little envelope icon to remain fixed to the right-hand side of the textbox at all times. Unfortunately, when the browser window is shrunk even further, it moves to the next line:
I'm using ASP.NET MVC to generate much of this form, so there's lots of #Html.TextBoxFor calls going on within the mark-up, however, I've posted up a JSFiddle with a portion of the relevant rendered mark-up that highlights the problem:
http://jsfiddle.net/qYTSY/1/
I'm sure I've taken an entirely wrong approach with this, however I'm no designer so I'm struggling to tweak the current mark-up to achieve what I'm after. Can anyone help please?
In jsfiddle I added a class:
.controls-row-with-icon {
width: 28em;
}
...and then obviously changed the two divs to:
<div class="controls controls-row controls-row-with-icon">
That "pins" the mail icon just to the right. Not sure if it "breaks" anything else though?
Note: in jsfiddle the two columns seemed to overlap each other - not sure if it would do that in your production version though? I couldn't get the rh column to "fall under" the lh column when the viewport was smaller - but guess that's working ok in your production code?
Rob
EDIT
See comment
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.row{
/*min-width: 62em;*/ /* add this is viewport should be fixed */
}
.controls-row{
width: 30em;
background: #ccc;
}
.row-fluid .span5{
margin-left: 0;
margin-right: 2em;
width: 30em;
}
.row-fluid .offset1{
margin-left:0;
margin-right: 0;
}
Well, after some twiddling around, I believe I've found a solution!
Here is an updated JSFiddle:
http://jsfiddle.net/qYTSY/32/
which highlights the answer (ignore the first column - I've fixed that up separately.)
Many thanks to both LiverpoolsNumber9 and Sherbrow for their help in guiding me towards a solution.
The crux of my solution was to remove the span3 class on the span element around the input elements that needed the icon appended to them (leaving this span in place caused all sorts of weird and wonderful problems), but then also wrapping the input element and the icon element in an extra div and using the input-append and add-on classes in order to ensure the icon is placed and fixed to the right of the input box.
So this mark-up:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="offset4"><i class="icon-envelope" id="emailicon"></i></span>
</div>
Became this:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<div class="input-append">
<span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="add-on"><i class="icon-envelope" id="emailicon"></i></span>
</div>
</div>
Although I've found a solution I have to confess that, where CSS/Styling/Twitter Bootstrap is concerned, I still feel a lot like this!
OK, DUE TO BEING NEW I WASNT ALLOWED TO POST IMAGES, SO I HAVE ATTACHED LINKS INSTEAD. (images should be inline with this question)
Im writing a webpage and have a div containing some text (inline) an then an image.
Now when one clicks on the image, a hidden div appears below with an input field.
The input field in this div is automatically aligned to the left edge of the div.
I want it aligned to the right of the div.
As pictures speak louder than words, see link below.
http://www.freeimagehosting.net/uploads/d827ecc330.png
Anyhow the closest I got to a solution was to apply direction: rtl to hidden div, but then my text in my input field also changes to rtl.
I just want the placing of the text field to be rtl, not the input.
I hope this isnt too confusing.
Im quite new to css but have searched arund a lot, and have yet to find a solution besides the depreciated align=right.
Any suggestions greatly appreciated.
<div id="container" style="width:500px;">
<div id="text" style="width:250px; float:left;">Text</div>
<div id="image" style="width:250px; float:left;">Image</div>
<div id="input" style="width:500px; float:left; text-align:right">Input</div>
</div>
I have multiple styles such as button_50 where the width is 50px, button_75 where the width is 75px, and so on...
Is there a way to dynamically generate the length of the button based upon the length of the text, so I probably would just have to create one style like button and I can apply that to any button and it would shrink or stretch based on the length of the text.
Here is my asp.button declaration:
<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"/>
Here is some styling in which I have a small image that I want to be able to expand and shrink depending on the length of the text.
.test_button
{
background: url(../images/test/grey-left.png) top right left bottom;
background-repeat:no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
height: 23px;
}
I added the top right left bottom to the class and that expands the image across. How can I apply 4 different images to each background position of the button so I can have a sort of gradient for example instead of the same button for top right left bottom.
Your changes have clarified what you want a lot from when I first replied.
Each element can have ONE background image only*. The solution is to having multiple background images is to have multiple HTML elements:
<span class="fake_button">
<span>
<span>
<input type="submit">
</span>
</span>
</span>
Then in your CSS add an image to different corner of each one.
It's not simple or pretty but it's the only way of having multiple background images.
*I think some of the nightly builds of Safari and Firefox can do this but I suspect this isn't what is being asked about.
<asp:button> outputs <input type="submit"> (give or take a few attriubutes)
In the absence of other styling, a submit button like this should just expand to fit it's text. Perhaps you should look at what is stopping this happen.
Just don't set the width.
Update
As noted in comments, the case is using an image, probably as background.
The only things I can think of for image buttons that dynamically resize is using using separate images as end-caps for the left and right of the button, then a background image that either can repeat or is big enough to account for all sizes. This would have the limitation of how the center image fades into the ends, probably at best you could use a top to bottom gradient.
An alternative would be to use css/javascript package/method such as SpiffyCorners.
If you try to stretch an image, you risk pixelation and you would have to use an estimation for font width such as you could get from a printing or font API. This would be very error prone due to the risk of not all clients having the same fonts.
You can do it on PageLoad with a loop like this:
// set default length
string cssclass = "button_25";
int text_length = button.Text.Length;
int[] sizes = {50, 75};
for (int x = 0; x < sizes.Length; x++)
{
if (text_length > sizes[x])
cssclass = "button_" + sizes[x].ToString();
else
break;
}
button.CssClass = cssclass;
You can keep your source clean by adding the rounded corner functionality via CSS for browsers that understand it (plus the gradient bg image or whatever) and using JS for browsers that don't.
for ff/sf/op just use
button{
background: #ccc (../path/img.gif) left bottom;
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
}
then for IE include a snippet of js to wrap the button with spans and apply the styling via css. there are jquery plugins a plenty to do this for you if you're not inclined to hand roll.
Try CSS3PIE. It will make your life easyer... Take a look in my bolg page:
Internet Explorer 6-8 don’t have CSS border-radius. How to make rounded corners?
Cheers!
Roberto.