I am using primeng ver 6.1.3
The last column on the table is short by 0.17px, here is an example of how it looks;
The expiry date cells are 47px in height. The cells in the actions column are 46.83px in height. If I try to increase the height with a specific css rule, somehow the browser or something in the rules always sets the cell 0.17px short.
This even occurs with the !important modifier.
This column is static, that is to say that it doesn't display any information from the result set. It just contains buttons with click events on them. The other cells are populated from a loop. This is a snippet;
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns" [ngSwitch]="col.field">
<!-- other cols here -->
<div *ngSwitchCase="'expiryDate'">
<span *ngIf="rowData.expiryDate">{{rowData[col.field] | date:'dd/MM/yyyy'}}</span>
<span *ngIf="!rowData.expiryDate">No Expiry</span>
</div>
</td>
<td class="actions-column">
<p-button type="button" icon="fa fa-pencil" title="Edit Comment" (click)="showDialogToEdit(rowData)"></p-button>
<p-button type="button" icon="far fa-eye" title="View Comment" (click)="showDialogToEdit(rowData)"></p-button>
<p-button type="button" icon="fas fa-archive fa-lg" title="Archive Comment" (click)="archiveComment(rowData)"></p-button>
</td>
</tr>
I am not sure how this is happening. At best guess there is some kind of fixed property which prevents me from applying a height correctly. Not come across anything like this previously.
Cheers.
Edit : Just discovered the issue doesn't occur in Internet Explorer, only Chrome.
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'm using the bootstrap dropdown component, which for me currently looks like this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="btnSaukList" data-toggle="dropdown" runat="server" style="width: 100%">
Select a Saukville contact
<span class="caret"></span>
</button>
<ul id="ulSaukContact" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" runat="server" style="width: 100%">
<!--NOTE: Intentionally left blank; li's are generated by code behind to populate users from Sharepoint.-->
</ul>
<input id="inpSaukValue" type="hidden" />
</div>
(default code sample here - as you can see, mine isn't that different structurally)
My problem is that every time I click a dropdown item, a postback is fired (browser jumps to the top of the page). I'm pretty sure this is because the default code Bootstrap uses is <button> which always includes a postback.
According to other SO articles regarding this issue, it's recommended to use an <input> or <asp:Button> instead. Well I can't do either...
<asp:Button> does not support text between the opening and closing tags.
<input> does not support the data-toggle attribute, which it seems the dropdown needs.
I've also tried adding onclick="return false;" to my <button> to no avail.
I'm new to bootstrap and to an extent, ASP.net.
UPDATE:
It wasn't a postback, it was a link to "#", I was confused, sorry!
I think I was confused about this one, and labelled the problem as a postback - it wasn't. In Bootstrap's default code snippet, every dropdown item includes a link to "#". Clicking a link to that(<a href="#">) will send the browser to the top of the page. I thought this was a page refresh but it wasn't actually refreshed.
A quick fix is to replace href="#" with href="Javascript:;". If anyone has a better solution, do share...
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 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.