locked
Restrict the size of a div and its HTML contents RRS feed

  • Question

  • User-973886032 posted
    <h1 style="background-color: transparent; box-sizing: border-box; color: rgb(33, 37, 41); font-family: -apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,&amp;quot;Helvetica Neue&amp;quot;,Arial,&amp;quot;Noto Sans&amp;quot;,sans-serif,&amp;quot;Apple Color Emoji&amp;quot;,&amp;quot;Segoe UI Emoji&amp;quot;,&amp;quot;Segoe UI Symbol&amp;quot;,&amp;quot;Noto Color Emoji&amp;quot;; font-size: 40px; font-style: normal; font-variant: normal; font-weight: 500; letter-spacing: normal; line-height: 48px; margin-bottom: 8px; margin-top: 0px; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><img style="border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; box-sizing: border-box; vertical-align: middle;" src="https://localhost:44340/images/icons/heart.png">sign Editor</h1><p><span style='display: inline !important; float: none; background-color: transparent; color: rgb(33, 37, 41); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;'>
    
    </span></p><div class="text-left col-md-12" style="background-color: transparent; box-sizing: border-box; color: rgb(33, 37, 41); flex-basis: 100%; flex-grow: 0; flex-shrink: 0; font-family: -apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,&amp;quot;Helvetica Neue&amp;quot;,Arial,&amp;quot;Noto Sans&amp;quot;,sans-serif,&amp;quot;Apple Color Emoji&amp;quot;,&amp;quot;Segoe UI Emoji&amp;quot;,&amp;quot;Segoe UI Symbol&amp;quot;,&amp;quot;Noto Color Emoji&amp;quot;; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; max-width: 1110px; orphans: 2; padding-left: 15px; padding-right: 15px; ; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; width: 1110px; word-spacing: 0px;">
        <a style="background-color: transparent; box-sizing: border-box; color: rgb(3, 102, 214); text-decoration: none;" href="https://localhost:44340/">Home</a> &gt;&gt; <a style="background-color: transparent; box-sizing: border-box; color: rgb(3, 102, 214); text-decoration: none;" href="https://localhost:44340/GetStarted">Get Started</a> &gt;&gt; <a style="background-color: transparent; box-sizing: border-box; color: rgb(3, 102, 214); text-decoration: none;" href="https://localhost:44340/GetStarted/Editor"> Editor </a></div><p><b></b><i></i><u></u><sub></sub><sup></sup><strike></strike><br></p>


    hi guys

    I have some Rich text data which converts its content into HTML mark ups and saves it in the database. e.g. see sample data above

    however when I try to retireve it back from the db and display to the user, it overshoots the page size. When I try to restrict the div, then scrolbars then appears and still overshoots based on the scroll bars

    Is there a way to restrict it ? Here is my div 

    <div class="X_div" style="width: 70%;">
                              @Html.Raw(@Model[i].GSDescription)
    
                                
                            </div>

    and css

    .X_div {
        height: auto;
        width: 70%;
        display: table;
    
    }

    I also tried adding  max-width: 250px; but nothing seems to work

    sample data from my database in Rich text format is pasted above

    any advise ?

    Thursday, August 29, 2019 12:45 PM

All replies

  • User-474980206 posted
    You div is only 75% of the page width, but the context can be any width. You can set the overflow behavior for the div’s content (scroll or hidden). If you want the content to flow in the div, you need to remove style and css that sets absolute widths.
    Friday, August 30, 2019 1:54 AM
  • User-719153870 posted

    Hi afrika,

    .X_div {
        height: auto;
        width: 70%;
        display: table;
    
    }

    You will need to remove the display:table and add overflow:auto like below:

    .X_div {
                width: 250px;
                height:auto;
                /*display: table;*/
                overflow:auto;
            }

    Or, if you don't want to use the overflow, as far as i know, if your @Html.Raw(@Model[i].GSDescription) is a long series of pure letters without spaces or other symbols, the css will not work as you wanted.

    Best Regard,

    Yang Shen

    Friday, August 30, 2019 2:32 AM
  • User-857013053 posted

    First you delete your inline css from your code then use it internal css.

    .X_div {
        height: 100%;
        width: 100%;
        display: table;
    
    }
    Thursday, September 19, 2019 4:19 AM