gistfile1.txt

BODY.RHTML

<% content_for('body') do %>
	<div class="Login_EntryPage">
	<% view do %>
		<% form_view :outlet => true, :tag => 'table', :class =>'form' do %>
		  <tr>
		    <td class="Login_EntryPage_NameLabel"><%= loc(%(label_username)) %></td>
		    <td class="Login_EntryPage_NameField">
		    	<%= text_field_view :field => :user_name, 
		    		:bind => {
		    			:value => 'Login.loginFormController.userName'	
		    		} %>
		    </td>

		    <td rowspan="2" class="Login_EntryPage_UserType"> 
		    	<%= loc(%(label_usertype)) %>
		    	<% scroll_view :login_entry_page_user_type_scrollview, :outlet => true do %>
		    		<%= collection_view :login_entry_page_user_type_collectionview, 
		    			:outlet => true,
		    			:example_view => 'SC.ListItemView',
		    			:is_editable => false,
		    			:content_value_key => 'name',
		    			:can_order_content => true,
		    			:bind => {
		    				:content => 'Login.authenticationServerCollectionController.arrangedObjects',
		    				:selection => 'Login.authenticationServerCollectionController.selection'	
		    			}
		    		%>
		    	<% end %>
		    </td>
		  </tr>
	
		  <tr>
		    <td class="Login_EntryPage_PasswordLabel"><%= loc(%(label_password)) %></td>
		    <td class="Login_EntryPage_PasswordField">
		    	<%= password_field_view :field => :user_password, 
		    		:bind => {
		    			:value => 'Login.loginFormController.userPassword'	
		    		} 
		    	%>
		    </td>
		  </tr>	

		  <tr><td colspan="2" class="separator"></td></tr> 
		
		  <tr>
		    <td colspan="2" class="Login_EntryPage_Buttons">
		      <%= button_view :outlet => true, :title => loc(%(caption_cancel)), :cancel => true %>
		      <%= button_view :outlet => true, :title => loc(%(caption_login)), :default => true, :action => 'Login.loginFormController.commitLogin' %>
		    </td>
		  </tr>
		<% end %>
	<% end %>
	</div>
<% end %>





BODY.CSS

.Login_EntryPage {
	position: relative;
	left: 35%;
	width: 30%;
	margin-top: 10%;
	border: solid 1px gray;
	text-align: center;
}

.Login_EntryPage table {
	margin-left: 10%;
	text-align: left;	
}

.Login_EntryPage_NameLabel {
	text-align: right;
}

td.Login_EntryPage_PasswordLabel{
	text-align: right;	
}

td.Login_EntryPage_Buttons {
	text-align: center;
}

.login_entry_page_user_type_scrollview {
	width: 150px;
	height: 100px;	
}

.login_entry_page_user_type_collectionview {
	width: 100%;
}

.login_entry_page_user_type_collectionview .sc-collection-item {
	position: relative;
	//border: 1px solid red;
}