I am currently working on a website that is mobile friendly. In this case I have to use the same HTML. I can make do some minor adjustments but it MUST look like the same when I change it back to this default CSS.
#explain{
position:absolute;
top:100px;
left:20px;
width:95%;
min-width:0;
margin:auto;
column-count:1;
}#explain th{
margin:0px;
}#explain_icon img{
width:130px;}
<html>
<head>
</head>
<body>
<table id="explain" cellspacing="15px">
<tr id="explain_icon">
<td><img src="IMG/group.png" alt="Image has failed to load"></td>
<td><img src="IMG/Bell.png" alt="Image has failed to load"></td>
<td><img src="IMG/Warrenty.png" alt="Image has failed to load"></td>
</tr><tr>
<th>Japan</th>
<th>is a</th>
<th>smaller china</th>
</tr><tr>
<td><b>The
</b></td>
<td><b>Human
</b></td>
<td><b>Esophagus
</b></td>
</tr></table>
</body>
<html>
Use Bootstrap. Integrate Bootstrap in your website and just divide your html page in row and column classes. This is perfect way to make any website mobile friendly.
I solved my problem by changing the table into a divider format. I also made a list for the individual objects within the code. I went into the CSS and changed it so that the display would go into "table" which basically made everything columns.
Related
I've got an HTML where the width of table cells is defined in mm (in the #style attribute). This is designed to fit on an A4 page (210 mm page width). I'm using CSS Paged Media.
<?xml version="1.0" encoding="UTF-8"?>
<html lang="en">
<head>
<title>A5 Test</title>
<link rel="stylesheet" type="text/css" href="booktemplatea5test.css"/>
</head>
<body>
<table data-ait-rows="2" data-ait-cols="2" style="width:170mm;" data-ait-tabletype="warning">
<tbody>
<tr style="height:12mm;">
<td colspan="2" style="width:100%;border-width:3pt;border-color:#000000;background-color:#FFB2B2;" >
<p class="warning">Possible hazard. Risk of personal injury.</p>
</td>
</tr>
<tr style="height:12.4mm;">
<td style="width:40.2mm;border-left-width:0.40pt;border-right-width:0.40pt;border-top-width:0.00pt;border-bottom-width:0.40pt;border-color:#010101;">
<p class="body">text</p>
</td>
<td style="width:128.1mm;border-left-width:0.00pt;border-right-width:0.40pt;border-top-width:0.00pt;border-bottom-width:0.40pt;border-color:#010101;vertical-align: middle;">
<p class="body" >A warning is used</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Now I want to use the same table for a different output that uses A5 (width 148.5mm), so I want the CSS to resize the table to fit.
#page {
size: A5 portrait;
margin-start: 1cm;
margin-end: 1cm;
margin-top: 2cm;
margin-bottom: 2cm;
}
table, tr, td {
max-width: 100mm;
}
This CSS works for very simple tables (one cell). As soon as the table becomes more complex (like the example above), the max-width instruction is ignored.
Is there a way to achieve what I want (make the table fit on A5) in CSS? Or do I have to process the HTML and calculate new cell widths?
Use !important to override properties in the style attributes:
table, td {
width: auto !important;
}
From https://www.w3.org/TR/css-style-attr/#interpret:
The declarations in a style attribute apply to the element to which the attribute belongs. In the cascade, these declarations are considered to have author origin and a specificity higher than any selector.
From https://drafts.csswg.org/css-cascade-3/#cascade-sort, property declarations with !important have a higher importance than 'normal author declarations', and importance has higher priority than specificity.
I have the following code:
<div ng-cloak ng-init="viewAlbum()" class="ng-cloak">
<h3 ng-cloak class="ng-cloak" ng-bind="album.Title"></h3>
<table ng-cloak class="ng-cloak">
<tr>
<td class="label-col"><span class="album-label">Composer</span></td>
<td class="value-col">{{album.Composer}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Release Year</span></td>
<td class="value-col">{{album.ReleaseYear}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Rating</span></td>
<td class="value-col">{{album.Rating}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Reviews</span></td>
<td class="value-col">
<ol>
<li ng-repeat="review in album.Reviews">{{review.Text}}</li>
</ol>
</td>
</tr>
</table>
The problem is that I am seeing a quick flicker when the page load. I'm am not seeing raw unprocessed angular code. Instead, the entire table flickers including the static text such as the labels.
I did some experimenting - when I remove the H3 tag, I no longer see the flicker. So, I believe what is happening is the H3 tag is initially rendered with no value and therefore takes up no vertical space. When the value of the album title is rendered, the table is pushed down, and it is this "pushing down" that is causing the flicker. My theory could be wrong however.
The ng-clock attributes don't mitigate this. I tried a verbose option of surrounding the H3 tag in a container DIV and setting the height and min-height of that DIV in the css but that also isn't preventing the flicker.
As I said, if I remove the H3 tag, there is no flicker. Any suggestions please?
As mentioned in the below link you can Just wrap your h2/h3 tag in a div with display: inline-block; like this:
<div class="header2"><h3></h3></div>
and then add this to your css:
.header2 { min-width: 100px; width: auto; min-height:45px; background-color:#333; color:#FFF; display:inline-block; padding:10px; }
Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/
Check :How do I make an inline element take up space when empty?
I recommend you also to use ng-bind for all your doms and remove the ng-cloak too
I'm working in a project where we are using Angular with ng-bootstrap and various other plugins and it's Great.
But when using ng-repeat inside a ng-template for some popover content, the placement of the popover gets wonky.
<script id="broken.html" type="text/ng-template">
<div>
<table class="table table-condensed table-popover">
<tbody ng-repeat="a in test">
<tr>
<th>test</th>
<td>aaa</td>
</tr>
</tbody>
</table>
</div>
</script>
Plunker example.
The "Broken" button that uses ng-repeat spwans a popup that is too far down. While the "Works" button that has the table hard coded works as intended.
Does anyone have an idea of how one might fix this problem?
Best regards, Fredrik
I'm creating a Visualforce page rendered as a pdf ( renderAs="pdf" ), and the page won't render any of my CSS styling. I am wrapping my <style> with <head> as shown below.
<apex:page standardController="Account" readOnly="true" showHeader="false" sidebar="false" standardStylesheets="false" renderAs="pdf">
<head>
<style>
#page{
margin:1in;
}
.myTable {
border-collapse:collapse;
border:1px solid black;
}
</style>
</head>
<table class="myTable">
<tr>
<td>A Column</td>
</tr>
</table>
</apex:page>
What's really bizarre is that I tried copying another VF page that I have rendered as a PDF with style classes and the like, and IT won't render either. So I thought, "What if I change the API version of my VF page to 27?" And lo, it works.
Any ideas on fixing this to work with API v28? Or is this just a bug?
http://cloudyworlds.blogspot.com/2013/06/using-css-in-pdf-for-page-numbering.html
I have documented behaviour in the above blogpost.
Applyhtml=false has to be manually set to false in apex:page to get this working.This is a new attribute added in API 28.0
We are using ExtJS4 in our application. We have a problem with grid focus.We are using grid.getView().focusEl.focus() in ExtJS3. Now it seems that this is not working.What is the replacement for this one in ExtJS4.
I have helped you checked on the differences in ExtJS3 and ExtJS4, the major changes is the focusEl has been removed from the gridView element.
In ExtJS3, focusEl is the anchor link in the view
<div class="x-grid3-scroller" id="ext-gen10" style="width: 298px; height: 174px; ">
<div class="x-grid3-body" style="width:100px;" id="ext-gen12">
<div class="x-grid3-row x-grid3-row-first x-grid3-row-last" style="width:100px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:100px;">
<tbody>
<tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 100px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">0</div></td></tr>
</tbody>
</table>
</div>
</div>
</div>
In ExtJS4, this anchor link doesn't exist
Solution
This is a small fiddle test I have created for you. Basically what you need to change is as follow:
grid.getView().el.focus();
Instead of getting the focusEl (an anchor link), we use the whole element.
Hope this solve your problem.