Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.

change the output of html_checkboxes
Goto page 1, 2  Next
 
Post new topic   Reply to topic    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
axelf
Smarty Rookie


Joined: 26 Jan 2012
Posts: 10

PostPosted: Sat Oct 03, 2015 8:48 am    Post subject: change the output of html_checkboxes Reply with quote

Hello,

is it possible to change the output of html_checkboxes?
Instead of this

Code:
<label><input type="checkbox">Text</label>


i want this

Code:
<label><input type="checkbox"><span>Text</span></label>
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Sat Oct 03, 2015 3:01 pm    Post subject: Reply with quote

What for, exactly? I see no good reason to do that.
Back to top
View user's profile Send private message
axelf
Smarty Rookie


Joined: 26 Jan 2012
Posts: 10

PostPosted: Sat Oct 03, 2015 3:07 pm    Post subject: Reply with quote

I want to style the checkbox with css and need the span-tag for that. I can't use the label tag, because with css i can't style a parent element.

input:checked + span works for styling but it is not possible to style the label-tag by clicking on the checkbox. (without javascript)
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Sat Oct 03, 2015 3:09 pm    Post subject: Reply with quote

No, you don't need span tag for that.
Learn CSS, it lets you do everything you want without the use of useless markup.

group.class label { style; }
Back to top
View user's profile Send private message
axelf
Smarty Rookie


Joined: 26 Jan 2012
Posts: 10

PostPosted: Sat Oct 03, 2015 3:19 pm    Post subject: Reply with quote

ok, could you give me an example?

How can i style the label-tag, if i click on the checkbox? In the label-tag i want to change some css (the checkmark is visible), if the checkbox is checked. if the checkbox will be unchecked, the checkmark is hidden.

Either you don't know what i mean or you also should learn CSS. In my case the span-Tag is no useless markup.
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Sat Oct 03, 2015 10:01 pm    Post subject: Reply with quote

axelf wrote:
ok, could you give me an example?

How can i style the label-tag, if i click on the checkbox?

Same way you would style a <span> tag - attach jQuery event listener and do any client-side changes you wish.

Quote:
In the label-tag i want to change some css (the checkmark is visible), if the checkbox is checked. if the checkbox will be unchecked, the checkmark is hidden.

So, go ahead and do it. What's the culprit?
I could probably do it with pure CSS. Not sure about browser compatibility, but it may work for most.

Quote:
Either you don't know what i mean or you also should learn CSS. In my case the span-Tag is no useless markup.

In either case, you won't need any parasitic markup for such a simple task.
Back to top
View user's profile Send private message
axelf
Smarty Rookie


Joined: 26 Jan 2012
Posts: 10

PostPosted: Sun Oct 04, 2015 8:08 am    Post subject: Reply with quote

AnrDaemon wrote:

Same way you would style a <span> tag - attach jQuery event listener and do any client-side changes you wish.


In my second post i wrote without javascript.

AnrDaemon wrote:

I could probably do it with pure CSS. Not sure about browser compatibility, but it may work for most.


it may work for the most? Not in Firefox or IE

AnrDaemon wrote:

In either case, you won't need any parasitic markup for such a simple task.


You think it is better to add Javascript for such a simple task as adding a simple span-tag. I think no.

btw... this was not my question
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Sun Oct 04, 2015 3:17 pm    Post subject: Reply with quote

axelf wrote:
In my second post i wrote without javascript.

You didn't present any code, so no.
Back to top
View user's profile Send private message
axelf
Smarty Rookie


Joined: 26 Jan 2012
Posts: 10

PostPosted: Sun Oct 04, 2015 3:37 pm    Post subject: Reply with quote

Sorry, but your answers are not very helpful for me.
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Sun Oct 04, 2015 5:55 pm    Post subject: Reply with quote

Your questions aren't any more helpful. Show us, how you are going to use CSS in your case, and we'll see if you really need what you are looking for.
Back to top
View user's profile Send private message
axelf
Smarty Rookie


Joined: 26 Jan 2012
Posts: 10

PostPosted: Sun Oct 04, 2015 6:33 pm    Post subject: Reply with quote

The content hast to be changed on click.
This is the reason, why i want to change the output.

I need the span-tag in order to get the following css working. I cant use the label, because it is a parent element

Code:

input[type='checkbox'] + span:before {
  content: '';
}

input[type='checkbox']:checked + span:before {
  content: 'x'
}
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Sun Oct 04, 2015 8:26 pm    Post subject: Reply with quote

Sorry, but that doesn't make much sense. Unless you want to completely replace checkbox with text.
In which case, just do exactly that!
Code:
<html>
<head>
<title>Checkbox test.</title>
<style type="text/css"><!--
  .checkboxlist label>input[type="checkbox"] {
    content: '[ ]';
  }
  .checkboxlist label>input[type="checkbox"]:checked {
    content: '[x]';
  }
//--></style>
</head>
<body>
<optgroup class="checkboxlist">
  <label><input type="checkbox" name="n1"/>n1</label><br/>
  <label><input type="checkbox" name="n2"/>n2</label><br/>
  <label><input type="checkbox" name="n3"/>n3</label><br/>
  <label><input type="checkbox" name="n4"/>n4</label><br/>
  <label><input type="checkbox" name="n5"/>n5</label><br/>
</optgroup>
</body>
</html>
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Sun Oct 04, 2015 8:41 pm    Post subject: Reply with quote

And if that isn't what you need, I suggest re-reading the help page - especially the "escape" parameter.
Back to top
View user's profile Send private message
axelf
Smarty Rookie


Joined: 26 Jan 2012
Posts: 10

PostPosted: Sun Oct 04, 2015 8:50 pm    Post subject: Reply with quote

I want to completely replace the checkbox with custom css. Sorry, i forgot in my CSS the following:

Code:

input[type='checkbox'] {
  display: none;
}


In order to get it to work, i need this additional span-tag. Yor example will not work (wrong markup and css has no effect)

I only want to know whats the best way (or smarty way) to modify the output of the smarty-function
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1633

PostPosted: Mon Oct 05, 2015 6:30 am    Post subject: Reply with quote

axelf wrote:
Yor example will not work (wrong markup and css has no effect)

I wouldn't have suggested it without testing. Not my fault that modern browsers have interesting ideas about standard compliance.

Quote:
I only want to know whats the best way (or smarty way) to modify the output of the smarty-function

Read my previous reply.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> General All times are GMT
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP