i want to set the width of the html tag . And also apply css on the browse button which is provided in the input type file.
I referred the following -
Is there a way to set width of for showing in Firefox?
also referred following-
Setting uniform width in all browsers
but it is for specific browser. It should work on the mozila firefox , netscape navigator, google crome,safari etc. and i don't want to hide the original input control.
how to do this?
The short answer is that you can not really style the input file, and it's like this by design.
how ever, some tricks are available for you, for example:
http://www.quirksmode.org/dom/inputfile.html
You don't. It doesn't work that way.
You can specify the size of the element, but the browser chooses itself how to use that space to display the input field and the button. You can't style the intput field and the button separately.
It's not even specified in the standard that the file input should have an input box and a button. The browser can display the control any way it sees fit, and some browsers displays it differently, for example using a button and a text label.
Related
I have a problem with Drupal7's text editor.
I put an image inside my texts (By CKEditor), and set some styles to the image (For example width or height), and save the post, when I back to edit the post, the styles gone and my image rolls back to the default width and height!
See the issue here:
To make sure that these images will actually also be rendered (when viewing the page), make sure that the "text format" used in the node does allow the img-tag. Typically for a node using the "Filtered HTML", it could well be that the img-tag is not allowed (yet) as one of the available HTML tags. In that case, your HTML code does include an 'img" tag, but when viewing the saved node the image is not rendered (visible). To resolve it, within admin you must enter the img-tag as one of the allowed HTML tags for the text format used in the node.
And if the img-tag is already allowed in the filter you're using, then it must be some other tag that is not yet allowed.
Unexpectedly for myself I found out that buttons impudently ignore the size of the text and easily cut it with a decrease.
Is there something like sizeAdjustPolicy as at QComboBox? If not, what is the correct decision?
In Google and other places I didn't find anything intelligible.
Thanks in advance!
edit2:
I used Qt Style Sheets, cleaned - works fine. Have to give up beauty.
Solution: it was in Qt Style Sheets. If there to use min-width property then something spoils and the button ignores the text size.
To prevent a button from getting too small, set its horizontal size policy to MinimumExpanding. I don't see a reason to use stylesheets for that.
If you wish to manage the size of the button yourself, you can get the minimum size hint of any control by using the minimumSizeHint method.
It was in Qt Style Sheets. If there to use min-width property then something spoils and the button ignores the text size.
You can refer to this question to determine the text size and set the button width according to it using QFontMetrics.
Using blockUI. I looked through the options in the documentation, through the plugin itself, and even here on stackoverflow and I can't find where to change the font-family declaration for this. It appears to be using Times by default. Also, the font is displayed over a padded area. Is there a way I can remove that padded area part, I want only the text on top of the dimmed screen. Thanks.
Use message option for this.
Document here http://jquery.malsup.com/block/#options
I am creating a page in asp.net. I am trying to show some information in tabular format when user hovers on a inout button. To do this, I am setting alt attribute to input type button because it should be javascript independent. I tried creating a table and assigning it to the alt attribute as a text.
<input type="button" value="save" alt="<table><tr><td>some info </td></tr>
<tr><td>some other info </td></tr></table>"/>
But it is not displayed as a table with two ros. Instead it is displayed as a single line.
Is there any way to show it in tabular format?
This is not possible just like this. Alt can be just plain text.
You'll have to use JavaScript. Try to google for it :)
You'll have to:
Create table.
Using CSS, set it's position to absolute, near your control and display: none
On item hover, you have to set display: block.
Best for this kind of behavior is to use some Javascript framework, IE jquery
jquery.com
specially read these:
http://api.jquery.com/hover/
http://api.jquery.com/hide/
http://api.jquery.com/show/
Agreed with Ales, Javascript would make this a breeze. YUI's Tooltip allows you to instantiate a Tooltip associated with an element, or set of elements (changing the Tooltip's context, so in case you have many similar behaviours spread across a screen).
http://developer.yahoo.com/yui/examples/container/index.html
Once you have instantiated the Tooltip, its something like Tooltip.setBody("your HTML code");, though by default Tooltip sucks in title text of an <a> tag as its content, or possibly even alt text of an element - not 100% on the alt text default part though - good chance that if it doesn't do it by default, if you grab the alt attribute contents it will display it correctly inside the Tooltip.
Others have already told you that what you've asked for isn't possible, as HTML attributes must be plain text, not more HTML.
They've also told you that there are Javascript and JQuery libraries which will help you do what you're wanting to do. There are loads of scripts you could use, here's a link to one that you might want to try: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I feel I should add one further point which others have missed, and which is actually quite important:
You're using the wrong attribute.
The alt attribute is not the correct attribute to use for a hover tooltip effect. You should be using the title attribute for this.
Using alt works this way for historic reasons in some browsers (I believe it works in IE, but not much else), but it is not intended as a tooltip. The correct use of alt is for a small bit of descriptive text that will appear if the image is not loaded. This could be because the file failed to load, or the user has images turned off, or the user has a text-to-speech browser, etc, but if the image is displayed, then this text should never be displayed.
The title attribute on the other hand is intended to be displayed, and all browsers implement it as a tooltip (in fact, it's not just on <img> tags; you can use title for any element).
Hope that helps.
As you may know, you can make your own file input control using the (hacky) approach of positioning the file input over your custom button and using opacity: 0 on the file input itself.
The image below shows the intended design with the file input absolutely positioned over the browse button.
As you can see, the faux browse button is much larger than the one the browser (Firefox 4) has drawn.
If I increase the width of the input, it seems to reach a limit where it won't increase anymore.
Here is a jsFiddle to play with, demonstrating the problem. The real browse button should be the same size as the faux one.
Is there a way to pull this off, or must I use Flash or make the button smaller?
font-size:70px;
http://jsfiddle.net/rH5SY/9/