Issue
I'm trying to build a button bar component where there can be a variable number of buttons. I can do anything I need to wrap these buttons, etc, but I need to be able to size the buttons based on percent width inside a div. Since I'm porting over flash to html5, I need to be able to specify this percent width as well as place a 1-10 pixel gap between the buttons, depending on the implementation. The buttons themselves are expected to have things like borders, etc, all the usual properties and the buttons will need to be absolutely positioned due to the way the legacy component engine works.
Is there any way through some combination of html / css to create a % width and reduce the size of each button by pixels within that % width? I realize this could easily be solved using explicit values and jQuery, but for many complicated reasons relating to dynamic resizing / tweening I would strongly prefer to let css handle the positioning.
I started a fiddle below:
Solution
I found the general answer here: CSS 100% height with padding/margin
and applied it to my case below:
<div id="buttonBar">
<div class="buttonWrapper">
<div class="innerWrapper"><button>My Button</button></div>
</div>
<div class="buttonWrapper" style="left:33.333%;" >
<div class="innerWrapper"><button>My Button</button></div>
</div>
<div class="buttonWrapper" style="left:66.666%">
<div class="innerWrapper"><button>My Button</button></div>
</div>
</div>
CSS::
*{
position:absolute;
}
div#buttonBar{
width: 300px;
height: 35px;
background: #933;
}
div.buttonWrapper{
width: 33.333%;
height: 35px;
}
button{
display: block;
width: 100%;
height: 100%;
border: 6px solid #333;
background: #eee;
}
div.innerWrapper{
bottom:0;
top:0;
left:0;
right:0;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
There's a lot of wrapping going on, but that part won't interfere with my architecture. Here's the example where it's working:
EDIT: looks like I had a link to the wrong version previously, updated link below: https://jsfiddle.net/hyperthalamus/maKuG/32/
Thanks for all the suggestions.
Answered By - Shane
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.