Sort arrows relatively close to each other
.up-arrow {
cursor: pointer;
/* height: 10px; */
}
.down-arrow {
cursor: pointer;
}<!DOCTYPE html>
<head>
</head>
<body>
<div>
<div class="up-arrow" onclick="clickupArrow()">
▲
</div>
<div class="down-arrow" onclick="clickDownArrow()">
▼
</div>
</div>
<script>
function clickupArrow() {
alert('up-arrow clicked');
}
function clickDownArrow() {
alert('down-arrow clicked');
}
</script>
</body>Sort arrows relatively close to each other
.up-arrow {
cursor: pointer;
/* height: 10px; */
}
.down-arrow {
cursor: pointer;
}<!DOCTYPE html>
<head>
</head>
<body>
<div>
<div class="up-arrow" onclick="clickupArrow()">
▲
</div>
<div class="down-arrow" onclick="clickDownArrow()">
▼
</div>
</div>
<script>
function clickupArrow() {
alert('up-arrow clicked');
}
function clickDownArrow() {
alert('down-arrow clicked');
}
</script>
</body>I am trying to display up/down sort arrays on table heads in html using react-fontawesome icons. Problem is they get displayed but with a "space" between them which does not look nice. Can they be displayed close to each other?
I've tried reducing the heights of divs but then it causes issues when user needs to click on any of these divs.
displayArrows = (sortKey, sortAsc, sortDesc) => {
return (
<div className="arrows-wrapper-div">
<div
style={{ cursor: 'pointer' }}
role="button"
onClick={(e) => sortAsc(e, sortKey)}
tabIndex={0}
>
<FontAwesomeIcon icon={faCaretUp} />
</div>
<div
style={{ cursor: 'pointer' }}
role="button"
onClick={(e) => sortDesc(e, sortKey)}
tabIndex={0}
>
<FontAwesomeIcon icon={faCaretDown} />
</div>
</div>
);
}
sort up/down arrows right now
Share Improve this question edited Apr 5, 2019 at 22:43 Hafsa Saleem asked Apr 5, 2019 at 15:02 Hafsa SaleemHafsa Saleem 8232 gold badges7 silver badges11 bronze badges 8- 5 Can you provide a full working example for us to work with? It's a bit tedious to re-create this example for ourselves in order to help you. – Sarah Groß Commented Apr 5, 2019 at 15:10
- Okay, let me provide an example. – Hafsa Saleem Commented Apr 5, 2019 at 21:08
- I've included a very simple example. Have a look at how the divs naturally have such height that they appear apart. – Hafsa Saleem Commented Apr 5, 2019 at 22:39
-
Play with the
line-heightproperty. Inspect the arrows on the browser's dev tools, maybe there's some margin or padding too. – arieljuod Commented Apr 5, 2019 at 22:44 -
There's no margin or padding added; it's the height of the div's content that's causing this issue. Playing with
line-heightof the both divs did make a difference though they are still apart then what I want them to be. – Hafsa Saleem Commented Apr 5, 2019 at 22:50
2 Answers
Reset to default 5Well dont know if this will work for you but here is a simple solution with css.
.up-arrow {
width: 0;
height: 0;
border: solid 5px transparent;
background: transparent;
border-bottom: solid 7px black;
border-top-width: 0;
cursor: pointer;
}
.down-arrow {
width: 0;
height: 0;
border: solid 5px transparent;
background: transparent;
border-top: solid 7px black;
border-bottom-width: 0;
margin-top:1px;
cursor: pointer;
}<!DOCTYPE html>
<head>
</head>
<body>
<div>
<div class="up-arrow" onclick="clickupArrow()">
</div>
<div class="down-arrow" onclick="clickDownArrow()">
</div>
</div>
<script>
function clickupArrow() {
alert('up-arrow clicked');
}
function clickDownArrow() {
alert('down-arrow clicked');
}
</script>
</body>You adjust your .up-arrow CSS like this:
.up-arrow {
cursor: pointer;
margin-bottom: -3px;
}