javascript - Off centered Bootstrap Collapsable panel -
i have bootstrap collapsible panel off centered indicator arrow. center arrow. here's css im using:
.panel-heading a:after { font-family:'glyphicons halflings'; content:"\e114"; float: right; color: grey; } .panel-heading a.collapsed:after { content:"\e080"; }<div class="panel panel-default" id="pnlsubmission"> <div class="panel-heading"> <h4 class="panel-title" style="text-align:center;"> <a data-toggle="collapse" data-target="#collapsefour" href="#submission" class="collapsed"><h3>submission<span style="color:#ffcc33">.</span></h3></a> </h4> </div> <div id="collapsefour" class="panel-collapse collapse"> <!-- <div class="panel-heading"></div> --> <div class="panel-body"> <div id="my-tab-content" class="tab-content"> <div class="tab-pane active" id="tab1default"> <div class="container-fluid"> <div id="rootwizard"> <ul class="nav nav-tabs" role="tablist" style="margin-bottom:10px;"> <li><a href="#step1" role="tab" data-toggle="tab">step one</a></li> <li><a href="#step2" role="tab" data-toggle="tab">step two</a></li> <li><a href="#step3" role="tab" data-toggle="tab">step three</a></li> </ul> <!-- 3. create matching tab pane each tab. content goes within these panes --> <div class="tab-content"> <div class="tab-pane active" role="tab" id="step1"> <div id="rootwizard2"> <h4 style="color:#268aa8;margin-top:2em;">1. select source:</h4> <ul> <li class="active"><a href="#youtubetab" data-toggle="tab"><img src="content/youtube.png" style="width:3em;height:3em;"/></a></li> <li><a href="#vimeotab" data-toggle="tab"><img src="content/vimeo.png" style="width:3em;height:3em;"/></a></li> <li><a href="#metacafetab" data-toggle="tab"><img src="content/metacafe.png" style="width:3em;height:3em;"/></a></li> </ul> </div> <div class="tab-content"> <div class="tab-pane active" id="youtubetab"> <h4 style="color:#268aa8;margin-top:2em;">2. search youtube title:</h4> <div> <div class="text-center"> <br/> <asp:label id="lblyoutubetitle" runat="server" style="width:auto;"></asp:label> <br /><br /> <img id="thumbnailyoutube" src=""/> <br/> </div> <br/> <div class="row"> <div class="col-lg-3 col-md-3 col-lg-offset-1 col-md-offset-1"> <h5 style="color:#268aa8;margin-top:2em;">type in search-bar select specific video or clip dripdown</h5> <asp:textbox id="txtyoutubesearch" runat="server"></asp:textbox><asp:textbox id="txttags" runat="server" visible="true" style="display:none;"></asp:textbox><asp:textbox id="txtdataid" runat="server" visible="true" style="display:none;"></asp:textbox><asp:textbox id="txttitleclip" runat="server" style="display:none;" visible="true"></asp:textbox> <br/> <asp:label id="lblyoutubeid" runat="server"></asp:label> <br/> <select id= "dropdowndest" style="width:200px;" ></select> </div> <div class="col-lg-3 col-lg-offset-3 col-md-3 col-md-offset-3"> <h5 style="color:#268aa8;margin-top:4em;">- or - <br /> paste youtube link here.</h5> <asp:textbox id="txtyoutubepaste" runat="server"></asp:textbox> </div> <br /> <br /> </div> </div> </div> <div class="tab-pane" id="vimeotab" style="align-items:center;"><br /><p>coming soon.</p></div> <div class="tab-pane" id="metacafetab" style="align-content:center;"><p>coming soon.</p></div> <div class="tab-pane" id="commingsoon" style="align-content:center;"><p>coming soon.</p></div> </div></div> <div class="tab-pane" id="step2"> <br /> <h4 class="text-center" style="color:#268aa8;">3. can give description?</h4> <h5 class="text-center" style="color:#268aa8;">to link specific time in clip write time in form "hh:mm:ss".</h5> <div style="align-items:center;text-align:center;"> <div class="row"> <div class="col"> <textarea id="txteditor" runat="server" ></textarea> </div> </div> </div> <br /> </div> <div class="tab-pane" id="step3"> <br /> <div class="row"> <div class="col-lg-2 col-md-2 col-lg-offset-2 col-md-offset-2"> <h4 style="color:#268aa8;">4. podcast, video or music?</h4> <div style="align-items:center;text-align:center;"> <br/> <asp:dropdownlist id="ddlvideotypes" runat="server" width="100" ></asp:dropdownlist> </div><br/> </div> <div class="col-lg-4 col-md-4 col-md-offset-1 col-lg-offset-1" <h4 class="text-center" style="color:#268aa8;margin-top:4em;">5. add tags</h4> <br/><br/><br/> <div id="moviediv" > <telerik:radautocompletebox id="ddlmoviegenre" runat="server" style="width:auto;" inputtype="token" allowcustomentry="true" emptymessage="hover on '!' more info"></telerik:radautocompletebox> </div> <div id="musicdiv"> <telerik:radautocompletebox id="ddlmusicgenre" runat="server" style="width:auto;" inputtype="token" emptymessage="hover on '!' more info" allowcustomentry="true"></telerik:radautocompletebox> </div> <div id="podcastdiv"> <telerik:radautocompletebox id="ddlpodcastgenre" runat="server" style="width:auto;" inputtype="token" allowcustomentry="true" emptymessage="hover on '?' more info"></telerik:radautocompletebox> </div> <br /> </div> <h5 class="text-center" style="color:#268aa8;margin-top:5em;">finished! click submit</h5> </div> </div> <br /><br /><br /> <ul class="pager wizard"> <li class="first previous"><a href="#submission" accesskey="f">first</a></li> <li class="previous"><a href="#submission" accesskey="p">previous</a></li> <li class="last" style="display:none;" ><a href="#submission">done</a></li> <li class="next"><a href="#submission" accesskey="n">next</a></li> </ul> </div> <!-- progress bar --> <h4 class="text-center" style="color:#268aa8;margin-top:10px"> status of submission</h4> <div class="progress"><div id="progressbar" class=" progress-bar progress-bar-striped"><div class="bar"/></div></div> </div> </div> </div> </div> </div> <div class="panel-footer"><div style="text-align:center;"><asp:button id="btnmodalsubmit" runat="server" text="submit" onclick="btnsubmit_click" cssclass="btn btn-default"/></div></div> </div> <!-- panel collapse --> </div> <!-- panel must in submission -->
i think issue .panel-heading's width 100% of container.
i modified css include absolution position icon.
.panel-heading a:after { position: absolute; top: 35px; right: 10px; font-family: 'glyphicons halflings'; content: "\e114"; float: right; color: grey; } .panel-heading a.collapsed:after { position: absolute; top: 35px; right: 10px; content: "\e080"; }
Comments
Post a Comment