I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:
<button id = "next" onclick="next()">
Volgende
</button><br><br>
I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.
Thanks in advance!
Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.
Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.
.button-container:not(:first-child) {
border-top: 1px solid red;
padding-top: 4px;
margin-top: 4px;
}
<div id="next-btn-container" class="button-container">
<button id="next" onclick="next()">Volgende</button>
</div>
<div id="other-btn-container" class="button-container">
<button id="other" onclick="next()">Volgende</button>
</div>
<div id="another-btn-container" class="button-container">
<button id="another" onclick="next()">Volgende</button>
</div>
<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.
So your html will be like:
<button class="mb-20px d-block" id = "next" onclick="next()">
Volgende
</button>
And add below line in your css
.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }
I have found how to make it work.
Instead of using
document.getElementById("button").style.visibility = 'hidden'
I have now used
document.getElementById("button").style.display = 'none'
This makes the buttons fill the gaps when they're hidden.
Related
I am developing a navigation side bar which should show some data when closed, and the reveal it all when hovered or focused via keyboard navigation (just using the tab button in this case). It works by having an inner container which I translates opposite of the outer container thus being able to show some content even when it is closed. It works perfectly fine when hovering, but when navigated to with keyboard events (tab button), the inner container suddenly translates itself the wrong place. If I remove and apply the translate class again on the inner class it translates back to where it should.
I find it weird that the inner container just translates itself on focus. And even weirder that it does not seem to be reflected in the CSS of the element, that I can just remove and reapply the same class and then it works.
A minimum reproducible example is found here: https://codepen.io/kasperlauge/pen/dyoaxKJ
Code for this is:
HTML:
<h1>Hover this list to reveal more...</h1>
<div class="outer">
<div class="inner">
<button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
<button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
<button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
<button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
<button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
<button type="button">abcdefghijklmnopqrstuvxyz</button>
</div>
</div>
CSS:
.inner, .outer {
width:200px;
overflow:hidden;
transition:all 0.3s;
}
.inner {
transform:translateX(150px)
}
.outer {
transform:translateX(-150px);
background-color: #BBB;
padding: 10px;
}
.outer:hover,
.outer:hover .inner {
transform:translateX(0)
}
When not hovered/focused:
When hovered (right behaviour):
When tabbed to (wrong behaviour):
Can somebody help?
I actually did solve it for my case, but unfortunately it does not generalize to the codepen provided in the question, thus I still would like to see a good solution to that in Chrome and Edge, as Firefox do not generate the faulty scrolling.
The way I solved it in my case was by reducing the width of the buttons to make them fit within the non revealed stuff. It works in our case because we have three states of revealing in our menu and it only have to fit within the two first states.
I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)
https://jsfiddle.net/dowxw1dz/2/
In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.
The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.
How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar? Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.
HTML:
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
<div class="searchResults">
Results!
</div>
</div>
</div>
<div style="width:600px;">
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
CSS:
.searchResults {
position:absolute;
top:100%;
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
.inputRow {
position:relative;
overflow:auto;
}
input {
width: 98%;
}
div {
z-index: 0;
}
JS:
$("#input").change(function() {
$(".searchResults").show();
});
It seems you need to use position fixed instead of position:absolute, and assign top:7% it will work. It's a way around. Still can't figure out why position:absolute is not working. I'm yet in the learning phase.
.searchResults {
position:fixed; /* instead of : position:absolute;*/
top:7%; /* instead of : top:100%;*/
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
Fiddle here : https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/
The solution was simply to ignore the input element, and put the results in the content below the input, instead.
Unfortunately, that meant that setting the width had to be done in JavaScript instead of simply relying on CSS to do the right thing. I ended up using $(".searchResults").width($("input").width()) in order to make the width of the results match the width of the input. (And I removed the top: 100% from the .searchResults CSS class.)
https://jsfiddle.net/dowxw1dz/7/
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
</div>
</div>
<div style="width:600px; position:relative;">
<div class="searchResults">
Results!
</div>
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
I've use bootstrap in my project, like this below
<div class="input-group">
<input type="text" class="form-control input-lg" autofocus>
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="button">search</button>
</span>
</div>
and in Bootstrap, I saw :
.input-group-btn:last-child > .btn {
margin-left: -1px;
}
So I write some CSS to avoid the useless margin-left:-1px; but I still have a problem:
When I click the area outside the <div class="input-group search-bar">, the button still have a effort like margin-left:-1px;
I'm confused, should I write some JavaScript to avoid this?
From the bootstrap source code on Github, these -1px styles are used when having button groups where the buttons align next to each other from doubling the border. If you place 2 buttons with a 1px border next to each other, you create visually a 2px border. The -1px shifts the button over so that the border is not doubled.
Comment from actual github source:
// Prevent double borders when buttons are next to each other
The -1px margin is there to prevent double borders when buttons are next to each other. It's meant to be this way.
If you really need to get rid of this, you may also have to adjust some of the negative margins and/or z-index for .input-group-btn > .btn:hover, :focus, :active, :first-child, and :last-child.
Excuse this basic question, but I couldn't find an answer that fit. I have this code in a view:
<div>
<h4> Irrelevant MVC code... </h4>
<button type="button" class="btn btn-success">Accept</button>
<button type="button" class="btn btn-warning">Deny</button>
</div>
I would like the 2 buttons to appear next to the heading, not below. How would I do this please?
Just add css property display: inline-block; to yours elements.
It's a method to display an element as a block while flowing it.
By default, your buttons are already inline, so you just need to display your h4 inline :
h4{
display: inline-block;
}
Try this :-
Because it is a block element, so your buttons come down.
h4{
display:inline-block;
}
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>