Bootstrap dropdown: positioning of dropdown content
I have the following dropdown
<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
dropdown content goes here
</ul>
The upper-left corner of the dropdown is at the lower-left corner of the text (Action), but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text. How can I do that?
Thanks and regards.
css twitter-bootstrap drop-down-menu
edited Jul 28 '13 at 4:01
Adrift
41k97280
asked Jul 28 '13 at 3:59
curious1
6,1362181144
add a comment |
I have the following dropdown
<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
dropdown content goes here
</ul>
The upper-left corner of the dropdown is at the lower-left corner of the text (Action), but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text. How can I do that?
Thanks and regards.
css twitter-bootstrap drop-down-menu
edited Jul 28 '13 at 4:01
Adrift
41k97280
asked Jul 28 '13 at 3:59
curious1
6,1362181144
add a comment |
I have the following dropdown
<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
dropdown content goes here
</ul>
The upper-left corner of the dropdown is at the lower-left corner of the text (Action), but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text. How can I do that?
Thanks and regards.
css twitter-bootstrap drop-down-menu
edited Jul 28 '13 at 4:01
Adrift
41k97280
asked Jul 28 '13 at 3:59
curious1
6,1362181144
I have the following dropdown
<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
dropdown content goes here
</ul>
The upper-left corner of the dropdown is at the lower-left corner of the text (Action), but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text. How can I do that?
Thanks and regards.
css twitter-bootstrap drop-down-menu
css twitter-bootstrap drop-down-menu
edited Jul 28 '13 at 4:01
Adrift
41k97280
asked Jul 28 '13 at 3:59
curious1
6,1362181144
edited Jul 28 '13 at 4:01
Adrift
41k97280
asked Jul 28 '13 at 3:59
curious1
6,1362181144
edited Jul 28 '13 at 4:01
Adrift
41k97280
edited Jul 28 '13 at 4:01
Adrift
41k97280
edited Jul 28 '13 at 4:01
Adrift
41k97280
41k97280
asked Jul 28 '13 at 3:59
curious1
6,1362181144
asked Jul 28 '13 at 3:59
curious1
6,1362181144
asked Jul 28 '13 at 3:59
curious1
6,1362181144
6,1362181144
add a comment |
add a comment |
8 Answers
8
active
oldest
votes
This is the effect that we're trying to achieve:
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.
Bootstrap 3
Before v3.1.0
You can use the pull-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
After v3.1.0
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To
right-align a menu, use .dropdown-menu-right. Right-aligned nav
components in the navbar use a mixin version of this class to
automatically align the menu. To override it, use .dropdown-menu-left.
You can use the dropdown-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Working fiddle here: http://jsfiddle.net/jaq54yw8/
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
This works for me in B3 and seems better. I chose yours as the answer. Thanks!!!
– curious1
Sep 19 '14 at 13:11
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 4:41
The container (.dropdown) must have a display of "inline-bock". In this example the LI is fine, but if it were a DIV the alignment would be placed at the end of the block element which is influenced by the submenu width.
– Nicholas
Oct 2 '17 at 8:03
The class "dropdown-menu-right" did the trick with Bootstrap 4 (beta) as well. Thanks! "pull-right" did not work.
– Andreas Vogl
Oct 12 '17 at 7:27
usingclass="dropdown"was the key for me in order to get a proper alignment
– Louis
Mar 7 at 16:50
add a comment |
Not sure about how other people solve this problem or whether Bootstrap has any configuration for this.
I found this thread that provides a solution:
https://github.com/twbs/bootstrap/issues/1411
One of the post suggests the use of
<ul class="dropdown-menu" style="right: 0; left: auto;">
I tested and it works.
Hope to know whether Bootstrap provides config for doing this, not via the above css.
Cheers.
answered Jul 28 '13 at 4:38
curious1
6,1362181144
1
Thanks, this helps to get it working easily.
– Gaston Sanchez
Aug 15 '13 at 0:02
Yes! Thanks @curious1
– Ifelere Bolaji
Jan 13 '16 at 9:17
1
thank you, this one worked for bootstrap 4 dropdown in a navbar
– Petru Lebada
Mar 15 at 23:24
add a comment |
Based on Bootstrap doc:
As of v3.1.0, .pull-right is deprecated on dropdown menus.
use .dropdown-menu-right
eg:
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
answered Dec 6 '14 at 4:50
ninetiger
86698
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 14:13
add a comment |
If you want to display the menu up, just add the class "dropup"
and remove the class "dropdown" if exists from the same div.
<div class="btn-group dropup">
answered Oct 11 '16 at 9:01
Philip Enc
671915
1
"I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text" -- OP
– Joe Czucha
Oct 18 '16 at 21:10
I cant understand you comment, sorry!!
– Philip Enc
Oct 19 '16 at 12:05
add a comment |
Boostrap has a class for that called navbar-right. So your code will look as follows:
<ul class="nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
1
Don't see the OP mentioning the navbar..
– knownasilya
Sep 4 '14 at 17:52
add a comment |
If you wants to center the dropdown, this is the solution.
<ul class="dropdown-menu" style="right:auto; left: auto;">
answered Jan 31 '16 at 4:59
John Dekker
91
add a comment |
Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.
$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
var liparent=$(this.parentElement);
var ulChild=liparent.find('ul');
var xOffset=liparent.offset().left;
var alignRight=($(document).width()-xOffset)<xOffset;
if (liparent.hasClass("dropdown-submenu"))
{
ulChild.css("left",alignRight?"-101%":"");
}
else
{
ulChild.toggleClass("dropdown-menu-right",alignRight);
}
});
answered Nov 15 at 17:34
JD11
61110
add a comment |
use this code :
<ul class="dropdown-menu" role="menu">
<li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>
answered Feb 18 '15 at 18:45
Salman Samian
13
1
I don't think this does what he's asking
– Joe Czucha
May 22 '15 at 21:21
add a comment |
protected by Obsidian Age Sep 10 at 20:42
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
8 Answers
8
active
oldest
votes
8 Answers
8
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is the effect that we're trying to achieve:
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.
Bootstrap 3
Before v3.1.0
You can use the pull-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
After v3.1.0
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To
right-align a menu, use .dropdown-menu-right. Right-aligned nav
components in the navbar use a mixin version of this class to
automatically align the menu. To override it, use .dropdown-menu-left.
You can use the dropdown-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Working fiddle here: http://jsfiddle.net/jaq54yw8/
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
This works for me in B3 and seems better. I chose yours as the answer. Thanks!!!
– curious1
Sep 19 '14 at 13:11
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 4:41
The container (.dropdown) must have a display of "inline-bock". In this example the LI is fine, but if it were a DIV the alignment would be placed at the end of the block element which is influenced by the submenu width.
– Nicholas
Oct 2 '17 at 8:03
The class "dropdown-menu-right" did the trick with Bootstrap 4 (beta) as well. Thanks! "pull-right" did not work.
– Andreas Vogl
Oct 12 '17 at 7:27
usingclass="dropdown"was the key for me in order to get a proper alignment
– Louis
Mar 7 at 16:50
add a comment |
This is the effect that we're trying to achieve:
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.
Bootstrap 3
Before v3.1.0
You can use the pull-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
After v3.1.0
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To
right-align a menu, use .dropdown-menu-right. Right-aligned nav
components in the navbar use a mixin version of this class to
automatically align the menu. To override it, use .dropdown-menu-left.
You can use the dropdown-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Working fiddle here: http://jsfiddle.net/jaq54yw8/
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
This works for me in B3 and seems better. I chose yours as the answer. Thanks!!!
– curious1
Sep 19 '14 at 13:11
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 4:41
The container (.dropdown) must have a display of "inline-bock". In this example the LI is fine, but if it were a DIV the alignment would be placed at the end of the block element which is influenced by the submenu width.
– Nicholas
Oct 2 '17 at 8:03
The class "dropdown-menu-right" did the trick with Bootstrap 4 (beta) as well. Thanks! "pull-right" did not work.
– Andreas Vogl
Oct 12 '17 at 7:27
usingclass="dropdown"was the key for me in order to get a proper alignment
– Louis
Mar 7 at 16:50
add a comment |
This is the effect that we're trying to achieve:
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.
Bootstrap 3
Before v3.1.0
You can use the pull-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
After v3.1.0
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To
right-align a menu, use .dropdown-menu-right. Right-aligned nav
components in the navbar use a mixin version of this class to
automatically align the menu. To override it, use .dropdown-menu-left.
You can use the dropdown-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Working fiddle here: http://jsfiddle.net/jaq54yw8/
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
This is the effect that we're trying to achieve:
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.
Bootstrap 3
Before v3.1.0
You can use the pull-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
After v3.1.0
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To
right-align a menu, use .dropdown-menu-right. Right-aligned nav
components in the navbar use a mixin version of this class to
automatically align the menu. To override it, use .dropdown-menu-left.
You can use the dropdown-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Working fiddle here: http://jsfiddle.net/jaq54yw8/
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
edited Nov 12 at 12:28
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
answered Oct 8 '13 at 16:52
Joe Czucha
2,38111320
2,38111320
This works for me in B3 and seems better. I chose yours as the answer. Thanks!!!
– curious1
Sep 19 '14 at 13:11
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 4:41
The container (.dropdown) must have a display of "inline-bock". In this example the LI is fine, but if it were a DIV the alignment would be placed at the end of the block element which is influenced by the submenu width.
– Nicholas
Oct 2 '17 at 8:03
The class "dropdown-menu-right" did the trick with Bootstrap 4 (beta) as well. Thanks! "pull-right" did not work.
– Andreas Vogl
Oct 12 '17 at 7:27
usingclass="dropdown"was the key for me in order to get a proper alignment
– Louis
Mar 7 at 16:50
add a comment |
This works for me in B3 and seems better. I chose yours as the answer. Thanks!!!
– curious1
Sep 19 '14 at 13:11
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 4:41
The container (.dropdown) must have a display of "inline-bock". In this example the LI is fine, but if it were a DIV the alignment would be placed at the end of the block element which is influenced by the submenu width.
– Nicholas
Oct 2 '17 at 8:03
The class "dropdown-menu-right" did the trick with Bootstrap 4 (beta) as well. Thanks! "pull-right" did not work.
– Andreas Vogl
Oct 12 '17 at 7:27
usingclass="dropdown"was the key for me in order to get a proper alignment
– Louis
Mar 7 at 16:50
This works for me in B3 and seems better. I chose yours as the answer. Thanks!!!
– curious1
Sep 19 '14 at 13:11
This works for me in B3 and seems better. I chose yours as the answer. Thanks!!!
– curious1
Sep 19 '14 at 13:11
1
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 4:41
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 4:41
The container (.dropdown) must have a display of "inline-bock". In this example the LI is fine, but if it were a DIV the alignment would be placed at the end of the block element which is influenced by the submenu width.
– Nicholas
Oct 2 '17 at 8:03
The container (.dropdown) must have a display of "inline-bock". In this example the LI is fine, but if it were a DIV the alignment would be placed at the end of the block element which is influenced by the submenu width.
– Nicholas
Oct 2 '17 at 8:03
The class "dropdown-menu-right" did the trick with Bootstrap 4 (beta) as well. Thanks! "pull-right" did not work.
– Andreas Vogl
Oct 12 '17 at 7:27
The class "dropdown-menu-right" did the trick with Bootstrap 4 (beta) as well. Thanks! "pull-right" did not work.
– Andreas Vogl
Oct 12 '17 at 7:27
using
class="dropdown" was the key for me in order to get a proper alignment– Louis
Mar 7 at 16:50
using
class="dropdown" was the key for me in order to get a proper alignment– Louis
Mar 7 at 16:50
add a comment |
Not sure about how other people solve this problem or whether Bootstrap has any configuration for this.
I found this thread that provides a solution:
https://github.com/twbs/bootstrap/issues/1411
One of the post suggests the use of
<ul class="dropdown-menu" style="right: 0; left: auto;">
I tested and it works.
Hope to know whether Bootstrap provides config for doing this, not via the above css.
Cheers.
answered Jul 28 '13 at 4:38
curious1
6,1362181144
1
Thanks, this helps to get it working easily.
– Gaston Sanchez
Aug 15 '13 at 0:02
Yes! Thanks @curious1
– Ifelere Bolaji
Jan 13 '16 at 9:17
1
thank you, this one worked for bootstrap 4 dropdown in a navbar
– Petru Lebada
Mar 15 at 23:24
add a comment |
Not sure about how other people solve this problem or whether Bootstrap has any configuration for this.
I found this thread that provides a solution:
https://github.com/twbs/bootstrap/issues/1411
One of the post suggests the use of
<ul class="dropdown-menu" style="right: 0; left: auto;">
I tested and it works.
Hope to know whether Bootstrap provides config for doing this, not via the above css.
Cheers.
answered Jul 28 '13 at 4:38
curious1
6,1362181144
1
Thanks, this helps to get it working easily.
– Gaston Sanchez
Aug 15 '13 at 0:02
Yes! Thanks @curious1
– Ifelere Bolaji
Jan 13 '16 at 9:17
1
thank you, this one worked for bootstrap 4 dropdown in a navbar
– Petru Lebada
Mar 15 at 23:24
add a comment |
Not sure about how other people solve this problem or whether Bootstrap has any configuration for this.
I found this thread that provides a solution:
https://github.com/twbs/bootstrap/issues/1411
One of the post suggests the use of
<ul class="dropdown-menu" style="right: 0; left: auto;">
I tested and it works.
Hope to know whether Bootstrap provides config for doing this, not via the above css.
Cheers.
answered Jul 28 '13 at 4:38
curious1
6,1362181144
Not sure about how other people solve this problem or whether Bootstrap has any configuration for this.
I found this thread that provides a solution:
https://github.com/twbs/bootstrap/issues/1411
One of the post suggests the use of
<ul class="dropdown-menu" style="right: 0; left: auto;">
I tested and it works.
Hope to know whether Bootstrap provides config for doing this, not via the above css.
Cheers.
answered Jul 28 '13 at 4:38
curious1
6,1362181144
answered Jul 28 '13 at 4:38
curious1
6,1362181144
answered Jul 28 '13 at 4:38
curious1
6,1362181144
answered Jul 28 '13 at 4:38
curious1
6,1362181144
6,1362181144
1
Thanks, this helps to get it working easily.
– Gaston Sanchez
Aug 15 '13 at 0:02
Yes! Thanks @curious1
– Ifelere Bolaji
Jan 13 '16 at 9:17
1
thank you, this one worked for bootstrap 4 dropdown in a navbar
– Petru Lebada
Mar 15 at 23:24
add a comment |
1
Thanks, this helps to get it working easily.
– Gaston Sanchez
Aug 15 '13 at 0:02
Yes! Thanks @curious1
– Ifelere Bolaji
Jan 13 '16 at 9:17
1
thank you, this one worked for bootstrap 4 dropdown in a navbar
– Petru Lebada
Mar 15 at 23:24
1
1
Thanks, this helps to get it working easily.
– Gaston Sanchez
Aug 15 '13 at 0:02
Thanks, this helps to get it working easily.
– Gaston Sanchez
Aug 15 '13 at 0:02
Yes! Thanks @curious1
– Ifelere Bolaji
Jan 13 '16 at 9:17
Yes! Thanks @curious1
– Ifelere Bolaji
Jan 13 '16 at 9:17
1
1
thank you, this one worked for bootstrap 4 dropdown in a navbar
– Petru Lebada
Mar 15 at 23:24
thank you, this one worked for bootstrap 4 dropdown in a navbar
– Petru Lebada
Mar 15 at 23:24
add a comment |
Based on Bootstrap doc:
As of v3.1.0, .pull-right is deprecated on dropdown menus.
use .dropdown-menu-right
eg:
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
answered Dec 6 '14 at 4:50
ninetiger
86698
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 14:13
add a comment |
Based on Bootstrap doc:
As of v3.1.0, .pull-right is deprecated on dropdown menus.
use .dropdown-menu-right
eg:
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
answered Dec 6 '14 at 4:50
ninetiger
86698
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 14:13
add a comment |
Based on Bootstrap doc:
As of v3.1.0, .pull-right is deprecated on dropdown menus.
use .dropdown-menu-right
eg:
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
answered Dec 6 '14 at 4:50
ninetiger
86698
Based on Bootstrap doc:
As of v3.1.0, .pull-right is deprecated on dropdown menus.
use .dropdown-menu-right
eg:
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
answered Dec 6 '14 at 4:50
ninetiger
86698
answered Dec 6 '14 at 4:50
ninetiger
86698
answered Dec 6 '14 at 4:50
ninetiger
86698
answered Dec 6 '14 at 4:50
ninetiger
86698
86698
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 14:13
add a comment |
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 14:13
1
1
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 14:13
I tested pull-right and pull-left in RTL website. They work perfect, but dropdown-menu-right and dropdown-menu-left not.
– curious1
Jan 7 '15 at 14:13
add a comment |
If you want to display the menu up, just add the class "dropup"
and remove the class "dropdown" if exists from the same div.
<div class="btn-group dropup">
answered Oct 11 '16 at 9:01
Philip Enc
671915
1
"I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text" -- OP
– Joe Czucha
Oct 18 '16 at 21:10
I cant understand you comment, sorry!!
– Philip Enc
Oct 19 '16 at 12:05
add a comment |
If you want to display the menu up, just add the class "dropup"
and remove the class "dropdown" if exists from the same div.
<div class="btn-group dropup">
answered Oct 11 '16 at 9:01
Philip Enc
671915
1
"I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text" -- OP
– Joe Czucha
Oct 18 '16 at 21:10
I cant understand you comment, sorry!!
– Philip Enc
Oct 19 '16 at 12:05
add a comment |
If you want to display the menu up, just add the class "dropup"
and remove the class "dropdown" if exists from the same div.
<div class="btn-group dropup">
answered Oct 11 '16 at 9:01
Philip Enc
671915
If you want to display the menu up, just add the class "dropup"
and remove the class "dropdown" if exists from the same div.
<div class="btn-group dropup">
answered Oct 11 '16 at 9:01
Philip Enc
671915
answered Oct 11 '16 at 9:01
Philip Enc
671915
answered Oct 11 '16 at 9:01
Philip Enc
671915
answered Oct 11 '16 at 9:01
Philip Enc
671915
671915
1
"I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text" -- OP
– Joe Czucha
Oct 18 '16 at 21:10
I cant understand you comment, sorry!!
– Philip Enc
Oct 19 '16 at 12:05
add a comment |
1
"I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text" -- OP
– Joe Czucha
Oct 18 '16 at 21:10
I cant understand you comment, sorry!!
– Philip Enc
Oct 19 '16 at 12:05
1
1
"I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text" -- OP
– Joe Czucha
Oct 18 '16 at 21:10
"I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text" -- OP
– Joe Czucha
Oct 18 '16 at 21:10
I cant understand you comment, sorry!!
– Philip Enc
Oct 19 '16 at 12:05
I cant understand you comment, sorry!!
– Philip Enc
Oct 19 '16 at 12:05
add a comment |
Boostrap has a class for that called navbar-right. So your code will look as follows:
<ul class="nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
1
Don't see the OP mentioning the navbar..
– knownasilya
Sep 4 '14 at 17:52
add a comment |
Boostrap has a class for that called navbar-right. So your code will look as follows:
<ul class="nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
1
Don't see the OP mentioning the navbar..
– knownasilya
Sep 4 '14 at 17:52
add a comment |
Boostrap has a class for that called navbar-right. So your code will look as follows:
<ul class="nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
Boostrap has a class for that called navbar-right. So your code will look as follows:
<ul class="nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
answered Aug 19 '14 at 19:17
Andrei Stalbe
73161337
73161337
1
Don't see the OP mentioning the navbar..
– knownasilya
Sep 4 '14 at 17:52
add a comment |
1
Don't see the OP mentioning the navbar..
– knownasilya
Sep 4 '14 at 17:52
1
1
Don't see the OP mentioning the navbar..
– knownasilya
Sep 4 '14 at 17:52
Don't see the OP mentioning the navbar..
– knownasilya
Sep 4 '14 at 17:52
add a comment |
If you wants to center the dropdown, this is the solution.
<ul class="dropdown-menu" style="right:auto; left: auto;">
answered Jan 31 '16 at 4:59
John Dekker
91
add a comment |
If you wants to center the dropdown, this is the solution.
<ul class="dropdown-menu" style="right:auto; left: auto;">
answered Jan 31 '16 at 4:59
John Dekker
91
add a comment |
If you wants to center the dropdown, this is the solution.
<ul class="dropdown-menu" style="right:auto; left: auto;">
answered Jan 31 '16 at 4:59
John Dekker
91
If you wants to center the dropdown, this is the solution.
<ul class="dropdown-menu" style="right:auto; left: auto;">
answered Jan 31 '16 at 4:59
John Dekker
91
answered Jan 31 '16 at 4:59
John Dekker
91
answered Jan 31 '16 at 4:59
John Dekker
91
answered Jan 31 '16 at 4:59
John Dekker
91
91
add a comment |
add a comment |
Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.
$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
var liparent=$(this.parentElement);
var ulChild=liparent.find('ul');
var xOffset=liparent.offset().left;
var alignRight=($(document).width()-xOffset)<xOffset;
if (liparent.hasClass("dropdown-submenu"))
{
ulChild.css("left",alignRight?"-101%":"");
}
else
{
ulChild.toggleClass("dropdown-menu-right",alignRight);
}
});
answered Nov 15 at 17:34
JD11
61110
add a comment |
Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.
$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
var liparent=$(this.parentElement);
var ulChild=liparent.find('ul');
var xOffset=liparent.offset().left;
var alignRight=($(document).width()-xOffset)<xOffset;
if (liparent.hasClass("dropdown-submenu"))
{
ulChild.css("left",alignRight?"-101%":"");
}
else
{
ulChild.toggleClass("dropdown-menu-right",alignRight);
}
});
answered Nov 15 at 17:34
JD11
61110
add a comment |
Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.
$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
var liparent=$(this.parentElement);
var ulChild=liparent.find('ul');
var xOffset=liparent.offset().left;
var alignRight=($(document).width()-xOffset)<xOffset;
if (liparent.hasClass("dropdown-submenu"))
{
ulChild.css("left",alignRight?"-101%":"");
}
else
{
ulChild.toggleClass("dropdown-menu-right",alignRight);
}
});
answered Nov 15 at 17:34
JD11
61110
Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.
$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
var liparent=$(this.parentElement);
var ulChild=liparent.find('ul');
var xOffset=liparent.offset().left;
var alignRight=($(document).width()-xOffset)<xOffset;
if (liparent.hasClass("dropdown-submenu"))
{
ulChild.css("left",alignRight?"-101%":"");
}
else
{
ulChild.toggleClass("dropdown-menu-right",alignRight);
}
});
answered Nov 15 at 17:34
JD11
61110
answered Nov 15 at 17:34
JD11
61110
answered Nov 15 at 17:34
JD11
61110
answered Nov 15 at 17:34
JD11
61110
61110
add a comment |
add a comment |
use this code :
<ul class="dropdown-menu" role="menu">
<li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>
answered Feb 18 '15 at 18:45
Salman Samian
13
1
I don't think this does what he's asking
– Joe Czucha
May 22 '15 at 21:21
add a comment |
use this code :
<ul class="dropdown-menu" role="menu">
<li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>
answered Feb 18 '15 at 18:45
Salman Samian
13
1
I don't think this does what he's asking
– Joe Czucha
May 22 '15 at 21:21
add a comment |
use this code :
<ul class="dropdown-menu" role="menu">
<li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>
answered Feb 18 '15 at 18:45
Salman Samian
13
use this code :
<ul class="dropdown-menu" role="menu">
<li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>
answered Feb 18 '15 at 18:45
Salman Samian
13
answered Feb 18 '15 at 18:45
Salman Samian
13
answered Feb 18 '15 at 18:45
Salman Samian
13
answered Feb 18 '15 at 18:45
Salman Samian
13
13
1
I don't think this does what he's asking
– Joe Czucha
May 22 '15 at 21:21
add a comment |
1
I don't think this does what he's asking
– Joe Czucha
May 22 '15 at 21:21
1
1
I don't think this does what he's asking
– Joe Czucha
May 22 '15 at 21:21
I don't think this does what he's asking
– Joe Czucha
May 22 '15 at 21:21
add a comment |
protected by Obsidian Age Sep 10 at 20:42
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
