I use Twitter Bootstrap's alert feature to annotate an HTML table based on some statuses. In each table cell, there is also a modal window. The modal window inherits the CSS properties set by <td> element using alert* features:
<td class="alert alert-block alert-success">
<a>Modal Link</a>
<div>Modal Content<div>
</td>
So, when the modal displays it actually displays with the colors set by the type of alert which is already set by the parent td. Is there anyway to reset the CSS properties for the modal div?
You could write a style just for that <div> that overrides all the properties defined for .alert. However, I usually put the modal <div> outside the <table>.
<table>
...
<td class="alert alert-block alert-success">
<a>Modal Link</a>
</td>
...
</table>
<div>Modal Content<div>
The modal <div> is not going to be shown inside the <td> so no sense in putting it there.
Related
Hello I am trying to get a bootstrap dropdown to show the list inside a model. I guess what I am saying is that when i click the dropdown it expands but if the list is longer than the model it will then cut off the rest of the list causing a user not to be able to select all of the options.
I have been googling this and saw this post Click Here which is very similar to my issue. However, they say to set overflow:visible; on the parent element, which does allow the dropdown to show. My problem is that when I set that, the table extends out of the modal.
Now, My question: Is there away that I can only show the overflow on the dropdown and not the table?
without posting a ton of code in here this is what html and css looks like:
HTML:
<div class="my-grid">
<table class="table table-responsive">
<thead><tr><th>Choose One</th></tr></thead>
<tbody>
<tr>
<td>
<div class="dropdown">
<button class="form-control btn btn-default btn-toggle" data-toggle="dropdown" id="dropDownControl" type="button">
<div class="show-text">a</div>
<span>Some Chosen Value here</span>
</button>
<ul aria-labelledby="dropDownControl" class="dropdown-menu">
<li><a>a</a></li>
<li><a>a</a></li>
<li><a>a</a></li>
<li><a>a</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
css
.my-grid{
overflow:auto;
height:300px;
}
You have the same problem as in: Bootstrap dropdown clipped by overflow:hidden container, how to change the container?. The accepted answer will make the dropdown show outside the container, so the overflow will not matter any more.
Further hurdle may be that now the dropdown won't be shown at all since it is behind the modal dialog.
In that case, change your html to set the z-index explicitly (or handle it in the event script):
<ul aria-labelledby="dropDownControl" class="dropdown-menu" style="z-index:1000;">
If you are using AngularJS, you can use uib-bootstrap and the uib-dropdown control to append to body automatically (with "dropdown-append-to-body" attribute), but you still have to handle the z-index explicitly.
I have a really frustating problem im stuck with, I googled around a lot, maybe im searching for wrong phrases, but cant find a solution.
So i have table inside a div (a box), which is scrollable in the inside and the parent is also scrollable. The layout works fine with other tablets, but on ASUS Transformer i have the following problem:
If i scroll the body of the document and try to click on the link in the table (the table cells contain forms with hidden fields and a link) the clickable area moves. It seems like scrolling also moves the links, but the link labels, the hidden fields and the parent div stays in the correct position. It is only visibile due to the wrong position of the link outlines (and of course, that the links dont work if i click them after scrolling).
I was thinking about some weird margin collapse effect, but the elements inside are cleared, and overflow:auto is added to the parent. Maybe its some ASUS related bug?
The content is HTML5.
This is the part which fills the table with the links. WebView is used for displaying the content.
<div class="table_content_back" >
<div class="scrollable_content" >
<!-- BLOCK CONTENT STARTS HERE -->
<div class="table_content">
<table cellpadding="5" cellspacing="0" class="table" >
<tr id="t_h">
<th class="ta_left t_header"><%= message("siteName")%></th>
</tr>
<i:foreach var="ListItem" index="i" list="${sites}">
<tr>
<td class="ta_left" id="site_list">
<form name="Site-${i}" >
<input type="hidden" name="actionid" value="SharePoint/Flow" />
<input type="hidden" name="flow" value="sitebrowser" />
<input type="hidden" name="sitename" value="${ListItem.title}" />
<input type="hidden" name="siteurl" value="${ListItem.url}" />
${ListItem.title}
</form>
</td>
</tr>
</i:foreach>
</table>
</div>
</div>
</div>
I think that this is enough to pose my question.
The following is observed inside an ExtJS 4.1.1 panel in a border layout with a slider for resizing of a panel containing a tree panel. The text in the middle shows up with an elipsis truncation, and the tree panel exhibits a tiny amount of horizontal scrollbar sufficient to make the ... appear and disappear. What's going on? Is the 'hidden' triggering the ...?
<div style='overflow-x: auto'>
<table>
<tbody>
<tr> <!-- no spec , chrome says 'visible'-->
<td style='overflow-x: hidden'>
<div style='overflow-x: hidden'>
<span style='overflow-x: visible">
This is a fairly long string
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have an asp:Panel that I only make visible after a survey is completed. I have a script in the panel that displays a TripAdvisor widget. When the panel is made visible, the widget does not display. If I set the panel to visible when loading the survey, the widget does appear. How can I get the script to run after I make the panel visible? The asp:Panel code is below.
Thank you very much for any help.
<asp:Panel ID="PanelReviewSite" runat="server" CssClass="Panel" Visible="false">
<table>
<tr>
<td align="center">
<div id="TA_sswidecollectreview991" class="TA_sswidecollectreview">
<ul id="8XReiUtFMK2" class="TA_links R9Huu5J0oLD">
<li id="6lsEHIwyG34" class="RywVDRO81a">Write a review of <a target="_blank" href="http://www.tripadvisor.com/Hotel_Review-......">My Hotel</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=sswidecollectreview&uniq=991&locationId=81234&lang=en_US&border=true"></script>
</td>
</tr>
</table>
</asp:Panel>
Add to panel additional css class with display:none property in definition instead of using Visible property. And reset CssClass property back to Panel on survey completion.
All example skins I've seen use <div id="SomethingSomethingPane" runat="server"></div>. Is it possible to use something other than a div? Ideally I'd like to use something that doesn't require additional HTML mark up, such as an <asp:Literal> tag.
You have four methods at your disposal for creating Panes in a DNN Skin, as of DNN 5
TD
<table>
<tr>
<td id="ContentPane" runat="server"></td>
</tr>
</table>
DIV
<div id="ContentPane" runat="server" />
SPAN
<span id="ContentPane" runat="server" />
P
<p id="ContentPane" runat="server" />
If you need to remove the tag altogether, have some jquery run upon page load that strips that tag (select by ID), although an empty span is pretty harmless in most cases.
References
Page 468 of this book - div, span, td
DNN Source - p, search for "//load the skin panes"
Yes. You can use something other than a div such as a span.