Lastpass plugin interfering with grid class layout #299

enfrte · 2023-01-14T15:19:38Z

enfrte
Jan 14, 2023

It looks like the Lastpass plugin injects code that affects the positioning of elements styled by pico

Here's my markup

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
</head>
<body>
<main class="container">

<h2>Register</h2>
<form action="/register" method="POST">
	<input type="hidden" name="_token" value="YIqkRNWRpQJSIlENm2PKhF7ETqy2V6CxZymUuNLX">
	<div class="grid">
		<input type="text" placeholder="Name" name="name" required>
		<input type="text" placeholder="Email" name="email" required>
	</div>
	<input type="password" placeholder="Password" name="password" required>
	<button>Register</button>
</form>
<h2>Login</h2>
<form action="/login" method="POST">
	<div class="grid">
		<input type="hidden" name="_token" value="YIqkRNWRpQJSIlENm2PKhF7ETqy2V6CxZymUuNLX">
		<input type="text" placeholder="Name" name="loginname" required>
		<input type="password" placeholder="Password" name="loginpassword" required>
		<button>Login</button>
	</div>
</form>

</main>

</body>
</html>

Here's the main container when lastpass has injected stuff

<main class="container">

<h2>Register</h2>
<form action="/register" method="POST">
	<input type="hidden" name="_token" value="YIqkRNWRpQJSIlENm2PKhF7ETqy2V6CxZymUuNLX">
	<div class="grid">
		<input type="text" placeholder="Name" name="name" required="">
		<input type="text" placeholder="Email" name="email" required="">
		<div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;">
		</div>
	</div>
	<input type="password" placeholder="Password" name="password" required="">
	<button>Register</button>
	<div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;">
	</div>
</form>

<h2>Login</h2>
<form action="/login" method="POST">
	<div class="grid">
		<input type="hidden" name="_token" value="YIqkRNWRpQJSIlENm2PKhF7ETqy2V6CxZymUuNLX">
		<input type="text" placeholder="Name" name="loginname" required="">
		<input type="password" placeholder="Password" name="loginpassword" required="">
		<button>Login</button>
	<div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div><div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;">
	</div>
</div>
</form>

</main>

Here's how it looks with Lastpass disabled

I guess this shouldn't affect the layout and wanted to check if it's a valid issue that is reproducible before submitting a bug report.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lastpass plugin interfering with grid class layout #299

{{title}}

Replies: 0 comments

Select a reply

Lastpass plugin interfering with grid class layout #299

enfrte Jan 14, 2023

Replies: 0 comments

enfrte
Jan 14, 2023