Re: How to use CSS buttons outside of forms
"Christopher Dodunski" <[email protected]>
| Newsgroups | gmane.comp.java.tapestry.user |
|---|---|
| Message-ID | <[email protected]> |
Hi Chris, Yes, you were absolutely correct. Tapestry was changing my <input> tags to <a> tags, and then of course the input.opto-button CSS code got totally ignored. Modifying the CSS from 'input' to 'anchor' type wasn't so trivial, particulary with vertically centreing button labels, which is easy with 'input' elements (vertical-align="middle"). I'm not sure why Tapestry converts all 'input' tags to 'anchor' tags. Certainly it is a trap for unsuspecting HTML (TML) designers. Thanks & regards, Chris. > I mostly use <a> elements styled as buttons for this - A standard > bootstrap > thing. > > It sounds like your CSS is off if your elements disappear when rendering > them with tapestry, take a look at the generated HTML to see what is going > on. Maybe your <input> is rendered as <a> (It is "link" components so it > could be plausible, but I do not have the sources handy on this machine to > check). > > I guess you could make a plain HTML button that delegates its clicks to a > hidden link using Javascript, if you cannot fix your CSS, but it feels > like > a hack compared to just styling the links. > > -- > Chris > > On Mon, Dec 25, 2017 at 3:48 AM, Christopher Dodunski < > [email protected]> wrote: > >> This problem has proved trickier to solve than expected. >> >> The below tag produces a displayed button, but obviously without any >> functionality, as the tag contains no Tapestry-specific elements. >> >> <input type="button" class="opto-button delete-user-btn" value="Delete >> User"/> >> >> The problem comes on adding Tapestry markup, with the intention of >> invoking a deleteUser() method in the page class. Neither of the below >> produce a displayed button. In other words, as soon as I attempt to >> 'Tapestry-ise' the button, it vanishes. >> >> <input type="button" t:type="eventlink" t:event="deleteUser" >> class="opto-button delete-user-btn" value="Delete User"/> >> >> <t:eventlink t:event="deleteUser" class="opto-button delete-user-btn" >> value="Delete User"/> >> >> Chris. >> >> >> --------------------------------------------------------------------- >> To unsubscribe, e-mail: [email protected] >> For additional commands, e-mail: [email protected] >> >> > --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]