I have run into an interesting dilemma. I am trying to create a collapsible div to hold my data, and thus far it does not work. I thought it might be the jquery that is giving me my nightmare but after referencing it to google I still get the same problem. Once I click to collapse/expand. It does not do anything. Can you guys see anything wrong ?
<div class="panel-group" id="accordion" style="margin-top: 15px">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Complete Database Export</a>
<small style="margin-left: 10px">(click here)</small>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row" style="text-align: center; margin-top: 10px">
<asp:Label runat="server" CssClass="label">Complete Database Export</asp:Label>
<table style="width: 100%; margin-top: 10px">
<tr>
<td>
<p class="fg-color-grey">Enter the email addresses where the report will be sent to, seperated by commas:</p>
</td>
</tr>
<tr>
<td style="text-align: center">
<asp:TextBox ID="txtDumpEmails" runat="server" CssClass="genericTextBox widthOverride"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnDump" runat="server" Text="Generate Complete Database Export" CssClass="simpleButton marginOverride" OnClick="btnDatabaseDump_Click" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Is there anything I can try to check or that I have forgotten ?
Thanks in advance. I am really frustrated with this at the moment.
EDIT
I should also note that I do not get any errors in the web inspector console.
Ok, the code that you have will do the collapse/expand but it is on the link i.e.
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Complete Database Export</a>
and not on the following code:
<small style="margin-left: 10px">(click here)</small>
Expanded screen shot
Collapsed screen shot
If by selecting the 'Complete Database Export' link it is not exanding/collapsing you need to check that all your bootstrap resource files are loading correctly.
I would guess at the js file being missing which you could test by referencing the cdn i.e.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Related
I am trying to show the information in a modal from a repeater. My sample code is fllowing.
<asp:Repeater ID="rptData" runat="server" OnItemDataBound="rptData_ItemDataBound">
<HeaderTemplate>
<table class="table table-striped">
<thead class="bg-secondary text-info">
<tr>
<th>Name</th>
<th>Type of Membership</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><button type="button" class="btn btn-link" id="memberNameList"
data-toggle="modal" data-target="#memberDetailsModal" runat="server"></button></td>
<td><asp:Literal id="typeOfMembershipList" runat="server"></asp:Literal></td>
</tr>
<div class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-title text-center">
<h3 class="font-weight-bold" id="memberName" runat="server">Member Name</h3>
<p class="font-weight-bold mb-0" id="typeOfMembership" runat="server">General Member</p>
</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
I can get all the data from the database in the table in multiple rows. But when I click the button from any row to pop up the modal, it's showing the information from the first row only in the modal. I am getting that, the modal is binding only the information from the first row. I am not sure why.
You can use the same modal for every row. Pass the values using HTML data-* attributes to the modal and then, you can use jQuery to get the data and modify the modal dynamically.
Bootstrap Docs: Varying modal content
I have never had a problem with a media query like this before. Normally, it just does something unexpected, but not nothing. I don't need help with the actual effect, just as to why it isn't seeing the query. If you inspect the code, it is just not there. I referenced several other posts, but I have it formatted the same as far as I can tell, syntax wise.
Here is my HTML:
<div id="content_main">
<div id="bottom">
<div id="discord">
<div id="header_headset">
<h1>See who's online:</h1>
<div id="headset"></div>
</div>
<iframe src="https://discordapp.com/widget?id=90178023529127936&theme=dark" width="320" height="500" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="news_announcements">
<h1>News and Announcements</h1>
<p>First and formost, welcome to CommonRoomGaming.com. If you are new here, just find a game you have that you want to play with others, and just jump onto one of our servers! You can find detailed connection instructions on each games page.</p>
<div id="News_Events">
<ul>
<li>ECO Server Woes</li>
<li>New Server Incoming!</li>
<li>2/14/17 - Site Launched</li>
</ul>
</div>
</div>
<div id="S_A_G">
<div id="sad_dragon"></div>
<div id="sag_comments">
<h2>Not playing your favorite game?</h2>
<p>Here at CommonRoomGaming.com we don't discriminate against any games. If you want to play a game, odds are others have it and want to play it too! So with that said, if you don't see your favorite game listed, feel free to suggest it by letting us know in the below form.</p>
</div>
<div id="SAG_form">
<FORM action="emailit.html" method="POST">
<TABLE border="0" width="100%">
<TR>
<TD>Your name and/or handle:</TD>
</TR>
<TR>
<TD>
<INPUT type="text" size="30" maxlength="40" name="name"></INPUT>
</TD>
</TR>
<TR>
<TD>Your email address:</TD>
</TR>
<TR>
<TD>
<INPUT type="text" size="30" maxlength="127" name="email"></INPUT>
</TD>
</TR>
<TR>
<TD>Your message:</TD>
</TR>
<TR>
<TD>
<TEXTAREA name="message" rows="4" cols="50" style="width:300px" ></TEXTAREA>
</TD>
</TR>
</TABLE>
<P>
<INPUT type="submit" value="Make it so."></INPUT>
</P>
</FORM>
</div>
</div>
</div>
</div>
And here is my media query:
#media screen and (max-width:500px){
#bottom {
width:350px;
display:block;
margin-right:auto;
margin-left:auto;
}
}
Here is my codepen of the whole document link
Again, I only need to know what I am doing wrong with the media query. Ignore anything unrelated, as it is all changing.
Problem was related to DNS Caching.
Example here: https://jsfiddle.net/vdLk2wzk/. click in the CLICK HERE button to see the situation in action. The dropdown menu should show above everything.
<div class="col-md-12">
<div class="panel-group" id="accordionGroups">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle" data-toggle="collapse" data-target="#XX">
<span class="panel-subtitle">TITLE</span>
</div>
<div id="XX" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-md-12">
<div class="table-responsi">
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<span class="btn btn-default btn-xs dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">CLICK HERE<i class="fa fa-caret-down left-padding-low1"></i></span>
<ul class="dropdown-menu">
<li>XXXXX</li>
<li>YYYYY</li>
<li>ZZZZZ</li>
<li>PPPPP</li>
</ul>
</div>
</td>
<td>BIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTE</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap applies overflow-x:hidden on .table-responsive, and once you have an overflow it will actually cut it in both direction to guarantee that the scrollbar is accessible. You could of course remove the overflow whatsoever like so:
.table-responsive {
overflow:visible !important;
}
But it will break the responsive design so with this table layout you are out of luck. On the other hand this table layout is terrible to use on mobile anyway, so I would suggest using one of the following instead: https://css-tricks.com/responsive-data-table-roundup/
Yes, Even i was having the same problem but using the jquery it got fixed, please have a look into the below snippet.
i have found this# http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/
so based on you id change accordingly its working for me.
jquery mouse enter and mouse leave, you can try like this, for me its working fine
//Function to display/hide scroll on mouseenter/mouseleave
$(‘.slds-button–icon-border-filled’).each(function() {
$(this).on(‘mouseenter’,function() {
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘visible’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘visible’);
//alert(“hello-mousenter”);
});
$(this).on(‘mouseleave’,function() {
// alert(“hello”);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘auto’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘hidden’);
});
});
I have a situation here and perhaps solution is simple but I can't find a way out until now so I need some help.
I have this HTML code:
<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title">Seleccione uno o más fabricantes</h4>
</div>
<div class="modal-body">
<form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
</table>
</div>
</div>
<div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
</div>
</form>
</div>
</div>
</div>
</div>
Which render as image below shows:
What can be wrong in that markup? I'm using latest version of Twitter Bootstrap. Any help? Advice?
Some clarifications:
I need the table inside the form because it's tabular data and semantic I think this is the right choice
I need the form because I'm using BootstrapValidator plugin and as says here in docs that the right markup, and I need to check at least one checkbox is checked before enable the submit button and allow send the form
Remove the element <div class="form-group"> and its end tag surrounding <div class="table-responsive">. That will fix the padding issue. You also have an issue with the checkbox class. If you remove the checkbox class from the <div> containing the checkbox it'll align properly.
<div class="row-fluid">
<table class="s-table table table-bordered table-striped table-hover">
<thead class="p-table-head">
<tbody class="p-table-body">
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<div id="div_2_1_2_1_1_1_10_r9" class="Action_Group CoachView CoachView_show" data- eventid="" data-viewid="Action_Group1" data-config="config_div_2_1_2_1_1_1_10_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action_Group">
<div id="div_2_1_2_1_1_1_10_1_r9" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix">
<div class="l-nodeId" style=" display: none; "></div>
<div class="p-action-group">
<div id="div_2_1_2_1_1_1_10_1_1_r9" class="Action CoachView CoachView_show" data- eventid="boundaryEvent_10" data-viewid="Action3" data-config="config_div_2_1_2_1_1_1_10_1_1_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action" style="background-color: transparent;">
<button id="div_2_1_2_1_1_1_10_1_1_r9-lnk" type="button" style="display: none;">
<a class="p-action-link" href="#action" title="">
<i style="display: none;"></i>
<span style="background-color: transparent;">Select</span>
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have tried with the following different x path expression its works fine in Firefox but in IE browser it is not working?.
//tbody[#class='p-table-body']/tr/td[10]/div/div/div/div/a/span
//table[#class='s-table table table-bordered table-striped table- hover']/tbody/tr[1]/td[10]/div/div/div[2]/div/a/span
//*[#id='div_2_1_2_1_1_1_10_1_1_r9']/a/span
Note : i have tried to execute scripts it is not fail but main issue it is not recognizing
select link of a customer.
Try
//*[#id='div_2_1_2_1_1_1_10_1_1_r9-lnk']/a/span
to click on select
Not sure if it can help, but try selecting just the 'a' element, instead. There's no need to select also the span element, as far as I can understand. E.g.:
By.cssSelector("#div_2_1_2_1_1_1_10_1_1_r9 a.p-action-link")
Also, a couple of recommendations.
Try to avoid xpath selectors, and write css selectors instead. See selenium-docs
While writing a selector, you should not be too strict. "/tr/td[10]/div/div/div/div" is considered bad practice.
See Writing reliable locators for Selenium and WebDriver tests
Try to identify the element by using the text identifier
driver.findElement(By.xpath("//a/span[text()='Select']")).click();