Login | Register | FAQ
Anonymous

overflow and word wrap isnt working like i thought

+ Post a reply

22 posts 1, 2, 3


overflow and word wrap isnt working like i thought

by christianl » Tue Apr 24, 2018 4:01 pm

I am trying to remove the scroll bar, word-wrap the text and adjust the list div tag height based on the mount of content. the blue marker will be a repeated bar based on the # of list items. The header will have an image left-aligned about 55 x 55 px. I'm having trouble completing these tasks. I attached a screen shot and my code. thanks



Code: Select all
         #list{
            border-top: 5px solid #00A2E0;
                width: 280px;
                border-left: 1px solid #D8E0E3;
                border-right: 1px solid #D8E0E3;
                border-bottom: 1px solid #D8E0E3;

         }
           
            #listHeader{
                height: 25px;
                font-size: 24px;
                padding: 15px 0 15px 0;
                vertical-align: middle;
                width: inherit;
                background-image: url(HapNow.png)
                background-repeat: no-repeat;
                background-color: aliceblue;
                font-family: tahoma;
            }

            #col-marker{
             border-left: 3px solid #00A2E0;
                width: 5px;   
             
                padding: 0 0 10px 10px;
                float: left;
         
         }

         #listItem{
                padding: 15px 10px 10px 10px;
                height: 100%;
                overflow-wrap: break-word;
                word-wrap: break-word;
                overflow:auto;
                display: flex;
           
}
Code: Select all
<!DOCTYPE html>
<html>
   <head>
        <link rel="stylesheet" type="text/css" href="./css/style.css">
   </head>
   <body>
            <div id="list">
                <div id="listHeader">Header Here - Image left</div>
              <div id="listItem">
                 <div id="col-marker"></div>
RoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoomConRoomRoomRoomRoomRoomRoomRoom 1
           </div>
        </div>
   </body>
</html>

Attachments

  1. webpart.PNG (9.48 KiB) Downloaded 902 times

User avatar

christianl

  • Posts: 2
  • Joined: Tue Apr 24, 2018 3:43 pm

Re: overflow and word wrap isnt working like i thought

by christianl » Tue Apr 24, 2018 4:20 pm

by adding: word-wrap: break-word; overflow:hidden to - listitems . AND removing: display: flex. i fix the word wrap issue BUT the col-marker doesnt extend the hieght along with the text, its only about 10 px in height. thats not how it needs to work. thx
User avatar

christianl

  • Posts: 2
  • Joined: Tue Apr 24, 2018 3:43 pm

Re: overflow and word wrap isnt working like i thought

by casseverhart13 » Thu Sep 05, 2019 9:25 am

Rattling instructive and superb complex body part of this topic! ABC Pressure Washing Waterford Lakes
User avatar

casseverhart13

  • Posts: 48
  • Joined: Tue Apr 23, 2019 4:22 am

Re: overflow and word wrap isnt working like i thought

by BonnieP » Tue Sep 10, 2019 3:34 am

Excellent blog - thanks for sharing this great info.
windermere grout cleaners
User avatar

BonnieP

  • Posts: 2
  • Joined: Tue Sep 10, 2019 3:10 am

Re: overflow and word wrap isnt working like i thought

by jackyj » Sun Jun 07, 2020 5:35 pm

funeral directors Barnsley
User avatar

jackyj

  • Posts: 12
  • Joined: Sun Jun 07, 2020 3:52 pm

Re: overflow and word wrap isnt working like i thought

by jowest45 » Thu Jun 11, 2020 6:37 pm

Not sure how to help you out. Good luck, though.

https://www.detroitmimovers.com/
https://www.movingcompanycleveland.com/
User avatar

jowest45

  • Posts: 5
  • Joined: Sun Apr 19, 2020 1:01 am

Re: overflow and word wrap isnt working like i thought

by billywhitmanfoundation » Mon Jun 22, 2020 7:54 pm

I had suspicions and I let them slide

https://kansascityairductpros.com/
User avatar

billywhitmanfoundation

  • Posts: 12
  • Joined: Mon Jun 22, 2020 7:51 pm

Re: overflow and word wrap isnt working like i thought

by billywhitmanfoundation » Tue Jun 23, 2020 10:33 am

It's been a pleasure to read this https://grandrapidsairductpros.com/dryer-vent-cleaning
User avatar

billywhitmanfoundation

  • Posts: 12
  • Joined: Mon Jun 22, 2020 7:51 pm

Re: overflow and word wrap isnt working like i thought

by DanO » Tue Jun 23, 2020 9:10 pm

This is complicated stuff. I will study it further. In the mean time try https://www.RichmondMoldRemediationPros.com
User avatar

DanO

  • Posts: 1
  • Joined: Tue Jun 23, 2020 8:51 pm

Re: overflow and word wrap isnt working like i thought

by billywhitmanfoundation » Wed Jun 24, 2020 1:11 pm

Frankly what you do doesn't matter

http://www.sterlingheightsfencing.com
User avatar

billywhitmanfoundation

  • Posts: 12
  • Joined: Mon Jun 22, 2020 7:51 pm


+ Post a reply

1, 2, 3