Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 14:22
    dominik
    0

    Style Checkbox and Radiobutton lists

    Hello,

    how can i style checkboxlists and radiobutton lists? The text should float right of the radio button or checkbox. 

    I tried also to use html tags in the contour backend and it works until i click "update". After clicking "update" it shows undefined

    Thanks

  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 14:58
    dominik
    0

    can i change the generated html code? Than i would be able to place a div between the checkbox and the label

     

    That would also work

  • Comment author was deleted

    Aug 07, 2012 @ 15:05

    Hey Dominik currently you can't change to generated html code of the form but yoou should be able to style it with css

    More control over markup is however the top requested feature (http://issues.umbraco.org/issue/CON-58) and we are looking into ways of making this possible to include this in the next major release

    Thanks,
    Tim 

  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 15:09
    dominik
    0

    i tried to achieve this with css but its not working because i think the input field is not closed correct (closing tag is missing)

    <span id="bla" class="checkboxlist"><input style="border: 1px solid rgb(204, 204, 204);" id="bla" name="" value="" type="checkbox"><label for="">test</label><br>

    Can you please also tell me how i can enable html tags in the contour backend?

    Thanks

  • Comment author was deleted

    Aug 07, 2012 @ 15:26

    You should be able to target it with the following rule: #contour .radiobuttonlist input for checkbox list ir #contour .checkboxlist input for a checkboxlist

    Html isn't possible for the options since you can only set the contents of the label to some text

  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 15:29
    dominik
    0

    We really need a possibility to specify how the html which is generated should look like. I want to add some div classes in the same way as it works in RenderForm.ascs

    Where can i change to input field so it is closed correctly? I think this is an error and will produce invalid html

    Thanks

  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 15:31
    dominik
    0

    I tried the following:

    #contour span.checkboxlist input {float:left; width:30px;} 
    #contour span.checkboxlist label {float:left; width:200px;}

    So the label text is shown right the inputfield (if text is longer than one line)

    This does not work because the input field is not closed correctyl I think 

  • Comment author was deleted

    Aug 07, 2012 @ 15:41

    Just tried to target those and it works fine, do you see any affect when you float the input to right?

  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 15:43
    dominik
    0

    no float right does also not work because input field is not closed. Just let me know how i can close the input tag so it must look like this I think:

    <input type="checkbox" name="" />
    <label>text</label> 

    As it is rendered now:

    <input type="checkbox" name="">
    <label>text</label> 

    So it always think that label is inside <input> 

     

  • Comment author was deleted

    Aug 07, 2012 @ 15:57

    Looks like a bug the, added it to our issue tracker and will take a closer look at this http://issues.umbraco.org/issue/CON-73 would you mind telling me what browser you are using since I can't reproduce the styling issue

  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 16:01
    dominik
    0

    firefox 14.0.1

    google chrome 21.0.1180.60 m

    It would be fine to configure the html which is rendered later - otherwise i am not able to add divs, spans etc for styling the form

  • Comment author was deleted

    Aug 07, 2012 @ 16:05

    Is the default contour stylesheet still added in your case (you can check on the form settings)? Might be that some rules in there are causing the issue

  • dominik 711 posts 733 karma points
    Aug 07, 2012 @ 16:08
    dominik
    0

    yes this is added

  • Comment author was deleted

    Aug 07, 2012 @ 16:41

    Ok could you see if the styling has better effect when you disable the default one

    Thanks 

Please Sign in or register to post replies

Write your reply to:

Draft