In Twitter bootstrap 3, I have some glyphicons in my divs and I add "pull-right" for default pages.
When I change direction to RTL texts etc. flips successfully but pull-right doesn't switched to pull-left.
What should I do to have an icon in right for LTR and in left for RTL ?
(Of course it is possible to add javascript code and check for all pull-rights in page body and change them to pull-left, but I don't prefer JS solution. I tried this but it didn't help.)
Fiddle:
http://jsfiddle.net/mavent/dKPE3/1/
<div id="div1" class="alert alert-info">This is my fancy description <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
<div id="div2" class="alert alert-info">هذا هو بلدي وصف الهوى <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
You can override .pull-right class to float to the left when it appears after an rtl element.
Like this:
.rtl {
direction: RTL;
}
.rtl .pull-right {
float:left !important;
}
And your div element:
<div id="div2" class="alert alert-info rtl">
هذا هو بلدي وصف الهوى
<span class="badge badge-info">122</span>
<a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa">
<i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i>
</a>
</div>
Here is a FIDDLE
Alternatively, you can do it using javascript: (Using your same code just add javascript)
$(document).ready(function() {
$('.pull-right').each(function() {
if($(this).parent().css('direction') == 'rtl')
$(this).attr('style', 'float:left !important');
});
});
Hope this helps.
I don't know if this might help you but you can use this Demo, i.e. overriding the pull-right class
css
#div2 {
direction: RTL;
}
#div2 .pull-right {
float: left !important;
}
I'd suggest looking into this library. It is built on the Bootstrap core, and right-to-left support is included.
Another option to use this stand-alone library.
You could use RTLCSS to generate a complete RTL version of your CSS, It gives you the ability to extend its functionality to support custom scenarios. Plus it has support for CSS3 transforms (matrix, translate, rotate ... etc.).
Related
I want to rotate chevron when the button is clicked. So my question would be - how to do it? Should I add the whole Angular animation component and do it there or is it possible to just add rotate to just a chevron?
<a href="#" (click)="transformArrow()">Show
<span>
<label class="m-0">this</label>
<span class="glyphicons glyphicons-chevron-down" id="myElement"></span>
</span>
</a>
then I tried to add some function
transformArrow(){
let ele = document.getElementById('myElement');
ele.style.transform //And I stuck here as I need to actually access ":before" of this element and rotate it.
}
Huge thanks to trichetriche and malbarmawi for alternative, only thing that I had to change was "after" to "before" :)
My idea is:
transformArrow(e) {
let ele = document.getElementById('myElement');
ele.classList.toggle('btn-change');
}
.glyphicons-chevron-down
{
transition: $trans-1;
&.btn-change
{
&:before
{
position: relative;
display: block;
transform: rotate(180deg);
}
}
}
I really like the idea with ngClass but I like to keep most of actions in component.ts so i wanted to stay with function. Is it even good, or maybe it's better practice to do it the way malbarmawi did?
Why not do it through CSS and custom attributes ?
ele.setAttribute('data-rotate', 'true')
span#myElement[data-rotate="true"]:after {
transform: rotate(90deg);
}
You can use ngStyle directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngStyle]="{'transform': toggle ? 'rotate(180deg)':''}" class="fa fa-arrow-right"></span>
</span>
</a>
another way ngClass directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngClass]="{'flip-h': toggle}" class="fa fa-arrow-right fa-2x"></span>
</span>
</a>
or with element reference (not recommended)
<a href="#" (click)="elem.classList.toggle('flip-h')">Show
<span>
<label class="m-0">this</label>
<span #elem class="fa fa-arrow-right fa-2x" id="myElement"></span>
</span>
</a>
demo
I'm using the NgbDropdown component in my Angular 2 application. It is working fine, however I want to remove the arrow that is displayed on the right side of the button.
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
Dropdown Image
Solution
Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:
.dropdown-toggle::after {
display:none;
}
Why?
By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.
Doing this removes it.
Here is a LIVE DEMO demonstrating it.
How do you work it out?
Using chrome dev tools you can inspect the element:
We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:
The pseudo-element is no longer there!!:
add the following style to override the default one
.dropdown-toggle::after{
content:initial
}
LIVE DEMO
In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false:
$enable-caret: false;
This overrides the default value of true set in the Bootstrap's _variable.scss:
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
But keep in mind that it completely removes corresponding CSS styles. So, it's the best approach if you don't need carets globally and want to decrease your CSS payload.
I found you can do this within your app on a conditional basis by creating a custom class in styles.css
Note that using "!important;" is required or else elements at the bottom of the screen will still have a caret that points upward:
.remove-caret::after {
display: none !important;
}
html example with the custom class and replacing the icon with an ellipsis:
<div style="margin: auto; text-align: center">
<ul class="navbar-nav" [style.display]="'flex'">
<li class="nav-item d-inline-block" ngbDropdown>
<a class="nav-link dropdown-toggle remove-caret" style="color:#000; font-size: 1.1rem" ngbDropdownToggle href="#" role="button" aria-haspopup="true"
aria-expanded="false"><fa-icon [icon]="faEllipsisH" class="ml-2"></fa-icon></a>
<div ngbDropdownMenu aria-labelled-by="menuDropDown">
<a ngbDropdownItem href="#" (click)="test()">Test</a>
</div>
</li>
</ul>
</div>
I am using Bootstrap 4. I tried to remove the arrow in dropdown.
The answers I found for Bootstrap 3 do not work any more.
The jsfiddle is here.
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows
<button role="button" type="button" class="btn" data-toggle="dropdown">
Dropdown Without Arrow
</button>
overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks to me the simplest solution.
Edit: Keep dropdown class if you want to keep border styling
<button role="button" type="button" class="btn dropdown" data-toggle="dropdown">
Dropdown Without Arrow
</button>
With css, you could just do that:
.dropdown-toggle::after {
display:none;
}
I don't recommend any of the existing answers because:
.dropdown-toggle has more styling than just the caret. Removing the class from the element causes styling issues.
Overriding .dropdown-toggle doesn't make sense. Just because you don't need a caret on some particular element, doesn't mean you won't need one later.
::after doesn't cover dropdown variants (some use ::before).
Use a custom .caret-off in the same element as your .dropdown-toggle element:
.caret-off::before {
display: none;
}
.caret-off::after {
display: none;
}
Some have said they needed to add !important but YMMV.
remove the dropdown-toggle class
.dropdown-toggle::after {
content: none;
}
You can also try this
If you are interested in replacing the arrow with another Icon (such as, FontAwesome) you would just need to remove the border on the pseudo element of .dropdown-toggle
.dropdown-toggle::after { border: none; }
I was using the accepted answer for quite a while in my project but just now stumbled across a variable used by bootstrap:
$enable-caret: true !default;
If you set this to false then the caret will be removed without having to do any custom code.
My project was Ruby/Rails so I was using the bootstrap-rubygem. I changed the variable by importing a custom-variables.scss with the above variable set to false in my application.scss BEFORE the bootstrap.scss file/files.
If you remove fit the dropdown-toggle class as below, all the dropdown buttons on your system will no longer have the caret.
.dropdown-toggle::after {
display:none;
}
But maybe that's not what you want, so to remove just the specific button, we're going to insert a class called: remoecaret, and we'll fit the class: dropdown-toggle as follows:
.removecaret.dropdown-toggle::after {
display: none;
}
and our html looks something like:
<div class="btn-group">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Edit</li>
</ul>
</div>
Boostrap generates this using the CSS border:
.dropdown-toggle:after {
border: none;
}
If you wanna exactly only in this bootstrap button class, make:
.btn .dropdown-toggle::after {
display:none;
}
have you tried tag="a" within the class? it hides the arrow without further css.
Add no-arrow to drop-down toggle class declaration
This works on bootsrap4 and ng-bootstrap.
.dropdown-toggle:after {
display: none;
}
I have a JSFiddle set up here showing what is currently happening: http://jsfiddle.net/YX7T6/1/
This is the code:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>
CText
</li>
</ul>
<div class="pull-right">
<button class="btn btn-default btn-lg"> button1 </button>
<button class="btn btn-default btn-lg"> button2 </button>
</div>
</div>
</nav>
<div class="container">
<a href="#">
<img src="http://placekitten.com/g/150/150" class="img-thumbnail" style="margin-top:-130px">
</a>
</div>
I'm trying to get the image to show on top of the navigation not behind it as it is now. I've tried changing the z-index of the image to something higher but nothing has changed. What should I try next?
As the other answers mentioned, z-index only works on elements that have position. Applying z-index to an element that has no position will simply be ignored.
img {
position: relative;
z-index: 1;
}
Will make the browser recognize the z-index attribute, and place the image above the nav menu. In the future whenever you're having issues with z-index not being recognized, the first thing you should do is check whether the elements in question have position.
However, in this specific case, rather than messing with negative margins, it may be simpler to do:
img {
position: absolute;
top: 0;
}
Just add position like position:relative; to your element
if you plan to control it's z-index property
fiddle
Alternatively, use position: absolute on the img and skip the z-index stuff.
http://jsfiddle.net/YX7T6/8/
I am trying to adapt an excellent slideout panel example from here.
adapted code is here
I like to have different icons for hide/expanded state (something like > when hidden, < when expanded). Is it possible by changing the above code. Ultimately I may use icons from Font-Awesome
Thanks.
EDIT:
To be clear on the changes from the original version, the code I plan to use doesn't use the same markup. This is to avoid hindering the history. Please use the version http://codepen.io/jetpacmonkey/pen/ktIJz
<header class="main-header">
<label for="main-nav-check" class="toggle-menu">
☰
</label>
<h1>cssPanelMenu</h1>
</header>
You can using pseudo elements (IE8+). Replace the icon with a span with class .icon and then hook up a :before style to show the content based on whether the checkbox is checked.
Demo
HTML
<label for="main-nav-check" class="toggle-menu">
<span class="icon"></span>
</label>
CSS
#main-nav-check:checked ~ .page-wrap .icon:before {
content:"<";
}
#main-nav-check ~ .page-wrap .icon:before {
content:">";
}
Just change:
<a href="#main-nav" class="open-menu">
☰
</a>
<a href="#" class="close-menu">
☰
</a>
to this:
<a href="#main-nav" class="open-menu">
>
</a>
<a href="#" class="close-menu">
<
</a>
Demo: http://codepen.io/anon/pen/nImtd