Databases
StackOverflow2013
Postsdbo
PORuby on Rails app using facebook send button showing controls that lay behind modal
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORuby on Rails app using facebook send button showing controls that lay behind modal
    primarykey
    data
    text
    <p>I'm having trouble with the css of my page in order for my facebook send button's modal to show on top of everything. However, if the cursor is over the modal, it displays great. It is when I move the cursor away from the modal that the display looks wrong. Here is with the cursor on the modal: <img src="https://i.stack.imgur.com/HS5C4.png" alt="when cursor is on..."></p> <p>and here is what it looks like with the cursor away from the modal:</p> <p><img src="https://i.stack.imgur.com/pXLXb.png" alt="when cursor is off..."></p> <p>I'm just now getting to where I'm getting all the parent elements to have the css property <code>overflow: visible</code> so that the modal does not get cut off when it exceeds the boundary of those elements. But the controls that are underneath (there are buttons, textfields, and icons from Foundation) show up in front of the modal when the mouse is off the modal.</p> <p>It would be really great if I could just have the facebook modal be ahead of EVERYTHING and not have to worry about it, but from what I can tell, this is not possible. I've tried z-index and have gotten nowhere with it just like everyone I've read from who had similar issues.</p> <p>Here is the surrounding html for the area in question. This is part of a partial that is rendered as part of a collection. The big image at the bottom of each image is part of the next partial and outside the code I'm sharing here:</p> <pre><code>&lt;div class="row promote_and_stats" style="display: none; overflow: visible"&gt; &lt;div class="eight columns"&gt; &lt;div class="panel radius text-center"&gt; &lt;div class="row"&gt;&lt;h6&gt;Promote&lt;/h6&gt;&lt;/div&gt; &lt;div class="promote_collapse"&gt; &lt;div class="row"&gt; &lt;div class="four columns"&gt; &lt;div class="addthis_toolbox addthis_default_style"&gt; &lt;a class="addthis_button_facebook_send" addthis:url="&lt;%= url_for(controller: 'things', action: 'show', id: f.unique_id.nil? ? f.id : f.unique_id, only_path: false) %&gt;" addthis:title="&lt;%= @group.name %&gt; - &lt;%= f.title %&gt; - blablabla.com"&gt; &lt;/a&gt; &lt;/div&gt; &lt;small&gt;Facebook&lt;/small&gt; &lt;/div&gt; &lt;div class="four columns"&gt; &lt;div class="addthis_toolbox addthis_default_style"&gt; &lt;a class="addthis_button_tweet" tw:text="&lt;%= @group.name %&gt; - &lt;%= f.title %&gt; - blablabla.com&lt;%= url_for(controller: 'things', action: 'show', id: f.unique_id.nil? ? f.id : f.unique_id, only_path: false) %&gt;"&gt; &lt;/a&gt; &lt;/div&gt; &lt;small&gt;Twitter&lt;/small&gt; &lt;/div&gt; &lt;div class="four columns"&gt; &lt;div class="addthis_toolbox addthis_default_style"&gt; &lt;a class="addthis_button_email"&gt;&lt;/a&gt; &lt;/div&gt; &lt;small&gt;Email&lt;/small&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="two columns"&gt;&lt;i class="social foundicon-flickr"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="ten columns"&gt; &lt;input type="text" placeholder="&lt;%= url_for(controller: 'things', action: 'show', id: f.unique_id.nil? ? f.id : f.unique_id, only_path: false) %&gt;"&gt; &lt;/div&gt; &lt;div class="four columns"&gt; &lt;a class="small button view_thing_button" href="&lt;%= url_for(controller: 'things', action: 'show', id: f.unique_id.nil? ? f.id : f.unique_id) %&gt;" target="_blank"&gt;View&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="eight columns"&gt; &lt;div class="panel radius text-center"&gt; &lt;h6&gt;Stats&lt;/h6&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Can anyone offer some suggestions on how to solve this issue? Thanks!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJake Smith
    1. USJake Smith
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COcan you provide your code?
      singulars
      1. PORuby on Rails app using facebook send button showing controls that lay behind modal
      1. USLian
    2. COI'm attempting to take out the sensitive information and will update my question as necessary
      singulars
      1. PORuby on Rails app using facebook send button showing controls that lay behind modal
      1. USJake Smith
    3. COI also have a click event handler that sets the css property overflow to visible for the two elements I've found that NEED to be set in this manner. I think that some of my jQuery, with animations, was setting at least one of these elements' overflow property to hidden.
      singulars
      1. PORuby on Rails app using facebook send button showing controls that lay behind modal
      1. USJake Smith
 

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