In our browser developer tools there is no id, so we are using css value. But css value (css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20]) is changing dynamically. so we are getting an error message stating
Element with locator css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20] not found.
<tr _ngcontent-c5="" class="item-name highlighted" tabindex="0">
<td _ngcontentc5="">
<div _ngcontent-c5="" class="svg-size cursor" style="text-align:center;
padding-top:12px;">
<mat-icon _ngcontent-c5="" class="mat-icon" role="img" svgicon="common:estimatetmp" aria-hidden="true">
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false">
<desc>Created with Sketch.</desc>
<defs>
</defs>
<g id="__26Nzx83__estimate-tmp-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="__26Nzx83__Group-2">
<rect id="__26Nzx83__Rectangle-4-Copy-2" fill="#FFFFFF" x="0" y="0" width="32" height="32"></rect>
<g id="__26Nzx83__Group" transform="translate(4.000000, 4.000000)">
<rect id="__26Nzx83__Rectangle-3" fill="#9013FE" opacity="0.25" x="0" y="0" width="24" height="24" rx="2">
</rect>
<text id="__26Nzx83__E" font-family="OpenSans-ExtraBold, Open Sans" font-size="18" font-weight="600" fill="#FFFFFF">
<tspan x="7" y="19">E</tspan>
</text>
</g>
</g>
</g>
</svg>
</mat-icon>
</div>
</td>
<td _ngcontent-c5="" class="fontStyle" data-placement="top" title="Untitled Estimate 74"> Untitled Estimate 74 </td>
<td _ngcontent-c5="" class="fontStyle">venkatesh kumar</td>
<td _ngcontent-c5="" class="fontStyle">Oct 31 2018 11:28 AM</td>
<td _ngcontent-c5="">
<div _ngcontent-c5="" class="dropdown">
<div _ngcontent-c5="" class="options more-icon item-name" data-placement="top" data-toggle="dropdown" style="color: black; font-size: 24px;">
</div>
</div>
</td>
</tr>
How to handle this? Shall we tried using class name"(class=item.highlighted) instead of css and id but couldn't locate.
Related
I wrote the code in Tailwindcss and Alpine js. If I click ellipsis-horizontal button, dropdown is hidden into the table. I adjust the Z index also but it also hidden into the table. I want to show that dropdown above the table.
https://codepen.io/rskelaa/pen/xxJEdrm/
<div class="flex flex-col border-b">
<div class="z-10 -my-2 overflow-x-auto md:overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">
<table class="relative min-w-full divide-y divide-gray-200 table-fixed">
<thead class="bg-blue-600">
<tr>
<th scope="col"
class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
<span class="text-base text-gray-900">
<input class="w-4 h-4 border border-white" type="checkbox"
name="" id="">
</span>
</th>
<th scope="col"
class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
Name
</th>
<th scope="col"
class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
Paid Days
</th>
<th scope="col"
class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
Net Pay
</th>
<th scope="col"
class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
Taxes
</th>
<th scope="col"
class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
Gross Pay
</th>
<th scope="col"
class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
Action
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="">
<td class="px-4 py-4 whitespace-nowrap">
<span class="text-base text-gray-900">
<input class="w-4 h-4 border border-white" type="checkbox"
name="" id="">
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div>
<a href="employee-detail.html"
class="font-semibold text-blue-600">Elavarasan</a>
<p class="text-sm text-gray-600">67525165</p>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="text-base text-gray-900">
30
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="text-base text-gray-900">
<span>₹</span> 15000
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="text-base text-gray-900">
<span>₹</span> 3000
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="text-base text-gray-900">
<span>₹</span> 18000
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="px-2 text-gray-600 " x-data="{ isOpen: false }">
<button #click="isOpen = !isOpen"
#keydown.escape="isOpen = false"
class="flex items-center focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
</button>
<ul x-show="isOpen" #click.away="isOpen = false"
class="absolute right-0 z-50 py-1 mt-2 overflow-hidden font-normal bg-white border rounded shadow w-72">
<li class="group hover:bg-indigo-100">
<a href="my-account.html"
class="flex items-center px-3 py-3 group-hover:text-indigo-800">
<svg fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24" height="24"
class="mr-3 text-gray-600 text-blue-600 group-hover:text-indigo-800">
<path
d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"
class="heroicon-ui"></path>
</svg>
My Account
</a>
</li>
<li class="group hover:bg-indigo-100">
<a href="settings.html"
class="flex items-center px-3 py-3 group-hover:text-indigo-800">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 mr-3 text-gray-600"
fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
</path>
<path stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
</path>
</svg>
Settings
</a>
</li>
<li class="border-t group hover:bg-indigo-100">
<a href="logout.html"
class="flex items-center px-3 py-3 group-hover:text-indigo-800">
<svg fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24"
class="mr-3 text-gray-600 text-blue-600 group-hover:text-indigo-800">
<path d="M0 0h24v24H0z" fill="none"></path>
<path
d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z">
</path>
</svg>Sign out
</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="flex justify-center mt-4">
<nav class="relative z-0 inline-flex -space-x-px shadow-sm" aria-label="Pagination">
<a href="#"
class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-indigo-100">
<span class="sr-only">Previous</span>
<!-- Heroicon name: chevron-left -->
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
1
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
2
</a>
<a href="#"
class="relative items-center hidden px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 md:inline-flex hover:bg-indigo-100">
3
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
4
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
5
</a>
<a href="#"
class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-indigo-100">
<span class="sr-only">Next</span>
<!-- Heroicon name: chevron-right -->
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</a>
</nav>
</div>
</div>
Rectify this code, I m looking dropdown to above the table.
I'm using this code for custom pagination with dynamic links.
#if ($paginator->hasPages())
<div class="intro-y col-span-12 flex flex-wrap sm:flex-row sm:flex-no-wrap items-center">
<ul class="pagination">
#if ($paginator->onFirstPage())
<li>
<a class="pagination__link cursor-not-allowed" href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left w-4 h-4">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
<!-- <i class="w-4 h-4" data-feather="chevron-left"></i> -->
</a>
</li>
#else
<li>
<a class="pagination__link" href="javascript:void(0)" onclick="paginateRedirect(this,'{{ $paginator->previousPageUrl() }}')">
<!-- <i class="w-4 h-4" data-feather="chevron-left"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left w-4 h-4">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</a>
</li>
#endif
#foreach ($elements as $element)
#if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
#endif
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li>
<a class="pagination__link pagination__link--active" href="javascript:void(0)" onclick="paginateRedirect(this,'')">{{ $page }}</a>
</li>
#else
<li><a class="pagination__link" href="javascript:void(0)" onclick="paginateRedirect(this,'{{ $url }}')">{{ $page }}</a></li>
#endif
#endforeach
#endif
#endforeach
#if ($paginator->hasMorePages())
<li>
<a class="pagination__link" href="javascript:void(0)" onclick="paginateRedirect(this,'{{ $paginator->nextPageUrl() }}')">
<!-- <i class="w-4 h-4" data-feather="chevron-right"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right w-4 h-4"><polyline points="9 18 15 12 9 6"></polyline></svg>
</a>
</li>
#else
<li>
<a class="pagination__link hidden" href="javascript:void(0)">
<!-- <i class="w-4 h-4" data-feather="chevron-right"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right w-4 h-4"><polyline points="9 18 15 12 9 6"></polyline></svg>
</a>
</li>
#endif
</ul>
</div>
#endif
when I execute this code, it looks fine but pagination links are not working properly.
I need different pagination style with different pages, how I can use above code for all pages with different styling.
I am trying to position a panel to the right of avatar icon. i want to make it look like the supabase dashboard.
i have the following already. iam using tailwindcss and tailwind/headlessui for the popover
<Popover className="relative flex flex-col items-center">
<Popover.Panel
className="absolute -top-32 right-0 z-50 w-screen max-w-[270px] px-4 sm:px-0 translate-x-full ">
<div className="overflow-hidden rounded-sm shadow ring-1 ring-black ring-opacity-5">
<div className="block w-full h-12 bg-blue-50 py-3 px-3 content-center">
<div>
{
(isLoading || isError) ? (
<div role="status" className="space-y-2.5 animate-pulse max-w">
<div className="h-2.5 bg-gray-200 rounded w-full"></div>
</div>
) : (
<h4 className="font-semibold">
{user.email}
</h4>
)
}
</div>
</div>
<div className="relative grid grid-cols-1 gap-4 bg-white py-7 ">
<div className="flex flex-col gap-6">
<PanelItem content="Wishlist" href="/v/wishlist">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</PanelItem>
</div>
</div>
<Button variant="primary" className="rounded-none" onClick={handleSignOut}>
<span className="text-sm font-medium" >Sign Out</span>
</Button>
</div>
</Popover.Panel>
</Popover>
it looks like this.
but should look like this
In my laravel vuejs application I have following vue to display some data inside a datatable .
For the better user experience, I have added a Show more option to load data.
<show-more :data-size="documents.length" increment-amount="5" >
<div slot-scope="{ showMore, showAmount }">
<div v-bind:class = "selectedForAction.count() === 0 ? 'h-15' : ''">
<action-bar :count="selectedForAction.count()">
<div slot="table-header" class="flex items-center justify-between bg-white border-certstyle-border border-b rounded-t py-4 px-10 w-full ">
<!--Course -->
<div class="flex items-center rounded-full w-22 overflow-hidden shadow-soft">
<selectable-all item="selectAll" :data="documents" #select="selectAll"></selectable-all>
</div>
<div class="flex flex-col items-left text-left w-10/12">
Document
</div>
<div class="w-74 text-left" item="validFor">
Valid until
</div>
<div class="w-1/12 text-center" item="status">
Validity
</div>
<div class="px-8 w-32">
</div>
<div class="px-8">
</div>
</div>
<button v-if="selectedForAction.count() === 1" #click="editSelectedDocument" class="flex items-center text-certstyle-titles text-sm mx-4" >
<span class="mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
</span>
<span class="font-bold">Edit</span>
</button>
<button #click="removeSelectedDocument" class="flex items-center text-certstyle-titles text-sm mx-4" >
<span class="mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>
</span>
<span class="font-bold">Remove</span>
</button>
</action-bar>
</div>
<!--Certificates-->
<div v-if="documents[index] !== undefined" v-for="(i, index) in showAmount" class="flex items-center justify-between border-certstyle-border border-b px-10 py-1 hover:bg-certstyle-background-light transition-colors duration-150">
<!--Certificate institute image-->
<div class="flex items-center " item="certificatedChecked" >
<div class="relative">
<div class="rounded-full h-14 w-10 overflow-hidden shadow-soft pt-4">
<selectable
v-model="selectedForAction"
:item="documents[index].id"
:ref="documents[index].id"
></selectable>
</div>
</div>
</div>
<div class="flex flex-col items-left text-left w-10/12" item="certificate">
<span :title="documents[index].name" style="cursor: help;" class="text-certstyle-titles font-bold cursor-help">{{ documents[index].name }}</span>
</div>
<!--Certificate due date-->
<div class="w-74 text-left" item="validFor">
<p class="text-sm valid-until not-applicable" v-if="documents[index].is_valid_forever">{{ 'Indefinite'}}</p>
<p class="text-sm valid-until" v-else>{{ documents[index].expires_at_formatted }}</p>
</div>
<!-- Certificate status-->
<div class="w-48 text-center" item="status">
<status :status="documents[index].validity_status.toLowerCase()"></status>
</div>
<!--Download icon-->
<div class="cs--dashboard-employee-certificate-index--certificate-download-icon px-8" item="download">
<a v-if="documents[index].url !== null" :href="getDocumentDownloadLocation(documents[index].id)" class="text-certstyle-text-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
</a>
</div>
<!--Preview icon-->
<div class="cs--dashboard-employee-certificate-index--certificate-download-icon px-8" item="view">
<a v-if="documents[index].url !== null" target="_blank" :href="getDocumentPreviewLocation(documents[index].id)" class="text-certstyle-text-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
</a>
</div>
<div class="w-0 flex justify-end">
<edit-documents-modal :document="documents[index]" :identifier="`editDocument${documents[index].id}`"></edit-documents-modal>
</div>
</div>
<div class="relative flex items-center justify-center">
<!--Show more button-->
<button class="absolute border focus:outline-none hover:bg-certstyle-orange bg-white border-certstyle-orange hover:text-white text-certstyle-orange font-bold text-sm rounded px-4 py-1 mt-32 " v-if="showAmount < documents.length" #click="showMore">
show more documents
</button>
</div>
</div>
</show-more>
Now the issue is, When I tried to run this, I get following console error and my data table is not getting displayed. Not even the headers...
[Vue warn]: Error in render: "TypeError: Cannot read properties of
undefined (reading 'length')"
Its better to use computed property to handle these situations
computed: {
getDocumentSize() {
return this.documents ? this.documents.length : 0;
}
}
and in template, do the below change
<show-more :data-size="getDocumentSize" increment-amount="5" >
....
I'm using Tailwind CSS, .NET Core 3.1 Razor Pages and get the following error
Found a malformed 'input' tag helper. Tag helpers must have a start and end tag or be self closing
with this code
<form asp-route="Search" method="get">
<label for="place-address" class="block text-sm font-medium leading-5 text-gray-700">Enter your address</label>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="relative flex-grow focus-within:z-10">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
</div>
<input asp-for="Address" id="place-address" class="form-input block w-full rounded-none rounded-l-md pl-10 transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
</div>
<button type="submit" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-r-md text-gray-700 bg-gray-50 hover:text-gray-500 hover:bg-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" ">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="ml-2">Search</span>
</button>
</div>
</form>
When I remove the SVG elements the error goes away. How can I keep the SVG elements and make this form work