I am trying to set the position of a font awesome icon in an input field at run time. To do this I had hoped to have the style compute at run time as I've done with other style sheet elements. However, I am banging my head up against the wall with this one. I did not include a jfiddle because my problem is trying to make the element dynamic and I don't believe I can do that in a fiddle.
This code works. The dollar sign appears at the right side of the input box:
<div class="col-md-6 form-control-static">
<div class="input-icon right">
<i class="fa fa-dollar"></i>
<input>
Notice that I used "right" to get the icon on the right. What I want to do is replace this element with a generic element and set that value dynamically in computed css.
So what I really want to say is this:
<div class="input-icon currencyPlacement">
And then in the computed style sheet somehow resolve "currencyPlacement" to be "left" or "right" based on conditions that I will compute.
<style>
.currencyPlacement { ????? }
</style>
I realize that I could set this using javascript and I could also have this compute at the field level. I thought there might be a better way to effectively alias the element. Sorry for the long-winded description and thank you very much in advance.
You said that you generate the whole thing by code. So presumeably your code "knows" the currency and its placement. It seems much more straightforward to me to use your initial approach. Or perhaps instead of "right" or "currencyPlacement" assign a style that corresponds to the currency, like
.currUSD, .currEUR, .currATS { css to place it right }
.currXYZ { css to place it left }
And in case you set the currency on the same page, there will be no way around some JS to assign the proper class to that input-field.
Update: wrt to your comment: since you insert a FA-Tag related to USD, I assume you know what the currency will be when you build the page. So if you have that knowledge, can't you then make sure the controls appear in the appropriate order, as in this example? I think that would make it much easier - otherwise I would only know how to do with JS, but I see no solution with CSS alone, I'm afraid.
Related
I am starting with Materialize and I wonder how to know every element we can set a class attribute for example?
<div class = " A LOT OF ELEMENTS ">
On their website, they just provide a few examples and we do not have the scope of all the possibilities.
Also, I found this website but they only provide information about what is possible without detailing how to do it... And it is frustrating!
For example, I have two cards and would like to reduce the space between them, I cannot find the information anywhere.
Thank you,
Olivia
If you want to see absolutely all the options you must see the definition of the classes in the file materialize.css. If you want to reduce the space between some element you must use the box model (CSS).
I'm currently trying to automate statistical report generation with r Markdown.
I've managed to tweak the CSS to my liking for the most part, but now I want a logo in the top left hand corner of the header.
My plan was to just absolutely position it and adjust the header around it, the only problem is there's no unique class or id for it to be selected by in the CSS file, so if I want more than one image (which in some I will) they'll all get absolutely positioned in the same place.
Another thing I've noticed is that the page width is defined within the body of the HTML output, meaning it's further down in the CSS cascade and so if I try to set it it gets overwritten later on. Does anyone have any idea how to circumvent this?
Sorry if two questions in one is cheating, they just seem somewhat related.
Thank you.
In answer to the first half of my question, I ended up printing the following:
``` {r logo, results="asis", echo = FALSE}
print("<img src='*URL*' id='logo' />")
```
Then set the visibility of the <p> tag that outputs the R console text to hidden, which I then over ride within the #logo CSS.
Still not found a way to over-ride the max-width however.
I see this being done on websites (ex: http://www.abookapart.com/):
.left {
float: left;
}
<div class="col two left" />
Is the above good practice? I thought it was generally frowned upon to create classes that describe style. If I wanted the above div to float right at a later date I would have to go into the markup and change left to right. No better then adding a style attribute to the element it would seem.
You're right. Most developers avoid class names like "left" or "blue" for that exact reason. Other than the class name, I don't see anything wrong. I would include that float in the "col" class and then just override it with "right" later on if need be.
I've seen it become useful where multiple people are editors for a single website, and you don't give them all full html access.
By setting up classes of styles that they're allowed to use, you can allow them a certain amount of style control without giving them the power to mess everything up.
It's really down to personal/team choice.
I've always preferred this technique as I favor convention over style, I like my concerns separated and I dislike ambiguity.
if I see a div like this:
<div class="clearfix left bordered">
...
</div>
I like the fact that its intent is clearly emphasized and won't make me have to dive into the CSS file to find out what it means.
But based on your example above, if you did go down the more declarative route:
<div class="importantTextDiv">
...
</div>
On the one hand, you have to investigate the CSS file to determine its properties (or run it and inspect the element in your Firebug equivalent) but should you choose to change it, you don't need to make a source change, or change whats emitted from your server side language.
To me, both situations are a pain, but in my experience, changing a div between float:left and float:right is the kind of thing you'd have got finalised before a final deployment anyway.
My answer ? there's no technical reason to prefer one path over another, choose which one feels more comfortable!
I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)
I'm working with an <input> field and I'd like to style part of the field as the user's typing in a different color. For example, let's say the <input> has a style declaration of color: red; and I want to change part of it to color: blue;. Is there any way this is possible?
If there isn't (as I suspect), any creative ideas on how I can simulate this effect while still preserving semantic mark-up?
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
that before the point at which changes are being applied
that after the point at which changes are being applied
that at the point the changes are being applied
You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.
You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.
As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.
Consider the following starting point for the generated replacement markup:
<div class="input">
<span class="nonEdited before">foo</span>
<span class="edited">fizz</span>
<span class="nonEdited after">bar</span>
</div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.
As others have said, you can't do this with styles and static markup.
You could probably do it with a Flash-based form.
But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input>.
Algorithm:
Use a normal <input> with whatever default styles are desired. The contents of this input will never change except by user action.
jQuery monitors that <input>. When it detects trigger word(s), it adds a <div> after the input and fills it with the trigger word(s) -- styled as desired. Probably one <div> per word or phrase is best.
jQuery then positions the new <div>, absolutely, directly over the trigger word(s).
Getting the trigger word(s) offset within the <input> might not even be necessary, because the previous words could also be in the overlay <div> -- either styled defaultly or with visibility: hidden.
But, if only the trigger word(s) are desired in the overlay, then using a fixed-width font, like Courier, will help with the sub-positioning.
Take care that the overlay does not interfere with the user trying to mouse or key to certain parts of the <input>. IE, probably don't want to cover any more of the <input> than necessary, and set a click() handler to relay focus.
Alternate, user friendly and simpler approach:
Rather than try to do funky, non-user-expected things to the input, take a page from Jakob Nielsen and from sites like StackOverflow.
Just have a plain ol' <input>, but underneath it, show the formatted text as it comes in.
You can achieve this with (a lot of effort and) a div with the contentEditable attribute present. This is how most web-based WYSIWYG editors achieve rich formatting of inputs. See here for more info: http://ajaxian.com/archives/on-browser-wysiwyg
You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.
For example, to color input background for leading and trailing spaces:
<div class="bckg-container">
<div id="bckg-leading" class="bckg spaces">
</div>
<div id="bckg-middle" class="bckg">
</div>
<div id="bckg-trailing" class="bckg spaces">
</div>
<br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />
The three divs inside the container will change their width with input change.
Check the working example in jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/
You might be able to do it with some edit in place javascript (if it's not possible in pure html/css):
http://www.appelsiini.net/projects/jeditable/default.html
That jQuery plugin doesn't use html input fields so it could be possible to style different parts of the input. It has a couple of hooks for callbacks which you could use to style the input. Hope that helps as an idea.
You can have a label mocking that input and the real input to be hidden, then you can do a lot of things beteen label tags (e.g. colored spans).