3

I have a html page like this and when I hover the volume button which located on the right, the div box which contains the Upload and Delete function should be displayed beside with the volume icon. What I expect is when I hover the volume icon, the Upload, Delete and volume icon should be displayed in the same line, like picture below enter image description here
and grey panel will not be overflowed out of the box.

Does anyone have an idea how to set again the stylesheet to show this situation ?

1
  • 1
    Question title doesn't help... try "How to display an action list on hover using bootstrap?"
    – SparK
    Jan 27, 2016 at 11:11

3 Answers 3

5

make .prompt-audio-control display inline-block when they view on hover and not inline in order to fit next to each other:

.prompt-audio:hover .prompt-audio-control {
  display: inline-block;
}

Updated Fiddle: https://jsfiddle.net/y2ee6fsc/2/

2
  • thanks KAD, it works but now I see that the Upload is a little bit higher than Delete, how can I fix it ?
    – user5567313
    Jan 27, 2016 at 11:25
  • The containers holding the upload and delete are different, delete in inside a button tag while upload is in a div tag, just make sure to use either of them, I will update the fiddle
    – KAD
    Jan 27, 2016 at 11:26
2

Your elements that appear after hover had different value for display property. You can make them inline-block.

In order to make them on one line without changing html structure, you could remove overflow: hidden from .btn-file.

https://jsfiddle.net/wca36rqu/3/

2
  • thanks Anton, but the Upload and Delete are not really on the same line, the upload is a little bit higher than Delete, how can I fix it ?
    – user5567313
    Jan 27, 2016 at 11:24
  • @Son, I've fixed that too. Let me know if that works for you and consider accepting the answer (checkmark on the left of the question). Jan 27, 2016 at 11:37
0

i did some changes on your html and css maybe it will be help for you. https://jsfiddle.net/hamzanisar/j8p44she/

.btn-file {
    position: relative;
    overflow:hidden;
    margin:0 0 -2px 0;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor:pointer;
    display: block;
}
.PlayPromptIcon, PlayPromptIcon:visited {
    color: grey;
}
.PlayPromptIcon:hover {
    text-shadow: 1px 1px 10px black;
}
.prompt-audio-control {
    display: none;
    padding: 0;
    margin: 0;
}
.prompt-audio:hover .prompt-audio-control, .prompt-audio:hover .nm li:nth-child(1), .prompt-audio:hover .nm li:nth-child(2) {
    display:inline-block;
}
.nm{
    margin:0px;
}
.nm li:nth-child(1), .nm li:nth-child(2){
    display:none;
}

HTML

 <div class="container-fluid">
        <div class="input-group prompt" col-xs-2> <span class="input-group-addon">Prompt</span>
            <input type="text" class="form-control tts-prompt" placeholder="Text to Speech Prompt!!" />
            <span class="input-group-addon prompt-audio">
            <ul class="list-unstyled list-inline nm">
                <li>
                    <a href="javascript:;" class="prompt-audio-control" >
                        <div class="btn-file">
                            <input type="file" accept="audio/wav|audio/pcm|audio|vox" />
                            <span> Upload </span> 
                        </div>
                    </a>
                </li>
                <li>
                    <a class="btn-link prompt-audio-control" type="file"> <span> Delete </span> </a>
                </li>
                <li> <a class="PlayPromptIcon" target="_blank"> <span class="glyphicon glyphicon-volume-up"></span></a> </li>
            </ul>
            </span> </div>
    </div>
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.