I am using Bootstrap for my web application based on xml technologies (XForms with betterform as processor, XQuery etc.). I created it with eXist-db.
I have the following problem now: I want to create a responsive user interface and for that I want the height of the bootstrap grids fit on every screen so I want it to fill 80% of the height of the screen. But that does not really work. Here is my code:
<div class="col-md-3">
<div class="orderListRepeat">
<h3>Details</h3>
<div style="height: 80%; width: 100%; overflow-y: scroll; overflow-x: scroll;">
<table class="table table-striped">
<tr>
<td>
<b>Name:</b>
</td>
<td>
<xf:output ref="//object[index('object-repeat')]/name"/>
</td>
</tr>
<tr>
<td>
<b>Number:</b>
</td>
<td>
<xf:output ref="//object[index('object-repeat')]/number"/>
</td>
</tr>
<tr>
...
</tr>
</table>
</div>
</div>
</div>
Percentages just work on the width parameter. If I exchange the 80% of the height parameter with e.g. 500px everything works fine but percentages don't work here and I cannot understand why. In every screen resolution the table in the content is displayed completely although it overlaps the screen height.
I am thankful for every hint.
Use vh units (1 vh = 1% of vertical height of screen)
so instead of height: 80%;, use height: 80vh;
Related
Coding inline and with tables, I made a simple HTML e-mail signature that contains two images. When I send it from MacOS Mail several different clients, it works well on desktop. On iOS Mail, it shrinks down the size of the table, which is expected behavior, but it makes it significantly smaller than it needs to be, thus making my font-sizes tiny.
The table has a 3 row, 2 column structure, two colored rows and one white one which has a colspan for full table width.
Things I have tested to no effect:
more or less text content
giving the cells a width in pixels
giving the whole table width:100%
marking images display:block or display:inline
Apparently iOS Mail thinks the table is wider than it is, or at least treats it that way.
When I remove the images the two columns become equally wide and the table fills the whole width. So I'm looking for a solution in how the images are styled; does anyone know if I can add some CSS or HTML attribute to the images to fix this?
Here's the code, stripped of some text styling to keep it legible:
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign=top style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;">
<div style="font-size:13px; ">
<div style="font-size:16px;font-weight:600;">Name of the sender </div>
<div>Description of the role of the sender</div>
</div>
</td>
<td valign=top style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;">
<img src='logo.png' width=124 height=41 alt="Org logo" style="width:124px;height:41px;display:inline;" />
</td>
</tr>
<tr>
<td valign=bottom style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;">
<div><img src='line.png' alt="divider" width=210 height=24 style="width:210px;height:24px;display:inline;" /></div>
<div style="font-size:13px;">06 1234 5678</div>
</td>
<td valign=bottom style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;">
<div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
<div style="font-size:13px;">organisation.nl</div>
</td>
</tr>
<tr>
<td colspan=2 style="padding:20px;">
<p style="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
</td>
</tr>
</table>
First, make your table width 100%:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
That will make it fit the full width of its container.
Second, on the text-reduction, this whole table appears to only go down to about 415px. So if your mobile is smaller, it will scale it all as one group. To prevent that, make one or both of your images responsive. Here, I've made the divider responsive:
<div><img src="line.png" alt="divider" width="210" height="24" style="width: 100%;height: auto;display:inline;max-width: 210px!important;"></div>
I've added !important to the max-width because Outlook iOS has a default style that would change it 100% otherwise, potentially bloating your image.
Continue to use the width and height attributes because Outlook Windows desktop uses them.
I expected all browsers behave the same, which is setting all tds in a table to the width of the largest width indication of all tds.
Take a look at the following examples:
https://jsfiddle.net/rpkbf4n6/
=> This one is displayed correct in FF/IE but wrong in Edge (the very long text is not wrapped)
https://jsfiddle.net/8oa4fw2u/
=> This one is displayed correct in FF/IE/Edge
Why is this? I don't like to give all tds the width attribute and I don't like to give the width attribute to the largest content td (because the content is filled dynamically, so I don't know which is the largest)
Add a DIV above the table and use table-layout: fixed then it works with Edge
<div class="wrap">
<table class="table">
<tbody>
<tr>
<td style="width:100px;">
<span>Text</span>
</td>
<td>
<input style="width:160px;">
</td>
</tr>
<tr>
<td>
<span>Very very very very very long text</span>
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
.wrap {
width: 500px;
}
.table {
width: 100%;
table-layout: fixed
}
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
I have my table elements defined like this in my CSS:
table.index td{
width: 20%;
min-width: 20%;
}
But if there is not enough text to fill one whole line my table cells shrink! Why do this happen? I used min-width...
I don't like other anwsers on the forum where they use fixed width in px like here. I would probably go with this solution (I mean fixed table elements) if I could add a customized and stylish horizontal scrollbar to my table. Maybee this would be even better.
My table looks like this:
<div class="index">
<table class="index">
<tr>
<td>
event 1
</td>
<td>
event 2
</td>
</tr>
<tr>
<td>
event 6
</td>
<td>
event 7
</td>
</tr>
</table>
</div>
I have an HTML table three columns by four rows, and in the CSS I specify each cell's height and width in pixels. When the screen is large or small the cells appear the correct size, but somewhere in between large and small the width of the middle column gets squeezed and is much narrower than it should be. How can I keep the width constant?
I'm using Zurb Foundation for layout.
I tried it in the most recent Chrome (Version 32.0.1700.102) and
Firefox (26.0).
The problem occurs when the screen width is between approximately 640
and 800 pixels wide. Above that and below that is fine.
This is what the HTML looks like:
<div class="row">
<div class="large-3 medium-4 small-12 columns left">
<table>
<tr>
<th colspan="3">Header description</th>
</tr>
<tr>
<td class='key'>1</td>
<td class='key'>2</td>
<td class='key'>3</td>
</tr>
<tr>
<td class='key'>4</td>
<td class='key'>5</td>
<td class='key'>6</td>
</tr>
<tr>
<td class='key'>7</td>
<td class='key'>8</td>
<td class='key'>9</td>
</tr>
</table>
</div>
<div class="large-3 medium-4 small-12 columns left">
Other Content...
</div>
</div>
And this is the relevant CSS for the class 'key':
.key {
margin: 3px;
padding: 0;
height: 53px;
width: 53px;
border: solid 1px #fff;
text-align: center;
}
The code works fine. Which browser are you using? Try set the min-width property and if you are using responsive design make sure it is not overwriting the width property.