Speak now
Please Wait Image Converting Into Text...
Embark on a journey of knowledge! Take the quiz and earn valuable credits.
Challenge yourself and boost your learning! Start the quiz now to earn credits.
Unlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.
Course Queries Syllabus Queries . 2 years ago
Posted on 16 Aug 2022, this text provides information on Syllabus Queries related to Course Queries. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.
Turn Your Knowledge into Earnings.
Answers (2)
I am styling a section that contains textual elements (a heading, a paragraph, and a summary/details element containing a ul which in turn contains several li elements) and an SVG. I am using CSS grid to structure this content into two columns: one column for all the textual elements, and one column (pushed to the right extreme of the screen using justify-self: end) for my SVG.
ul
li
justify-self: end
As you can see in the code snippet below, regardless of whether or not my summary/details element is closed or expanded, the height of my section is always equal to the height of my SVG.
I would like for the height of my section to always be equal to the height of my text content, even when the summary/details element is closed (in which case, the height of the section would be much shorter than it is currently, and the remainder of the SVG would be cut off -- it is important that it is cut off, but not squeezed).
Is this possible? Any help or guidance would be much appreciated.
(The output of the code snippet below might make a bit more sense if you open it as a full page.)
var clickDetails = document.getElementById("click-details"); function showDetails() { if (clickDetails.innerHTML === "Click here to show full syllabus") { clickDetails.innerHTML = "Click here to hide..." } else { clickDetails.innerHTML = "Click here to show full syllabus" } }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } .span-row-1 { grid-row: span 1 / auto; justify-self: end; } object { /* height: */ }
html> <html lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> rel="stylesheet" href="style.css"> </span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: #303336;">Document</span><span class="tag" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: #7d2727;"> class="grid"> Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem, architecto unde iure deserunt veniam hic reprehenderit perspiciatis in itaque labore facilis nemo reiciendis nulla a voluptatem voluptates quos sint? Tempore. class="syllabus-text">Syllabus id="click-details" onclick="showDetails()" class="syllabus-text">Click here to show full syllabus class="syllabus browser-default"> class="header-section"> href="#Introduction">Introduction Stuff goes here Stuff goes here Stuff goes here Stuff goes here Stuff goes here Stuff goes here Stuff goes here Stuff goes here Stuff goes here Stuff goes here Stuff goes here REPLY 0 views 0 likes 0 shares Facebook Twitter Linked In WhatsApp
you can try add this code to your css file to style the svg
svg { max-height: 100%; }
You could also try using your svg as a background image. Inside "span-row-1" add:
class="bg-image" src="your-img-url.svg">
and then apply this CSS style
.bg-image { max-height: 100%; }
No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.
Course Queries 4 Answers
Course Queries 5 Answers
Course Queries 1 Answers
Course Queries 3 Answers
Banking, Finance & Insurance
Mobile Technologies
Career Talk
General Tech
Commerce & Accounting
General Tech0 Answers
Digital Marketing0 Answers
Internet of Things0 Answers
Interview Questions0 Answers
Ready to take your education and career to the next level? Register today and join our growing community of learners and professionals.