javascript - Keep absolute element (dropdown-menu) in viewport or window width -

- 

<li class="dropdown">                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>                   <ul class="dropdown-menu menu-multicolumn">                         <li class="menu-column">                             <ul>                                 <li class="menu-column-title">multi page</li>                                 <li><a href="#">action</a></li>                                 <li><a href="#">another action</a></li>                                 <li><a href="#">something here</a></li>                                 <li><a href="#">separated link</a></li>                                 <li><a href="#">separated link</a></li>                              </ul>                         </li>                         <li class="menu-column">                             <ul>                                 <li class="menu-column-title"></li>                                 <li><a href="#">action</a></li>                                 <li><a href="#">another action</a></li>                                 <li><a href="#">something here</a></li>                                 <li><a href="#">separated link</a></li>                                 <li><a href="#">separated link</a></li>                              </ul>                         </li>                         <li class="menu-column">                             <ul>                                 <li class="menu-column-title">one page</li>                                 <li><a href="#">action</a></li>                                 <li><a href="#">another action</a></li>                                 <li><a href="#">something here</a></li>                                 <li><a href="#">separated link</a></li>                                 <li><a href="#">separated link</a></li>                             </ul>                         </li>                         <li class="menu-column">                             <ul>                                 <li class="menu-column-title"></li>                                 <li><a href="#">action</a></li>                                 <li><a href="#">another action</a></li>                                 <li><a href="#">something here</a></li>                                 <li><a href="#">separated link</a></li>                                 <li><a href="#">separated link</a></li>                             </ul>                         </li>                   </ul>                 </li><!-- end of dropdown -->

css

 .dropdown-menu { background-clip: padding-box; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); display: none; float: left; font-size: 14px; list-style: outside none none; margin: 2px 0 0; min-width: 160px; padding: 5px 0; position: absolute; text-align: left; top: 100%; z-index: 1000;}  .menu-multicolumn { white-space: nowrap; width: auto !important;}  .menu-column { display: inline-block; float: none; overflow: hidden; vertical-align: top; white-space: normal; min-width: 190px;}

ok thinking javascript determine how .dropdown-menu element out of window width , set same width left: -(that width);, .dropdown-menu element have flexible left position , inside window width.

basically need determine how element out of window width , set same amount minus left absolute position of same element.

maybe thought simple, if right way, , want right side stay inside viewport, this:

.dropdown-menu {    position: absolute;    right: 0px;    left: auto; }

instead of calculating how should push left side in negative margin can set space right side zero!


Comments

Post a Comment

Popular posts from this blog

rewrite asp to php based on asp query -

-
i have seen several questions similar , tried solutions @ loss. need redirect example.com/products.asp?lob=health to example.com/services/healthcare/ i need several lob= different value . there way can redirect each url. maybe kind of rewrite condition on lob if value of lob = health, redirect here. if equals home, redirect somewhere else? not sure "correct" way works. rewritecond %{query_string} ^lob=value1$ [nc] rewriterule ^products.asp$ http://example.org/sample/one/? [r=301,l] and different value: rewritecond %{query_string} ^lob=value2$ [nc] rewriterule ^products.asp$ http://example.org/sample/two/? [r=301,l] and doesn't match value: rewriterule ^products\.asp$ [insert new url here] [r=301,l] the last example works if want redirect .asp url .php. keep in mind have other conditions , rules removing .php extension , adding / files: rewritecond %{request_filename} !-f rewriterule ^([^/]+)/$ $1.php rewriterule ^([^/]+)/([^/]+)/$ /$1...
Read more

android - questions about switching from C2DM to GCM -

-
i'm converting app c2dm gcm , have questions. i've modified gcmquickstart example found here: git clone https://github.com/googlesamples/google-services.git in class extends application, i've got: public class myapp extends application { @override public void oncreate() { super.oncreate(); if (this.checkplayservices()) { intent intent = new intent(this, registrationintentservice.class); startservice(intent); } else{ log.e(tag,"failed checkforgcm"); } } } afaik, starts service , it'll run forever or if operating system shuts down whereupon operating system restart it. correct? checkplayservices() makes sure android 2.3 or greater , google play services installed these requirements use gcm. correct? public class registrationintentservice extends intentservice{ private static final string tag = "regintentservice"; public registratio...
Read more

visual studio 2010 - Error on RDLC Expression -

-
i using exp calculate total fees paid on rdlc report: =sum(iif(fields!responsedescription.value ="approved successful",int(fields!amount.value), 0)) and #error in resulting column , can issue ? . and similar exp above work fine : =sum(iif(fields!responsedescription.value <> "",int(fields!amount.value), 0)) few notes: 1- amount integer , present. 2- responsedescription string , present. thank you you can use expression: =sum(cint(iif(fields!responsedescription.value ="approved successful", fields!amount.value, 0))) you have convert every possible values same type before aggregation. i think second expression works fine because in true case ( fields!responsedescription.value <> "" ) used expression converted integer .
Read more