I have a problem similar to this: CSS: fluid text input with floated-right button, and I particularly like this solution: http://jsfiddle.net/t7tgJ/3/
However, in my case, different buttons have different text, so I can't use fixed width. Also, the text in the button changes as well (on submit).
Specs:
A text field and a button on one line. The button should float: right and the text field should always be container - button.width - paddings - margins. How can I accomplish this without Javascript?
I've had a play around in JSfiddle. I've gone with a positioning-only version. This might help. It's close but not finished. I hope this helps.
http://jsfiddle.net/t7tgJ/105/
Related
I am trying to add padding-right to an input so that I can place an image in that corner and not have the text flow behind it. It works fine in Chrome & Firefox but not in IE.
I have seen people recommend using float:left; but still it doesnt work.
See the problem here: http://jsfiddle.net/4zRRt/
That is not how you want to do that (probably, I am guessing, the button image doesn't work for me obviously).
I am guessing you want an input with a nice submit button which is always on the right.
This is done with a parent relative element and the button who is absolute with a right offset of 10px (to accomedate for the extra space the shadow requires). And a top set to 0...
Here is a jsfiddle of that:
http://jsfiddle.net/sg3s/4zRRt/10/
I put some extra display:block; in there to make the inputs block instead of inline, this will prevent other rendering problems too.
I'm trying to tweak a widget that loads from Javascript. I'm using jQuery to re-style it.
It has a textbox that is behaving strangely. The cursor stays on the left side of the box and as the user types the text flows to the right. Clicking in the text makes the cursor behave normally.
Does anybody know what might be causing this? I've tried changing the "direction" property but it doesn't help.
Thanks
i think your css having text-align:right
try this
text-align:left !important
please see this example http://jsfiddle.net/7trcV/
what I'm trying to achieve is ability to put an arbitrary icon to the right of the text in a way that text width is limited. In the example I posted the problem with the second (short text) is - the icon is displayed detached from the text.
Any help is appreciated!
How's this? http://jsfiddle.net/7trcV/5/
I gave the .content a right padding and set the icon as it's background.
Ok, try this http://jsfiddle.net/7trcV/6/ it should have sorted out your underline issues. I'm not addressing the clickable icon because that's a completely different requirement from your original question.
Ok sorry i did not look at your code properly for the first time... problem here is absolutely positioned icon which need to be floated next to your spans like this: jsfiddle link
after you do this you must set max-width of that span to be width of container-width of icon... hope this will help
You could use javascript to find the width of the span, and have the icon positions right next to it.
Exmaple here: http://jsfiddle.net/peduarte/KCttp/
I'm looking for a way to mark when text overflows it's container. The code goes like in this example. Basically, it's a <span> with a set size. I want some kind of marker to show me when the text overflows.
I tried text-overflow:ellipsis;, which sounded perfect, except that it only works if the parent is the one whose size is restricted (right?).
Does anyone have any pure-CSS (JS and editing the HTML is out of the question here) ideas for how to alert me to when the text is being clipped?
Thanks!
You have to add the white-space: nowrap; style to the container along with the text-overflow:ellipsis;.
See here
Edit Here's some more info on it.
I have a dropdown that I'm looking to enlarge without effecting the text and ensuring the right hand down arrow remains at the full hieght of the element.
I've tried adding padding but this effects the right side:
Dropdown with padding http://hoctordesign.com/dropdown2.png
I've tired adding height but I can't vertically align the text:
Dropdown with height http://hoctordesign.com/dropdown.png
Anyone solved this before?
Thanks,
Denis
This is browser-dependent behaviour. Each browser applies css to form controls differently.
The best breakdown of what you can do (that I've come across) is at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/. And the most relevant section is http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
In your case it would be better to use a custom element that acts like a select box.
Here is a nice one using jQuery
Select Box replacement