I have a problem with formatting a CSS table using the Gumby framework. The first row of the table "grabs" content above it.
I suspect I have some unclosed tag, but I sure cannot find it.
Here is what I think is the releveant css:
<div class="six columns" center-text>
<div id='Tips' >
<h4>Tips for Tops</h4>
OMITTING TWO PARAGRAPHS OF TEXT
<br><br>
</div>
<div class="twelve columns center-text"><br><h2>Top Ten Individual Winners at All Clubs This Year<br> See All Club Results</h2><br>
</div>
<div id="response">
<div class="CSS_Table_Example" style="width:100%">
<table style="margin: auto;">
<tr>
<td>
etc.
The first row of the table put a border around the sides of the containing the "Top Ten..."
You can see the issue on a draft page at:
http://billhogsett.com/Whist/ajax.php?scores/index
The right hand column contains a table 50% of the time so you may need to reload a few times to see the issue.
I hope this is enough information to allow someone to solve my dilemma.
Remove background from the div or set a width so it won't go out. And set border: none for the CSS_Table_Example class to get rid off the border around.
Hope this is answers your question.
btw. don't use <br> to put some space, use margin property instead.
Related
I'm working with a data table constructed from DIVs and styled as a CSS grid (not my idea! and I've been asked to leave it that way, so please just accept that as an immutable condition). My task is to make it accessible and, for now, I'm testing with ANDI in Chrome on Windows. It's an Angular application with Bootstrap, if that makes a difference.
(UPDATE at another's request: ANDI is a detailed web accessibility analytical tool published by the US Social Security Administration at https://www.ssa.gov/accessibility/andi/help/install.html. It's a favelet, you just save a bookmark to it and then click the bookmark when you have a page up in your browser.)
When I open the page in the browser and turn on ANDI, it finds the table, with its 13 columns and 100 data rows in addition to the header row, but it flags two errors:
"ARIA table has no [role=row] rows."
"<table[role=table]> has 1313 cells not contained by [role=row]."
And, indeed, while ANDI marks the table with a dashed border, it doesn't mark the cells, nor does it respond to my hovering the cursor over them.
There's an Angular component element, the data row component, <app-content-row>, in the middle of this. I wondered whether that could be source of the problem, but I tried removing it, leaving only the row with the column headers, and ANDI gave me the same report.
I can't provide the full code for proprietary reasons, and for clarity I'm going to leave out the directive (_ngcontent-wjw-c154, in this instance) that Angular inserts into every element, but looking at it in the Chrome inspector window, it starts, basically, with:
<div role="table" class="..." ...>
<div role="rowgroup" style="display: contents;">
<div role="row" ...>
<div role="columnheader" ...>ID</div>
<div role="columnheader" ...>Name</div>
<div role="columnheader" ...>Start Date</div>
<!-- More columnheaders -->
</div>
</div>
<div role="rowgroup style="display:contents;">
<app-content-row ...>
<div role="row" ...>
<div role="rowheader" ...>137</div>
<div role="rowheader" ...>Frapjab Industries</div>
<div role="cell" ...>04/15/2008</div>
<!-- More cells -->
</div>
<!-- More rows -->
</app-content-row>
</div>
</div>
Above is my second attempt. In my first attempt, I didn't even have the role="rowgroup" divs wrapped around the header row and around the data rows, and I guessed that maybe they, unlike thead and tbody in an HTML table, were required. In my third attempt, guessing that maybe the role="row" divs had to be directly inside the role="rowgroup" element, I removed the second "rowgroup" div and instead stuck role="rowgroup" into the <app-content-row> tag. That role did carry through to the code displayed in the Chrome inspector. But it made no difference in the ANDI outcome.
My fourth attempt, removing the data rows (including the Angular component tags they're wrapped in, leaving only the column header row:
<div role="table" class="..." ...>
<div role="rowgroup" style="display: contents;">
<div role="row" ...>
<div role="columnheader" ...>ID</div>
<div role="columnheader" ...>Name</div>
<div role="columnheader" ...>Start Date</div>
<!-- More columnheaders -->
</div>
</div>
</div>
Still no good. So the Angular component tags had nothing to do with it.
Are there any common causes of ANDI failing to find the table structure defined by the roles, or unable to see the defined roles? Is there anything it seems I've missed?
i have little issue with a part of a code. I didn't write this code myself but i am supposed to fix some issues. Down below you can find the code that causes this issue. The issue itself is that the right column bars are moved depending on how long the letters in the first column are, see image below. Does anyone have a solution for this, i am fairly new to this kind of work.
enter image description here
<td class="progress-bar-average">
<div fxLayout="row" fxLayoutGap="1rem" *ngFor="let averateRating of ideaAverageRatings; let i = index"
style="align-items: center; margin-right: 50px;">
<div><b>{{getAlphaCategory(i + 1)}}</b></div>
<p-progressBar value="{{averateRating.averageRating}}" fxFlex="50" [showValue]="false"
styleClass="bar">
</p-progressBar>
<div>{{averateRating.averageRating}}%</div>
</div>
</td>
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
I have started work on a new project and decided to give Foundation 5 a bash to see what it's like. The first thing I noticed in the documentation when creating forms with horizontal fields is they use a large number of divs for styling. So I tried an example below (second example I tried it without divs):
<!-- Example with extra divs -->
<div class="row">
<div class="large-2 columns">
<label>Contact</label>
</div>
<div class="large-6 columns left">
<select></select>
</div>
</div>
<!-- Example without extra divs -->
<div class="row">
<label class="large-2 columns">Contact</label>
<select class="large-6 columns left"></select>
</div>
These both achieve the same thing with slightly different styling. I was wondering if anyone could explain why I would use the first one (follows foundation documentation) and not the other ... with less html! I am guessing it has something to do with how foundation is used and I am just not up to speed with it enough yet.
Thanks
Having <label> in <div> will give you lot of flexibility in styling. Defining a class for <label> will restrict your styling options. For a <div> you can define height, background color, border, width, background image, gradient fill, margins, padding, and lot more. Whereas giving <label> a class name would not let you do those styling. You could try it.
Basically, a <div> works as a box or container holding some content element in it, and that gives you lot of power and flexibility in styling. Whereas defining classes for content element doesn't give you that flexibility and power.
I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
<div style="width: 100%;border-style:solid;overflow: hidden;">
<span style="float: left;">
<h3> Your appointment Details</h3>
</span>
<span style="float: right;">
<img src="someImage"/>
</span>
</div>
Very late to the conversation, but here is how to "float" in html email using align="" instead.
Example here
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
This is a really good guide from Mail Chimp on Coding for HTML Emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
Use tables for layout.
Set your widest table to be maximum of 600px wide.
Don't try and use JavaScript or Flash
Don't use CSS in a style tag as some mail clients will discard it.
Use inline CSS styles only.
Basically code your emails as if it was roughly 2003.
CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
Simple floating images can be like
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
<div style="text-align:justify;">
...a lot of text here untill you want to insert an image that floats left...
<table cellpadding="0" cellspacing="0" align="left" style="float: left;">
<tr>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
<td width="15"> </td>
</tr>
</table>
...a lot more text here until you need an image that floats right...
<table cellpadding="0" cellspacing="0" align="right" style="float: right;">
<tr>
<td width="15"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left.
<span style="Float:left;">Content to float</span>
Maybe you should use !important too;
I tested it and it worked.
check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
this is not an elegant answer but I did it this way
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>