Apex Code Development You need to sign in to do that
Don't have an account?
1 column on a form
I have created a visualforce page that includes the apex:form tag... I did so as this page will be used on our site, to collect information from my customers. As it stands, we want only one row of fields, which we have, but the form appears to reserve space for 2 columns, which makes the form look ridiculous, as all fields are favoring the left hand side of the form, while the right most side of the form is blank... How can I get the single row of fields to fill the entire space (or eliminate row 2, so the fields at least look like they are in the center of the form
Here is a snap shot of how the form looks now
OK... Apparently I can't paste an image into this forum... (nice)
So I guess I'll try to show as best i can
----------------------------------------FORM----------------------------------------------
............................................Title of Form
field label1 [______________]
field label 2[______________]
..........................................................................[submit]
-----------------------------------------------------------------------------------------------
I would like it to look like:
----------------------------------------FORM----------------------------------------------
............................................Title of Form
..................field label 1.....[___________________________]
..................field label 2.....[___________________________]
...............................................[submit]
-----------------------------------------------------------------------------------------------
So not only do I want a single (uniformed) column set,
But I want to be able to expand the length of the label and the input field text box
and I want the Submit button centered instead of drifting out to the right, which also looks hidieous
You would need to play around with styling.
I dont know what VF tags you have used in your page, for major VF tags you have an attribute called style (for inline styling), style class (if you are referring to your style class from the head section of the page).
Yes, you have to play with styles, something like this:
<style>
label
{
margin: 5px 30px 5px 10 px;
}
#buttons input
{
margin: auto 5px;
}
</style>
<apex:form>
.
.
.
.
<div id="buttons"><apex:commandButton....... /></div>
</apex:form>
I tried using the example that you provided, and I do follow the logic, but for some reason I get weird results... I.e. changing the values, in may cases don't appear to do anything, and then some values, push the entire form to the right, causing each label to wrap after the first " " (space). Basically the labels look like this
......................Company
..........Name
......................I
.........T Contact
.....................Phone
.........Number
I'll keep playing with the values until I figure it out... But this raises a question that I've been having difficulty getting an answer on... In your example, you point out two object id's ("Label" & "#buttons") My question is: Where can I get a complete listing of ALL of the items that reside within a apex:form tag(and/or all ID's by Tag) that can accept style changes, In otherwords, I would have never guessed "#buttons" is the ID I need to modify a buttons styles. What other items are there???
Maybe I'm not explaining myself correctly.
When I add the apex:form tag to a page. That element is insclusive of several other elements(content) I'm confused, why knowing what elements are available is so sacred.
If I add
<style>
Bubbles
{
align-text="left"
}
</style>
Should I expect that to do anything of value... Of course not, as "bubble" isn't an element contained within the form. So why is it so difficult to get a listing of all of the elements that are available to apply styles to... And why am I the only person outraged by this notion.
I'm not going to try to convince you that i'm the CSS guru, but I'm fairly confident with how to use CSS, but only when I know what elements are available to apply styling too... Using regular html, I would be defining all of the elements. So what am I missing here. I know! Reference material! How can I get that!
If I were you, I would check the HTML's source code generated by apex tags, and start working from there.