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

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

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

Course Queries Syllabus Queries 3 years ago

3.4K 2 0 0 0
author
Previous Next

User submissions are the sole responsibility of contributors, with TuteeHUB disclaiming liability for accuracy, copyrights, or consequences of use; content is for informational purposes only and not professional advice.

Answers (2)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 3 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:  */
}
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
    • 
                    
                                                
    
                                                                                                        
                                                    
                                                
    
                                                
    
                                                    
    
                                                        
                                                            0
                                                            views 
    
                                                            
                                                            
    
                                                            0
                                                            shares
    profilepic.png
    manpreet 3 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.

    Similar Forum

    Q

    Neet 2019 syllabus will change?

    Q

    Syllabus in LaTeX

    Q

    Does Hogwarts follow any specific syllabus for DADA?

    View All

    Explore Other Libraries

    Online Exams

    Question Bank

    Career News

    Feeds

    Full Forms

    Dictionary

    Interview Question

    Gigs

    Quotes

    Lyrics

    Videos

    Courses

    Blogs

    Tutorials

    Forum

    Educators

    Corporates

    Tools

    Related Searches

    Course Queries Syllabus Queries

    Important Course Queries Links

    Syllabus Queries
    Competitions/Entrance Exams