I am using Bootstrap 3 in responsive mode. Is it possible to embed a region or regions on the site to be fixed rather then responsive. A fixed width table, for example?
Sure! Just don't use class="table" attribute on table definition.
<div class="container">
<div class="row">
<div class="col-md-8">
<table width="200">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>
</div>
<div class="col-md-4">sidebar</div>
</div>
</div>
Example https://jsfiddle.net/DTcHh/16851/
Related
I cant align the datatable suppose to show that header and bottom must be equal but on the image below it seems it does not equal to each other
how to fix this datatable
Here is the sample code below i created to display the datatable
<div class="row" id='content'>
<div class="col-md-4 pull-left">
<div class="customCenter" >
<img class="img-responsive rounded chooseTicket rounded mx-auto d-block" src="https://www.w3schools.com/bootstrap/paris.jpg" alt="Generic placeholder image" >
</div>
<h2 class='chooseHeader'>Commendation</h2>
</div>
<div class=" " id='dataList'>
<div class="">
<table class="hover dataTable data-table test table-responsive" id="example" style="width:100%">
<thead>
<tr>
<th>Ticket Number</th>
<th>Details</th>
<th>Created Date</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
We are using DataTables.Net within a Bootstrap Card. The card is initially collapsed. The grid is as small as possible. We can fix by choosing the page size and it will expand. If the Card is not collapsed it loads just fine. How can I add code to automatically reload on the click of the card or even better just get it to load the full size when the card is collapsed?
<!-- Begin: LogFile -->
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="500"><i class="fal fa-plus"></i></button>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<table id="dataTableLogFile" class="table table-hover table-striped text-responsive nowrap" style="width: 100%;">
<thead>
<tr>
<th>View</th>
<th>Category</th>
<th>Payload</th>
<th>Country</th>
<th>State</th>
<th>Postal Code</th>
<th>Lat/Long</th>
<th>Created</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
After a lot of trial and error the below is working perfectly in every web browser (Chrome, Edge, Firefox, Safari, etc). This appears to be the fix that everyone would need. The key is the hide.bs.collapse which runs AFTER the card is fully extended.
<script>
$(document).ready(function () {
$('button').on('click', (event) => {
$('hide.bs.collapse', (event) => {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc()
.scroller.measure()
.fixedColumns().relayout();
});
});
});
</script>
I have the following code:
<tr>
<td>
<div class="row show-grid">
<div class="col-sm-3">
<div class="pull-left">Start Date Time</div>
</div>
<div class="col-sm-9">
<div class="pull-left">#(item.StartDateTime.ToClientDateTime(tz))</div>
</div>
</div>
</td>
</tr>
What I am finding is that on my laptop, it shows fine as below:
When I minimize my screen, it shows as follows:
Is there a way to gave some gap between Start Date Time and the date/time so they are they are not squished together.
Hoping someone can help me out here.
I'm trying to pull a few bits of info from a web page programatically.
The HTML in question is like this...
<body>
<!-- body content -->
<div id="content">
<!-- Page Header -->
<h1>
PRODUCTNAME™
</h1>
<!-- End Page Header -->
<div id="productImg">
<img id="product.image.large.015" alt="PRODUCTNAME™" src="PRODUCTIMAGEURL" border="0" />
</div>
<div id="productAlt">
<table width="98%" border="0" cellspacing="1" cellpadding="2">
<tr class="altRowLtGray">
<td>
Item #
<span style="text-decoration: inherit;">015</span>
</td>
</tr>
<tr class="altRowLtGray">
<td>
<span style="float: left;">PRODUCTPRICE GBP</span>
<span style="float: right; padding-left: 1em;"></span>
</td>
</tr>
<tr class="altRowLtGray">
<td>
PRODUCTADDITIONALINFO
</td>
</tr>
</table>
</body>
I need to retrieve the 4 items in caps (PRODUCTNAME, PRODUCTIMAGEURL, PRODUCTPRICE and PRODUCTADDITIONALINFO) but am struggling as any examples I find dont seem to be able to be transposed to suit the above HTML... but it could just be me!
I know I need to use either GetElementByID or GetElementByTagName, but i've not used either of these functions before so please forgive my ignorance.
Any help appriciated!!!
I have a dynamic grid populating with Extjs code, for which the element IDs are not visible. Can some one let me know how to find the element i am using selenium webdriver to code. Thanks in advance.
I have added HTML code as i was unable to paste as an image. This HTML is the grid area with which the dynamic grid is displayed.
No Element is available in the HTML except for body elements
<div id="ext-comp-1117" class=" x-panel">
<div id="ext-gen127" class="x-panel-bwrap">
<div id="ext-gen128" class="x-panel-tbar x-panel-tbar-noheader">
<div id="ext-comp-1118" class="x-toolbar x-small-editor x-toolbar-layout-ct">
<table class="x-toolbar-ct" cellspacing="0">
<tbody>
<tr>
<td class="x-toolbar-left" align="left">
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-left-row"></tr>
</tbody>
</table>
</td>
<td class="x-toolbar-right" align="right"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="ext-gen129" class="x-panel-body x-panel-body-noheader"></div>
</div>
</div>
</div>
</div>
</div>
I cannot add comments yet, but could you please provide more information:
1. Sample of html?
2. elements not visible but are they present in html?
THanks
Try using Ext.ComponentQuery.query to fetch the id at runtime.