I have a button element that is hidden at the beginning.
However, I have to display it on certain trigger using JavaScript. But when its triggered it gets pushed to next line. See the Image below :-
What I actually want is :-
Here is my Html code:-
JavaScript
x
6
1
<div id="toolbar">
2
3
<a href="#" class="btn btn-secondary">Launch Access Log Report</a> <a href="#" style="display: none" class="btn btn-secondary" type="button" id="fresh" >Refresh Table Updated</a>
4
5
</div>
6
and my JavaScript code which push it to next line:-
JavaScript
1
6
1
function check(data)
2
{
3
if (data === 'no')
4
{ document.getElementById("fresh").style.display='block';}
5
}
6
What is messing it up please explain and how can I fix this issue.
Advertisement
Answer
display: block
will start on a new line and will take up the full width available. Use display: inline-block
or display: inline
instead.
Using display: block
JavaScript
1
12
12
1
<button onclick="show()">Show</button>
2
3
<div>
4
<a href="#">Launch Access Log Report</a>
5
<a href="#" style="display: none; background-color: red;" id="fresh">Refresh Table Updated</a>
6
</div>
7
8
<script>
9
function show() {
10
document.getElementById("fresh").style.display = "block";
11
}
12
</script>
Using display: inline-block
JavaScript
1
12
12
1
<button onclick="show()">Show</button>
2
3
<div>
4
<a href="#">Launch Access Log Report</a>
5
<a href="#" style="display: none; background-color: red;" id="fresh">Refresh Table Updated</a>
6
</div>
7
8
<script>
9
function show() {
10
document.getElementById("fresh").style.display = "inline-block";
11
}
12
</script>