We have a project that is using labels as buttons. The only issue is the text gets selected when people click the button sometimes. A hack was to set focus to another control on the label click event but we would like a more elegant (java?) based solution.
Thanks!
Um I think using a regular button would be your best solution…
If you don’t like its style you can change it. Set borders to none and it won’t look like a button anymore.
You’re ruining a whole bunch of things by not using an actual button or anchor for that, not the least of which being assistive devices.
Thanks for the reply
OSX likes to screw with the height of the button size on in safari on mac.
I need to use web labels due to the regular web buttons not supporting multiline which is imperative for our solution. Does anyone know of any solution for this?
Why not create your own button using the webSDK using the <button>...</button> tags?
CSS style=“white-space: normal;” makes a button multiline with auto wrap on space. Can be applied through JavaScript to the Xojo WebButton.
However, I found no way to create a line break.
Setting the caption in the shown event seems to work here on MS Edge, Firefox and Safari, but not on Opera. This all tested on Windows 10.
me.Caption = "row one"+EndOfLine+"row two"+EndOfLine+"row three"Probably this is caused by the fact that Windows endofline is a CR and a LF, while on a Mac or Linux endofline is only a LF causing the browser to interpret the linefeed as a
instead of new line.
The caption editor in the IDE also only inserts a LF for going to a new line.
[quote=251356:@Andre Kuiper]Probably this is caused by the fact that Windows endofline is a CR and a LF, while on a Mac or Linux endofline is only a LF causing the browser to interpret the linefeed as a
instead of new line.
The caption editor in the IDE also only inserts a LF for going to a new line.[/quote]
Under Windows, EndOfLine is CR+LF.
Fact is, in HTML, endofline is simply not interpreted, and has to be replaced by
or
.
Here, with 2015R4.1 under Windows 10 build 14271, endOfLine is interpreted by Xojo as
, and what I see in Edge and Chrome is
un<br>deuxI looked at the HTML code.
<input id="MvKA9QUn_inner" name="Button1" value="un<br>deux" type="button">Obviously, using input won’t help, as it seems
is not available in an input value field.
I believe the multiline label used as button is the best solution.
Or, for a nicer result, maybe a couple pictures : regular state and mouse over.
Michel,
I think we both are saying the same thing, however if you replace in my example the endofline with only CHR(13) you also get the caption in three lines. The problem is not the LF but the missing CR in the caption editor that enables multiline button caption.
Andre, in the latest version of Xojo EndOfLIne as well as chr(13) appears as
, which the browser does not display as a line break but as a tag.
Michel, i tested again in Xojo 2015r4.1 on Windows and still see the behaviour i said.
Simply this line of code in the shown event of the button:
me.Caption = "row one"+chr(13)+"row two"+chr(13)+"row three"and i get a button with 3 lines text as caption in the browser.
Could it be that you tested on a Mac and i on a Windows box and that that is showing a different behaviour?
Andre, I am sorry, I get
in lieu of chr(13).
Xojo does what is expected, translating the end of line in
, but the browser does not interpret it correctly.
The issue is reported on the Internet, and some people suggested to do a line break in the HTML code in older posts. It seems that no longer works.
The mere fact that we do not get the same result shows there is an issue. In practice, I would recommend to stay away from less than 100% reliable methods.
Michel,
On Windows Firefox, Edge and Safari work correct and IE and Opera don’t.
Would be nice to know the platform and browsers you tested.
I agree with you that it’s browser-dependable and that we should only use reliable methods.
Andre,
Under Windows 10
I keep telling you (see above) :
All of them show
instead of line break.
Sorry if it does not work here,I copy and paste your code in a project. I cannot explain why. That is a fact I would have loved to find a workaround for.
Sorry, overread that you did test on Windows. VM or real windows box?
Very strange that you get different results for Edge and Firefox.
Thanks for trying my suggestion.
[quote=251370:@Andre Kuiper]Sorry, overread that you did test on Windows. VM or real windows box?
Very strange that you get different results for Edge and Firefox.
Thanks for trying my suggestion.[/quote]
It is a real, physical PC, as usual. The only true way to develop for Windows and see what the result will be on a customer machine.
“the text gets selected when people click the button sometimes. A hack was to set focus to another control on the label click event but we would like a more elegant (java?) based solution.”
Weblabel with MouseUp event, which traps the click. AND weblabel.enabled=false !
It works on my Chrome and doesn’t select the text!