I am very new to HTML, learning after 20 years, please help. This may be an easy question to all of you, sorry for posting it here as I am not able to solve myself. In the below code, I want to remove the space between the text area like and submit button. I want no while space or lines between the text box "Ask your question" and the submit button below. And I also want to move the UPLOAD button in same line as "choose file", I am not using any separate CSS file.
<!DOCTYPE html>
<html>
<head>
<title>Upload PDF</title>
<style>
body {
background-color: #f2f2f2;
font-size: 12px;
font-family: Arial, sans-serif;
}
input[type="file"] {
border: none !important;
color: orange;
}
.heading {
color: orange;
text-align: left;
font-size: 14px;
}
textarea {
width: 100%;
margin-bottom: 6px;
padding: 12px 20px;
box-sizing: border-box;
font-size: 12px;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
white-space: pre-line;
overflow: auto;
}
button {
margin-top: 0px;
margin-right: 5px;
font-size: 10px;
background: #ff8a26;
border: none;
color: #fff;
padding: 0.5% 1%;
border-radius: 6px !important;
}
button:hover {
background-color: #FF4500;
}
.my-form {
background: #f7fbfc !important;
}
h3 {
color: rgb(157, 46, 46);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</head>
<body>
<div class="container mt-3">
<h3>Extract, Search and Ask using LLM</h3>
<div class="card mt-3 px-5 pb-5 pt-4 shadow-lg my-form">
<!-- Upload section -->
<h2 class="heading">Upload a File</h2>
<form method="POST" enctype=multipart/form-data>
<input type="file" name="file"><br><br>
<button type="submit" name="action" value="Upload">Upload</button>
</form>
<!-- Extracted data display -->
<h2 class="heading pt-3">Report Data</h2>
<textarea rows="4" readonly>{{ extracted_text }}</textarea>
<!-- Question and Answer section -->
<h2 class="heading pt-3">Ask Your Question</h2>
<form method="POST">
<!-- height of textarea can be changed as per requirement by changing the "rows" value -->
<textarea name="question" rows="1">{{ request.form.question }}</textarea><br><br>
<button type="submit" name="action" value="Ask">Submit</button>
</form>
<h2 class="heading pt-3">GPT Response</h2>
<textarea rows="3" readonly>{{ response }}</textarea>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
</body>
</html>
2
Answers
You can solve both your problems by removing all the
<br>line break tags.You have two after the file
<input>, and two after the<textarea>.The below snippet is just a copy of yours with those tags removed:
You have 2 line breaks after your
<textarea>. Get rid of one and your code should work