I would like to have the button shows icon only on small device; and shows text when the clientWidth is big enough. How to do this?
Try this.You can dynamically bind icon and label bases on the platform.
<q-btn square color="primary" text-color="white" :icon="$q.platform.is.mobile?'home':''" :label="$q.platform.is.mobile?'':'Home'">
</q-btn>
Related
I am interested in creating a :disabled button that has loading gif which follows the text of the button. Example here http://jsfiddle.net/roman_khrystynych/YTBLs/
The idea is that when a user clicks the button it begins showing a loading animation next to the changed text. In this format the button is disabled. I would like to use this format for all the buttons on the site which means that the text will quite often change.
Because of this I would like the button to be structured in a way that would automatically position the loading gif next to the text.
Any suggestions on how to format this button so that in disabled format it shows the animation gif right next to the text?
You could use LABEL tags with a CSS background to go with the buttons. When the button is disabled, change the class name on the label to show the image.
I would do it like this:
<button>Submit<span> * </span></button>
Stick your graphic on/in the <span> tag.
This should have a really obvious answer but I can't figure it out...
I've made a button in Access 2007 that takes the user to a form (and other buttons that do other things). I've made the button's background an image so that I could have a gradient-style button but I'd also like to have text on top of this. There is text on the button but it gets hidden either because it's just a name given to the button for VB or because the gradient image is being place on top of it...
any ideas?
Access 2010, and Access 2007 supports both text and graphics on buttons.
Eg note the top buttons:
or simply this:
I do believe that transparency in 2010 is better supported, and the options for buttons in 2010 does include shadow and gradient options:
Eg:
I'm not sure how you did set picture as button background. Might be do you mean that you have two independent controls, an image and a button. In this case right click on the image and Position / Send to back. Back style of the button should be Transparent, but Transparent property should be set "No".
I am creating icon menu (toolbar with icons) in gtk# and I do not know why my application always selects (highlights) first icon (every parameter is default). Is there a way to have all icons unhighlighted (highlight only when cursor moves over icon or user clicks on icon)?
Every answer will be very much appreciated.
It looks like it has keyboard focus. You probably want to give another widget the default focus.
In AS3 I have a button on the stage and above it I create a textbox box dynamically with code.
My problem is that the area that is under the text (i.e. that part of the button) is no longer clickable.
I have set:
tBox.selectable = false;
but that doesn't solve it.
Any ideas
Season greetings,
Luben
Use InteractiveObject.mouseEnabled:
textField.mouseEnabled=false;
If you set component.visible to false it does not interact with the user.
So, if you set tBox.visible = false then it will be invisible and the button will become clickable. Just a thought, but overlapping components is really bad UI design. If you have space on your stage, you should consider keeping them separate
The problem is that text field (despite it's transparent) is lying over button. To make click on button possible you have to be sure that button is in front of text. Take a look at AddChildAt method of DisplayObject. Objects with greater position index are lying over objects with lower position index. So all you need is to make sure that button has greater index:
container.addChildAt(button, 1)
...
container.addChildAt(text, 0)
P.S.: you may embed button dirrectly into text field using html <a href="javascript:..."><img src="link_to_image"><a/> or something like that.
In a HTML form I have a file field like this:
<div class="filefield">
<input type="file" name="myfile" id="fileinput">
</div>
It displays a button and some text besides the button. When no file has been selected yet, the text is: No file chosen. If there is a file already selected, it displays the name of the file.
This text displays on the right side of the button. I want it to display below the button. I have tried numerous things in CSS, and nothing works, the No file chosen just always displays on the right side of the button, even if both the div and the input are given fixed widths only as wide as the button, and a fixed height high enough for a button and two lines of text, the text still displays on the right, outside of the div, and not below where the is space inside the div. How to make it wrap so the text displays below the button?
With #Guffa's answer showing that you can't mess with that field, you could create a hack around it.
What about a button element, that on click acts like a file browser button? And then a span element that holds the value of that file browser input? It would be some js hackery for sure, but could solve the problem.
EDIT
Working example: http://jsfiddle.net/nmeAW/1/
Edit 2
Even more better working example: http://jsfiddle.net/nmeAW/2/
You can't. The file input field is a single control, even if it looks like several controls that could be controlled separately.
Besides, how the file input control is displayed depends entirely on what browser you are using. It's appearence is not specified in the standards, so any browser vendor can choose to display it any way they see fit.
You might look into jQuery and some of the upload file plugins that can help you "restyle" the input essentially by hiding it and activating/displaying file selected information in html.
http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/
http://www.uploadify.com/demo/
http://www.plupload.com/example_queuewidget.php
http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/