Mobile Technologies Web Technologies Digital Marketing Creative Design Career Talk Medical General Tech Interviews Internet Of Things

Embark on a journey of knowledge! Take the quiz and earn valuable credits.

Take A Quiz

Challenge yourself and boost your learning! Start the quiz now to earn credits.

Take A Quiz

Unlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.

Take A Quiz

Popular Categories

Interview Questions
QuestionBank
Quantitative Aptitude
Engineering
Govt Exams
Digital Marketing
Management
Interviews
All

Setting the height of my section equal to text content, ignoring height of SVG

Course Queries Syllabus Queries 2 years ago

0 2 0 0 0 tuteeHUB earn credit +10 pts
5 Star Rating 1 Rating
Previous Next

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.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (2)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years ago


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.

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:  */
}

 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
    • 
                    
                                                
                                                
    

                                                    
    
                                                        
                                                            0
                                                            views 
    
                                                            
                                                            
    
                                                            0
                                                            shares
    profilepic.png
    manpreet 2 years ago


    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%;
}
    shareimprove this answer

    0 views   0 shares

    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.

    Q

    What is the full form of NABARD ?

    Banking, Finance & Insurance
    Q

    How to refresh app upon shaking the device?

    Mobile Technologies
    Q

    What are the govt exams after BCA?

    Career Talk
    Q

    TYPO3 v8. Override function in Core class

    General Tech
    Q

    Why do people in India give so much importance to Government jobs?

    Commerce & Accounting
    Q

    <div>zkskKsk</div>

    Mobile Technologies 0 Answers
    Q

    <span style="font-size: 1em;">Qwerty 4</span>

    Digital Marketing 0 Answers
    Q

    <div>What are the key differences between AMOLED and LCD displays in smartphones?</div>

    Mobile Technologies 0 Answers
    Q

    <div>What are the key challenges in Mobile App Development for Cross-Platform Solutions?</div>

    Mobile Technologies 0 Answers
    Q

    who is the smallest man in the world

    General Tech 0 Answers

    Explore Other Libraries

    Blogs Tutorials Question Bank Feeds Careernews

    Tags

    height section text content

    Important Course Queries Links

     Syllabus Queries
     Competitions/Entrance Exams