Profile Field Style

I would like the edit fields to be next to the Labels instead of under the label. I tried setting the width of .editfield in forms.css which does decrease the field width but I cant get the field to the right of the label like the dropdowns.

Thanks

  • Tammie

    @ASPDNoble: You need to do something along the lines of floating the label and resetting the size for the form fields to get that. You'd want to edit forms.css or have something in your custom class to do that.

    You would find width declarations in the forms.css such as:

    #container .standard-form input[type="text"] {
    margin-bottom:10px;
    width:98%;

    You may have to change a few instance in there or you want to use inheritance to avoid clashing with other input classes like for instance:

    .editfield input[type="text"]{
    width: 50%;
    float: left;
    }

    You may also have to call the .editfield label - I use editfield as that is just for that form if you want on all forms just change forms.css for all.

    Let me know if you need more direction but that should help you go to the right place to change things.

    In some browsers you may then get issues with floating and clearing so have to add in

    <div class="clear"></div>

    this would be in your profile page or wherever you are using the form.

  • ASPDNoble

    Almost got what I'm after but the following does not seem to have an effect on the type="selectbox". It's not an issue yet but I imagine I would have similar issues with the other field types as well. The simplest solution seems to be to float all objects right no matter the type at 85% and float all labels left at a width of 15%. +/- the padding etc. Your insight is much appreciated.

    THIS WORKS BUT ONLY FOR TEXT TYPE
    #container .standard-form input[type="text"]{
    width: 85%;
    margin-bottom: 10px;
    float: right;
    }

    THIS HAS NO EFFECT
    #container .standard-form input[type="selectbox"]{
    width: 85%;
    margin-bottom: 10px;
    float: right;
    }

  • Tammie

    @ASPDNoble: You have to apply it to any style in forms.css that you want there are each input type listed there so just work through them. Floating works but would mean you could / probably will get display issues without adding clears. I used text input as an example you'd want to consider:

    select (selectbox isn't a correct declaration), type="search", type="password", textarea.. all depends on what you want to do.

    Those all have no actual width values leaving it to the defaults in that theme so you'd want to create styles in your child or custom.css using the pattern I gave and then you'd be calling those. Probably want to leave out textarea as that is good to be wide.

    For an example and this is only an example this is up to you what you do as customisation:

    select{
    padding: 3px 5px;
    width: 50%;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    Hope that helps it's a matter of what you want as 50% may not be.

    The reason I do not suggest the floating is you'd have to clean up with clears or set them to have a 100% wrapper around to stop what I call 'tetris' elements which would be:

    label element label element label element

    It would literally just do that without clearing which isn't good.

  • ASPDNoble

    @tlister,

    Thanks for the help hear is what I came up with in case anyone else wants it. It requires 4 changes in forms.css, works in IE and Firefox and creates Right Aligned labels using 15% of the width with Textboxes using 80% which can be changed relative to your largest Label / Object Combination.

    Just curious. is there any better way than border-radius to get the rounded corners on the buttons in IE? I know its an IE CSS issue. Just trying to avoid Background images on the buttons.
    Thanks again :slight_smile:

    Change #1
    #container .standard-form input[type="text"]{
    width: 80%; /* set width of form elements to auto-size or know raming percentage, otherwise watch for wrap on resize */
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of label aligns textarea better in IE */
    }

    Change #2
    .submit{
    clear: both; /* Replace padding-top: 10px; with clear: Both; So IE will put the button in the Left Column. Padding is already Covered*/

    Change #3
    select{
    padding: 3px 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of label aligns textarea better in IE */

    }

    Change #4
    label{
    display: block; /* block float the labels to left column, set a width */
    float: left; /* block float the labels to left column, set a width */
    width: 15%; /* block float the labels to left column, set a width */
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right; /* Align the Label Text Right Just because it lkks better */
    padding: 0;
    }

  • Tammie

    @ASPDNoble: The only way to get rounding on IE would be images of some form even if you're faking it with smaller images - therefore that's why we use the border-raidius elements as it degrades gracefully but still gives a good experience to IE users. Glad you got it sorted and let me know if there is anything else I can assist you on. I'd check margins in Safari would be my only suggestion as sometimes that can cause issues with spacing but you should be ok if you balance against IE 6's issues with margins and padding.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.