Please, help!
I run the test (cucumber) and it gives this error : Unable to find link "New country" (Capybara::ElementNotFound)
<% content_for :page_header do %>
<% render partial: "layouts/app_page_header" , locals: { page_title: "Countries" } %>
<% end %>
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country code
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country name
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Cities count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Legal forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Taxation forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="countries">
<%= render #countries %>
</tbody>
</table>
</div>
</div>
</div>
</div> <br>
<%= link_to t('.new_country_button'), new_admin_country_path, id:'new_admin_country_submit', class: 'btn btn-primary' %>
<p>
<%== render partial: "shared/pagy" , locals: {pagy: #pagy} if #pagy.pages> 1 %>
</p>
when I enter "print page.html" it shows that I am on the correct page and I don’t understand why I don’t find the "New country" button I need.
UPD
so I ran the command "puts page.body" in the console and got the html
<!DOCTYPE html>
<html>
<head>
<title>CosmoPort</title>
<script src="/packs-test/js/application-0a4f8f4726a3a8685a4c.js"></script>
</head>
<body>
<div
x-data="{ sidebarOpen: false }"
#keydown.window.escape="sidebarOpen = false"
class="h-screen flex overflow-hidden bg-gray-100">
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
<div
x-show="sidebarOpen"
x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state."
class="md:hidden">
<div class="fixed inset-0 flex z-40">
<div
#click="sidebarOpen = false"
x-show="sidebarOpen"
x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state."
x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0" aria-hidden="true">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div
x-show="sidebarOpen"
x-description="Off-canvas menu, show/hide based on off-canvas menu state."
x-transition:enter="transition ease-in-out duration-300 transform"
x-transition:enter-start="-translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="-translate-x-full"
class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button
x-show="sidebarOpen"
#click="sidebarOpen = false"
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span class="sr-only">Close sidebar</span>
<!-- Heroicon name: x -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="flex-shrink-0 flex items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
</div>
<div class="mt-5 flex-1 h-0 overflow-y-auto">
<nav class="px-2 space-y-1">
<a class="sidebar-navigation-link" href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Dashboard
</a>
<a class="sidebar-navigation-link active" aria-current="page" href="/admin">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
Admin
</a><br/>
<div class="space-y-1">
<h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider" id="admin-headline">
Admin
</h3>
<ul class="space-y-1" role="group" aria-labelledby="admin-headline">
<li>
<a class="sidebar-submenu-link" href="/admin/users">Users</a>
</li>
<li>
<a class="sidebar-submenu-link active" aria-current="page" href="/admin/countries">Countries</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/cities">Cities</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/legal_forms">Legal forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/taxation_forms">Taxation forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/businesses">Businesses</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/conversations">Conversations</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="flex-shrink-0 w-14" aria-hidden="true">
<!-- Dummy element to force sidebar to shrink to fit close icon -->
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col h-0 flex-1">
<div class="flex items-center h-16 flex-shrink-0 px-4 bg-gray-900">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
</div>
<div class="flex-1 flex flex-col overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-800 space-y-1">
<a class="sidebar-navigation-link" href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Dashboard
</a>
<a class="sidebar-navigation-link active" aria-current="page" href="/admin">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
Admin
</a><br/>
<div class="space-y-1">
<h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider" id="admin-headline">
Admin
</h3>
<ul class="space-y-1" role="group" aria-labelledby="admin-headline">
<li>
<a class="sidebar-submenu-link" href="/admin/users">Users</a>
</li>
<li>
<a class="sidebar-submenu-link active" aria-current="page" href="/admin/countries">Countries</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/cities">Cities</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/legal_forms">Legal forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/taxation_forms">Taxation forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/businesses">Businesses</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/conversations">Conversations</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
<button
#click.stop="sidebarOpen = true"
class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
<span class="sr-only">Open sidebar</span>
<!-- Heroicon name: menu-alt-2 -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
</svg>
</button>
<div class="flex-1 px-4 flex justify-end">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: bell -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
</button>
<!-- Profile dropdown -->
<div #click.away="open = false" x-data="{ open: false }" class="ml-3 relative">
<div>
<button
#click="open = !open"
x-bind:aria-expanded="open"
class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<svg class="h-8 w-8 text-gray-600 rounded-full" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
</div>
<!--
Profile dropdown panel, show/hide based on dropdown state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div
x-show="open"
x-description="Profile dropdown panel, show/hide based on dropdown state."
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<a role="menuitem" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" href="/users/edit">Account</a>
<a role="menuitem" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" href="/profiles/edit">Edit profile</a>
<a role="menuitem" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a>
</div>
</div>
</div>
</div>
</div>
<main
x-data=""
x-init="$el.focus()"
class="flex-1 relative overflow-y-auto focus:outline-none" tabindex="0">
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-bold text-gray-900">
Countries
</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country code
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country name
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Cities count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Legal forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Taxation forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="countries">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RU</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Russian Federation</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">0</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">0</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">0</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a class="text-indigo-600 hover:text-indigo-900" href="/admin/countries/eb1c9426-8d31-443d-8131-12d5026ec220">Show</a> |
<a class="text-indigo-600 hover:text-indigo-900" href="/admin/countries/eb1c9426-8d31-443d-8131-12d5026ec220/edit">Edit</a> |
<a data-confirm="Are you sure?" class="text-red-600 hover:text-red-900" rel="nofollow" data-method="delete" href="/admin/countries/eb1c9426-8d31-443d-8131-12d5026ec220">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> <br>
<a id="new_admin_country_submit" class="btn btn-primary" href="/admin/countries/new">New country</a>
<p>
</p>
</div>
</div>
</main>
</div>
</div>
<footer class="footer">
<div class="container mx-auto mt-5">
© <span id="current_year"></span> CosmoZoo Inc, All rights reserved.
</div>
</footer>
</body>
</html>
test code (
the required line starts with #New country):
password = (0...20).map { ("a".."z").to_a[rand(26)] }.join
# See countries
Given("I am an admin") do
admin_user = FactoryBot.create(:user, name: "Tim Cook", email: "tester#example.com", password: password, confirmed_at: Time.zone.today)
admin_user.add_role :admin
expect(admin_user.has_role?(:admin)).to be_truthy
expect(admin_user).not_to be_nil
end
When("I am log in as an admin") do
visit user_session_path
fill_in "user_email", with: "tester#example.com"
fill_in "user_password", with: password
click_button "Log in"
end
Then("I should be logged in as an admin") do
expect(page).to have_content("Signed in successfully.")
end
When("I create countries") do
FactoryBot.create(:country,
country_code: "RU")
end
Then("I should see countries") do
visit admin_dashboard_path
click_link("Countries", match: :first)
expect(page).to have_content("RU")
puts page.body
end
# New country
When "I submit a new country" do
click_link "New country"
end
Then("I should see the new country") do
pending # Write code here that turns the phrase above into concrete actions
end
From the HTML the element should match the :link selector. That means there's really only a couple of possible reasons.
The link isn't actually visible on the page - add page.save_and_open_screenshot before the click_link to see what the page actually looks like. Is it possible you're not running the browser wide enough, and it's collapsing to a mobile layout or something?
You have CSS being applied to the link which is changing the case of the text - screenshot would show that too
One other thing to try would be click_link('new_admin_country_submit') and see if that actually finds and clicks the link (which would indicate an issue with text case, etc)
Related
I created a modal using Alpine JS and TailwindCSS in a Rails app. my problem with that is when I click file upload button the modal closed to open the file browsing popup.
I need the modal to be still open so that I can view the file that the user uploaded.
Is there a way in AlpineJS to keep the modal open? OR do you have any alternative solution?
Code:
<div x-data="{'isModalOpen': false}" >
<div class="p-3 flex items-center gap-3 rounded-md hover:bg-gray-100 transition ease-in-out duration-150">
<%= heroicon(:outline, :user, 'h-5 w-5 text-gray-900') %>
<button x-on:click="isModalOpen = true" class="text-sm font-medium">
<%= t('sidebar.user_profile') %>
</button>
</div>
<div
class="modal"
role="dialog"
tabindex="-1"
x-show="isModalOpen"
x-cloak
x-transition
>
<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
<div class="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
<div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
<button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Close</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">User Profile</h3>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label for="last-name" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Last name </label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label for="email" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Email address </label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<input id="email" name="email" type="email" autocomplete="email" class="block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md">
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label for="cover-photo" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Cover photo </label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
<div class="space-y-1 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex text-sm text-gray-600">
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
<span>Upload a file</span>
<input id="file-upload" name="file-upload" type="file" class="sr-only">
</label>
<p class="pl-1">or drag and drop</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Deactivate</button>
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%= link_to controller: :personal_data, class:"px-6 py-4 flex items-center text-sm font-medium" do%>
<span class="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-red-600 rounded-full">
<span class="text-red-600">01</span>
</span>
<span class="ml-4 text-sm font-medium text-red-600">Personal Data</span>
<% end %>
The view seems to make it that the class attribute is a GET function. Here's the generated HTML
<a href="/personal_data?class=px-6+py-4+flex+items-center+text-sm+font-medium">
<span class="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-red-600 rounded-full">
<span class="text-red-600">01</span>
</span>
<span class="ml-4 text-sm font-medium text-red-600">Personal Data</span>
</a>
How should I write it so that the class would be working as it should be?
You can set url using personal_data_path
<%= link_to personal_data_path, class:"px-6 py-4 flex items-center text-sm font-medium" do%>
<span class="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-red-600 rounded-full">
<span class="text-red-600">01</span>
</span>
<span class="ml-4 text-sm font-medium text-red-600">Personal Data</span>
<% end %>
So I am trying to create a Thymeleaf loop where have a list of n elements. Every fourth (starting at the first) I create a parent element, and each one gets added to that until a new parent is created.
So the idea is
for e : elements {
if index % 4 = 0 {
create new parent
}
add e to parent
}
I am trying to implement this in Thymeleaf and cannot get anything working. Here is the closest I think I have gotten (that inner loop causes "IllegalStateException: No index"):
<div th:each="metric, rowStatus : ${metrics}"
class="row tile_count" th:if="${rowStatus.index % 4} == 0">
<div th:each="i: ${#numbers.sequence(rowStatus.index , rowStatus.index +4)}"
th:replace="layouts/template.html :: metricCard(name=${metrics[i].name}, value=${metrics[i].value},description=${metrics[i].description}, severity=${metrics[i].severity})"></div>
</div>
The desired html is something in the ball park of:
<div class="row tile_count">
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total HR1 Files</span>
<div class="count">17</div>
<span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
<div class="count green"> 7,353</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
<div class="count">43 sec</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
<div class="count">0</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
<div class="count">7,353</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>21% </i> From last Week</span>
</div>
</div>
<div class="row tile_count">
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total HR2 Files</span>
<div class="count">05</div>
<span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
<div class="count green">5,421</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
<div class="count">10 sec</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
<div class="count">2</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
<div class="count">5,419</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
</div>
</div>
You can try th:remove like this:
<th:block th:each="metric, iterStat : ${metrics}">
<div class="row tile_count" th:remove="${iterStat.index % 4 == 0 ? none : tag}">
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
...
</div>
</div>
</th:block>
You can also try the following:
<div class="row pt-5" th:remove="${status.index%4 == 0} ? none : tag">
<div class="col">...</div>
<th:block th:if="${status.index eq 4}" th:utext="'</div>'" />
I used this, cause the remove "tag" feature don't delete the closing div from my row.
I have a little problem - I build a shopping cart checkout with 4 steps (with stepper and links to partial views).
Now I have to call a special #id (the attribute of tags) from the redirectToAction...
How is this possible?
the thing is - I'm in step 2 (partial view) and call an actionresult, which redirect me to the "main view" - but I have to go to the 2nd or 3rd step.
Is there a way how to handle this?
Tried already to overload the button, so the href call the link and an onclick function() calls the actionresult, but this is not possible
Also tried to give the #id as a route value, but it seems doesn't work...
<script>
function goBack() {
window.history.back();
}
//Initialize tooltips
//$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs .nav-item .active');
var $activeli = $active.parent("li");
$($activeli).next().find('a[data-toggle="tab"]').removeClass("disabled");
$($activeli).next().find('a[data-toggle="tab"]').click();
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs .nav-item .active');
var $activeli = $active.parent("li");
$($activeli).prev().find('a[data-toggle="tab"]').removeClass("disabled");
$($activeli).prev().find('a[data-toggle="tab"]').click();
});
</script>
<form class="form cf">
<div class="wizard">
<!-- ============================================================ NAVIGATION ============================================================ -->
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<!-- ======================================== Schritt 1 - Warenkorb ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1" class="nav-link active navigation">
<span class="round-tab">
<i class="fa fa-lg fa-shopping-cart"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 2 - Ausleihdatum ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2" class="nav-link navigation disabled" id="schritt">
<span class="round-tab">
<i class="fa fa-lg fa-calendar-check-o"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 3 - Rechnung- und Lieferadresse ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3" class="nav-link navigation disabled">
<span class="round-tab">
<i class="fa fa-lg fa-address-card-o"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 4 - Bezahlmöglichkeit ========================================
<li role="presentation" class="nav-item">
<a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4" class="nav-link disabled">
<span class="round-tab">
<i class="fa fa-lg fa-money"></i>
</span>
</a>
</li>
<!-- ======================================== Schritt 5 - Abschluss ======================================== -->
<li role="presentation" class="nav-item">
<a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4" class="nav-link disabled navigation">
<span class="round-tab">
<i class="fa fa-check"></i>
</span>
</a>
</li>
</ul>
</div>
<!-- ============================================================ CONTENT ============================================================ -->
<!-- ======================================== Schritt 1 - Warenkorb ======================================== -->
<div class="tab-content ">
<div class="tab-pane active text-center " role="tabpanel" id="step1">
<h2>Warenkorb</h2>
<div class="row">
</div>
#if (Model.VmWarenkorbIndexListe.Count == 0)
{
<br />
<br />
<h1 class="text-center">Leider haben Sie noch keine Bücher im Warenkorb :-(</h1>
<br />
<h2 class="text-center">Hier können Sie nach Büchern suchen :-)</h2>
}
else
{
<div class="container">
<table id="cart" class="table table-hover table-condensed ">
<thead>
<tr>
<th></th>
<th style="width:40%" class="h4 text-left">#Html.DisplayName("Titel")</th>
<th class="text-center h5" style="width:3%">#Html.DisplayName("Ausgabe")</th>
<th class="text-center h5" style="width: 20%">#Html.DisplayName("ISBN")</th>
<th class="text-center h5" style="width:10%">#Html.DisplayName("Preis")</th>
<th class="text-center h5">#Html.DisplayName("Anzahl")</th>
<th class="text-center h5">#Html.DisplayName("Zeilenpreis")</th>
<th></th>
</tr>
</thead>
<tbody class="border-bottom">
#foreach (var buch in Model.VmWarenkorbIndexListe)
{
<tr>
<td data-th="Bild" class="zoom">
<img src="#buch.BildPfad" alt="#buch.BildAltText" width="70" onclick="location.href = '#(Url.Action("Detail", "Buch", new { buchId = buch.Id }))'" />
</td>
<td data-th="Buch" class="align-middle" data-toggle="tooltip" data-placement="bottom" title="Für Beschreibung bitte klicken">
<h6 class="nomargin text-left" data-toggle="collapse" data-target="#buch">#buch.Titel</h6>
<p class="collapse" id="buch">Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet.</p>
</td>
<td data-th="Ausgabe" class="text-center align-middle h6">#buch.Ausgabe</td>
<td data-th="ISBN" class="text-center align-middle h6">#buch.Isbn</td>
<td data-th="Preis" class="text-center align-middle h6">#buch.PreisProTag.ToString("F2") €</td>
<td data-th="Anzahl" class="text-center align-middle h6">#buch.Anzahl</td>
<td data-th="Zeilenpreis" class="text-right align-middle h6">#buch.ZeilenPreisProTag.ToString("F2") €</td>
<td class="actions align-middle" data-th="">
<a class="btn btn-outline-danger " href="/Warenkorb/Entfernen?buchId=#buch.Id&anzahl=1" role="button" aria-expanded="false">
<i class="fa fa-lg fa-minus-square"></i>
</a>
<a class="btn btn-danger " href="/Warenkorb/Entfernen?buchId=#buch.Id&anzahl=#buch.Anzahl" role="button" aria-expanded="false">
<i class="fa fa-lg fa-cart-arrow-down"></i>
</a>
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td class="hidden-xs"><strong class="h4 text-primary">Gesamtpreis </strong></td>
<td class="hidden-xs text-right"><strong class="h4 text-primary"> #Model.VmWarenkorbIndexListe.Sum(s => s.ZeilenPreisProTag).ToString("F2") €</strong></td>
<td></td>
</tr>
<tr>
<!-- ======================================== Schritt 2 - Ausleihdatum ======================================== -->
<td> <a onclick="goBack()" class="btn btn-warning "><i class="fa fa-angle-left"></i> Weiter einkaufen</a></td>
<td colspan="6"></td>
<td class="wizard-inner">
Jetzt Bestellen <i class="fa fa-angle-right"></i>
</td>
</tr>
</tfoot>
</table>
</div>
}
</div>
<!-- ======================================== Schritt 2 - Ausleihdatum ======================================== -->
#Html.Partial("_Bestellen", Model)
<!-- ======================================== Schritt 3 - Rechnung- und Lieferadresse ======================================== -->
#Html.Partial("_Rechnungsdaten", Model)
<!-- ======================================== Schritt 4 - Bezahlmöglichkeit ========================================
<div class="tab-pane" role="tabpanel" id="step4">
<h1 class="text-md-center">Step 4</h1>
<div class="row">
</div>
<ul class="list-inline text-md-center">
<li><button type="button" class="btn btn-lg btn-common next-step next-button">Next Step</button></li>
</ul>
</div>
-->
#Html.Partial("_Danke")
</div>
</div>
</form>
here is the Main View
and here is a partial view
<div class="tab-pane text-center" role="tabpanel" id="step2">
<h2>Ihre Bestellung </h2>
<div class="row">
#using (Html.BeginForm("Bestellen", "Warenkorb", FormMethod.Post))
{
<div class="container">
<div></div>
<table id="cart" class="table table-hover table-condensed ">
<thead>
<tr>
<th style="width:20%" class="h4 text-left">#Html.DisplayName("Titel")</th>
<th class="text-center h5" style="width:20%">#Html.DisplayName("ISBN")</th>
<th class="text-left h5" style="width: 20%">#Html.DisplayName("Autoren")</th>
<th class="text-center h5" style="width: 5%">#Html.DisplayName("Ausgabe")</th>
<th class="text-center h5">#Html.DisplayName("Anzahl")</th>
<th class="text-center h5">#Html.DisplayName("Zeilenpreis")</th>
<th class="text-center h5">
#Html.DisplayName("Rückgabedatum")
</th>
</tr>
</thead>
<tbody class="border-bottom">
#foreach (var buch in Model.VmBestellen.Warenkorb)
{
<tr>
<td data-th="Buch" class="align-middle">
<h6 class="nomargin text-left">#buch.Titel</h6>
</td>
<td data-th="ISBN" class="text-center align-middle h6">#buch.ISBN</td>
<td data-th="Autoren" class="align-middle h6">
#foreach (var autor in buch.Autoren)
{
<span>#autor<br /></span>
}
</td>
<td data-th="Ausgabe" class="text-center align-middle h6">#buch.Ausgabe</td>
<td data-th="Anzahl" class="text-center align-middle h6">#buch.Anzahl</td>
<td data-th="Zeilenpreis" class="text-right align-middle h6">#buch.ZeilenPreisProTagNetto.ToString("F2") €</td>
<td data-th="Datum">
#Html.EditorFor(model => model.VmBestellen.RueckgabeDatum, new { htmlAttributes = new { #type = "date", #name = "rueckgabedatum", #value = Model.VmBestellen.RueckgabeDatum.ToString("dd.MM.yyyy"), #class = "form-control" } })
#Html.ValidationMessageFor(model => model.VmBestellen.RueckgabeDatum, "", new { #class = "text-danger" })
<button type="submit" formmethod="get"> Datum ändern</button>
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h5 ">Preis <strong class="h6">(exkl. Mwst)</strong> </strong></td>
<td class="hidden-xs text-right"><strong class="h5 "> #Model.VmBestellen.Warenkorb.Sum(s => s.ZeilenPreisProTagNetto).ToString("F2") €</strong></td>
<td class="hidden-xs"> <strong class="h5">Beginn: <bdi class="text-primary">#DateTime.Now.ToShortDateString() </bdi></strong></td>
</tr>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h6 ">Rabatt </strong></td>
<td class="hidden-xs text-right"><strong class="h6 "> - Rabatt -</strong></td>
<td class="hidden-xs"><strong class="h5">Ende: <bdi class="text-primary ">#Model.VmBestellen.RueckgabeDatum.ToShortDateString() </bdi></strong></td>
</tr>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h6 ">Mwst </strong></td>
<td class="hidden-xs text-right"><strong class="h6 "> #Model.VmBestellen.MwstBetrag.ToString("F2") €</strong></td>
<td class="hidden-xs"><strong class="h5"> Tage Gesamt: <bdi class="text-primary">XX</bdi> </strong> </td>
</tr>
<tr>
<td colspan="3" class="hidden-xs"></td>
<td class="hidden-xs" colspan="2"><strong class="h4 text-primary">Preis <strong class="h6 text-primary">(inkl. Mwst)</strong> </strong></td>
<td class="hidden-xs text-right"><strong class="h4 text-primary"> #Model.VmBestellen.GesamtpreisBrutto.ToString("F2") €</strong></td>
<td></td>
</tr>
<tr>
<!-- ======================================== Schritt 3 - Abschluss ========================================-->
<td > <a onclick="goBack()" class="btn btn-warning btn-block "><i class="fa fa-angle-left"></i> Zurück zum Warenkorb</a></td>
<td colspan="5"></td>
<td class="wizard-inner">
Bestellung abschließen <i class="fa fa-angle-right"></i>
</td>
</tr>
</tfoot>
</table>
</div>
}
</div>
</div>
here is the a href - which calls at the moment only a link - but i would need to call the link AND with the same click call an POST-ActionResult
i thought i could call the POST ActionResult and from there Redirect to a specific #id
After updating Sitecore 6.3 to 6.6, the Main Navigation is broken in the Sitecore Page Editor when "Edit related item" is clicked.
It looks like this:
It even stays like this when closing the "Edit related item" frame.
Here is the text from that screen:
{"commands":[{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"","icon":"/~/icon/SoftwareV2/16x16/cubes_blue.png.aspx","isDivider":false,"tooltip":"Dieses Item im Content Editor bearbeiten.","type":"common"}],"contextItemUri":"sitecore://master/{78EBD797-ACA9-40BC-9ACE-961CD2296CDC}?lang=de-CH&ver=1","custom":{},"displayName":"Title","expandedDisplayName":null}KATA {"commands":[{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"","icon":"/~/icon/SoftwareV2/16x16/cubes_blue.png.aspx","isDivider":false,"tooltip":"Dieses Item im Content Editor bearbeiten.","type":"common"}],"contextItemUri":"sitecore://master/{F195AD36-86EE-4C13-883B-761E300C23AF}?lang=de-CH&ver=1","custom":{},"displayName":"Title","expandedDisplayName":null}REA {"commands":[{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"","icon":"/~/icon/SoftwareV2/16x16/cubes_blue.png.aspx","isDivider":false,"tooltip":"Dieses Item im Content Editor bearbeiten.","type":"common"}],"contextItemUri":"sitecore://master/{63438A98-FC6F-461D-89BB-7497B12FBAEF}?lang=de-CH&ver=1","custom":{},"displayName":"Title","expandedDisplayName":null}Patientensicherheit {"commands":[{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"","icon":"/~/icon/SoftwareV2/16x16/cubes_blue.png.aspx","isDivider":false,"tooltip":"Dieses Item im Content Editor bearbeiten.","type":"common"}],"contextItemUri":"sitecore://master/{FB9B0590-E933-4141-BA2B-F82C83A3343E}?lang=de-CH&ver=1","custom":{},"displayName":"Title","expandedDisplayName":null}Prozesse {"commands":[{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"","icon":"/~/icon/SoftwareV2/16x16/cubes_blue.png.aspx","isDivider":false,"tooltip":"Dieses Item im Content Editor bearbeiten.","type":"common"}],"contextItemUri":"sitecore://master/{0F1334E0-9BB7-4657-9DC4-884F6E1133C9}?lang=de-CH&ver=1","custom":{},"displayName":"Title","expandedDisplayName":null}Dokumente {"commands":[{"click":"chrome:common:edititem({command:\"webedit:open\"})","header":"","icon":"/~/icon/SoftwareV2/16x16/cubes_blue.png.aspx","isDivider":false,"tooltip":"Dieses Item im Content Editor bearbeiten.","type":"common"}],"contextItemUri":"sitecore://master/{8D18489B-B7F3-442B-9958-7D1FDBDC9010}?lang=de-CH&ver=1","custom":{},"displayName":"Title","expandedDisplayName":null}Telefonlisten
Anyone knows what this is and how I can fix it?
Thanks in advance :)
EDIT:
Code of .ascx:
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="Header.ascx.cs" Inherits="ZGKS.Intranet.WebApp.Frontend.sublayouts.Header" %>
<%# Register Src="NavLayer.ascx" TagName="NavLayer" TagPrefix="uc1" %>
<%# Register Src="~/Frontend/sublayouts/SearchBox.ascx" TagName="SearchBox" TagPrefix="ZGKSControls" %>
<div class="head">
<div class="line">
<div class="unit sizeCol">
<!-- mod NavService -->
<div class="mod modNavService skinNavServiceHome">
<div class="inner">
<div class="bd">
<ul>
<li>Home</li>
<li><span>
<asp:Literal ID="litWelcome" runat="server"></asp:Literal>
<asp:Literal ID="litUsername" runat="server"></asp:Literal></span></li>
<li class="last"><span>
<asp:Literal ID="litDate" runat="server"></asp:Literal></span></li>
</ul>
</div>
</div>
</div>
<!-- /mod NavService -->
<!-- mod NavService -->
<div class="mod modNavService">
<div class="inner">
<!-- tpl NavService-navservice -->
<div class="bd">
<ul>
<asp:Literal ID="litNaviLinks" runat="server"></asp:Literal>
</ul>
</div>
<!-- /tpl NavService-navservice -->
</div>
</div>
<!-- /mod NavService -->
<!-- mod Favourites -->
<div class="mod modFavourites">
<div class="inner">
<!-- tpl Favourites-favourites -->
<div class="hd">
<ul>
<li>Meine Favoriten
<div class="favnavcontainer">
<div class="wrap">
<div class="list">
<table>
<tbody>
<tr>
<td>
<asp:Label ID="lblFavoritesDescription" runat="server" />
</td>
</tr>
</tbody>
</table>
<table class="highlight">
<tbody>
<asp:Repeater ID="rptFavorite" runat="server" OnItemCommand="RptFavoriteItemCommand">
<ItemTemplate>
<tr class="favoritemark">
<td>
<a href="<%# Eval("Url") %>">
<%# Eval("Title") %></a>
</td>
<td class="delete">
<span>
<asp:ImageButton ToolTip="Löschen" AlternateText="Löschen" ID="btnDeleteFav" runat="server"
CommandName="delFav" CommandArgument='<%# Eval("ID") %>' ImageUrl="~/Frontend/Images/icons/clear.png" />
</span>
</td>
<td class="edit" title="Editieren">
<span></span>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</div>
<a class="close" title="" href="#">Schliessen <span>|</span> X</a>
</div>
</li>
<li>Meine Systeme
<div class="favnavcontainer">
<div class="wrap">
<div class="list">
<table>
<tbody>
<tr>
<td>
<asp:Label ID="lblSystemDescription" runat="server" />
</td>
</tr>
</tbody>
</table>
<table class="highlight">
<tbody>
<asp:Repeater ID="rptSysteme" runat="server">
<ItemTemplate>
<tr class="">
<td>
<a target="_blank" href="<%# Eval("Url") %>">
<%# Eval("Title") %></a>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</div>
<div class="modContent" style="padding: 0;">
<div style="margin: 10px 0; margin-left: 10px;">
<a target="_self" href='<%# MySystemLink %>' class="icon back" title="Zurück">
<span>Meine Systeme bearbeiten</span>
</a>
</div>
<a class="close" title="" href="#">Schliessen <span>|</span> X</a>
</div>
</div>
</li>
<li>Meine Alerts
<div class="favnavcontainer">
<div class="wrap">
<div class="list">
<table>
<tbody>
<tr>
<td>
<asp:Label ID="lblAlertDescription" runat="server" />
</td>
</tr>
</tbody>
</table>
<table class="highlight">
<tbody>
<asp:Repeater ID="rptAlert" runat="server" OnItemCommand="RptAlertItemCommand">
<ItemTemplate>
<tr class="alertmark">
<td>
<a href="<%# Eval("Url") %>">
<%# Eval("Title") %></a>
</td>
<td class="delete">
<span>
<asp:ImageButton ToolTip="Löschen" AlternateText="Löschen" ID="btnDeleteAlert" runat="server"
CommandName="delAlert" CommandArgument='<%# Eval("ID") %>' ImageUrl="~/Frontend/Images/icons/clear.png" />
</span>
</td>
<td class="edit" title="Editieren">
<span> </span>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</div>
<a class="close" title="" href="#">Schliessen <span>|</span> X</a>
</div>
</li>
</ul>
</div>
<div class="bd">
</div>
<!-- /tpl Favourites-favourites -->
</div>
</div>
<!-- /mod Favourites -->
</div>
<div class="unit sizeCol lastUnit">
<div class="line">
<!-- mod Logo -->
<div class="mod modLogo">
<div class="inner">
<!-- tpl Logo-logo -->
<div class="bd">
<a href="/" title="">
<img class="screen" src="/Frontend/Images/logo.gif" width="291" height="27" alt="ZGKS"></a>
</div>
<!-- /tpl Logo-logo -->
</div>
</div>
</div>
<div class="line">
<ZGKSControls:SearchBox ID="SearchBox" runat="server" />
</div>
</div>
<div class="line">
<div class="unit size1of1">
<uc1:NavLayer ID="NavLayer1" runat="server" />
</div>
</div>
</div>
</div>
The issue is due to changes in the webedit.css stylesheet in Sitecore 6.6 from previous versions.
Make sure that /website/webedit.css is present in your inetpub folder, that you do not have it checked into your Visual Studio project, i.e it is not overwriting with a previous version of the file from your source control.