Databases
StackOverflow2013
Postsdbo
POhow do I prevent other elements from being affected by overflow hidden?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow do I prevent other elements from being affected by overflow hidden?
    primarykey
    data
    text
    <p>I have a parent element that has dynamic text in it that needs to be confined into a certain area. I had users that where writing sentences without using spaces (example:yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy etc...) This was breaking the structure of my styled text area. </p> <pre><code>#ProfileCommentBody{ width:500px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; margin:15px 0px 0px 20px; float:left; background-color:#EAF7FB; padding:10px 10px 10px 10px; position:relative; overflow:hidden;} </code></pre> <p>I used <code>overflow:hidden</code>,as you can see above in the css code, and it solved the problem but created a new problem. I have another another element that is a image that is absolutely positioned that completes the style of my speech bubble ( the above element is the speech bubble) and when I have the above element on <code>overflow:hidden</code> it make that image disappear. I have tried z-index and that does not work.</p> <pre><code>.ProfileCommentTail{background:url(images/speechBubbleTail.png) no-repeat top left; width:15px; height:10px; position:absolute; top:20px; left:-15px;} </code></pre> <p>Is there a different option to use besides <code>overflow:hidden</code> or is there something I can do to counteract the unwanted part of what the <code>overflow:hidden</code> is doing?</p> <p>html structure:</p> <pre><code> &lt;div id='ProfileCommentBody' class='round_10px'&gt; &lt;div id='CommentNameProfile'&gt; &lt;div class='ProfileCommentTail'&gt;&amp;nbsp;&lt;/div&gt; &lt;a href='http://www.blahblahblah.org/Profile.php?id=&lt;?php echo $poster-&gt;id; ?&gt;'&gt; &lt;?php echo $poster-&gt;first_name. " ". $poster-&gt;last_name; ?&gt; says... &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is an example of an imgage of what it is doing now,which is wrong (missing speech bubble tail to the right of the polaroid, and the left of the speech bubble) overflow:hidden is causing this to disappear, but fixing another problem I was having: <img src="https://www.cysticlife.org/styles/images/missing_tail.png" alt="alt text"></p> <p>here is what it is SUPPOSED to look like, notice the tiny blue speech bubble tail connected to the speech bubble: <img src="https://www.cysticlife.org/styles/images/proper_tail.png" alt="alt text"></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USLightningWrist
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POhow do I prevent other elements from being affected by overflow hidden?
      1. USDon
      1. VTFavorite
    2. VO
      singulars
      1. POhow do I prevent other elements from being affected by overflow hidden?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POhow do I prevent other elements from being affected by overflow hidden?
      1. USLightningWrist
      1. VTFavorite
    1. COwhy do you need overflow-hidden for? can you make another wrapper over #ProfileCommendBody and make ProfileCommentTail a child of that, so it's a sibling of ProfileCommentBody, then put position relative on that new wrapper? if you are using overflow to clear floats then change it to a clearfix method.
      singulars
      1. POhow do I prevent other elements from being affected by overflow hidden?
      1. USmeder omuraliev
    2. CO@meder, there is a a wrapper over #ProfileCommentBody and naturally ProfileCommentTail is a child of that. I am using the overflow:hidden to prevent over 100 characters of text without spacing breaking my speech bubble. I'm open to another alternative other than overflow:hidden. And yes I have the clearfix stuff taken care of elsewhere
      singulars
      1. POhow do I prevent other elements from being affected by overflow hidden?
      1. USLightningWrist
    3. COit would help if you posted your html structure or include a demo, then.
      singulars
      1. POhow do I prevent other elements from being affected by overflow hidden?
      1. USmeder omuraliev
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload