I am working on Bootstrap. I wanted to make block inside table responsive.
As I resize the browser, block (bluebox) inside table is not adjusting according to screen size. I am new to Bootstrap.
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
min-width:267px;
width:100%;
display:block;
overflow:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page_info">
<div class="breadcrumb">
Home
<span class="delimiter fa fa-arrow-circle-right"></span>
<span class="current" style="font-weight: 300;font-size: 12px;color: #666;">Link us</span></div>
<div class="page-title">
<h1 style="font-family: 'Roboto';font-size: 40px;line-height: 44px;color: #339933;font-weight: 300;">Link us</h1>
</div>
<div class="clearfix"></div>
</div>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">To link to us, please choose and save one of the logos displayed below, and link it to ' http://www.dubaiexporters.com '.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">As per our linking Policy, no prior permission is required to link 'DubaiExporters.com' from your website. However, we would like you to inform us (using the 'Contact us' option) about any links provided to this Portal so that you can be informed of any changes or updates.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">We encourage you to choose from the following graphic banners which can be conveniently placed on your website and linked to our Portal.</p>
<p><b style="color: #339933;padding-left:18px; font-size:20px;">Banners for Download </b></p>
<table class="table table-bordered" style="margin-left:18px;">
<thead>
<tr>
<th>Banner</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/dubaiexportersbanners/dubaiexporters_168x72.gif" alt="dubaiexporters.com 130x38 jpg" width="168" height="72">
</td>
<td>
<div class="bluebox"><a href="http://www.dubaiexporters.com/"><img src="http://www.dubaiexporters.com/images/dubaiexporters_168x72.gif" border="0" alt="Dubai Exporters - Directory of Exporters, Manufacturers & Suppliers" /></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Link: https://jsfiddle.net/1h0bt35f/4/
Update: Add word-break: break-all; to the CSS class.
Also, you would need to define width in percentage in order to make it responsive.
Currently, you have given bluebox a width of 267px.
Try the below code where you can set a min-width of 267px and it will handle automatically when it scales due to width as 100%.
.bluebox {
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow: hidden;
width: 100%;
display: block;
overflow: auto;
word-break: break-all;
}
Try this:
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
width: 26%;
display:block;
overflow:auto;
}
Related
I'm working on a website menu with html in flask and css.
Issues:
I expect that when I click on the label (label for="toggle") the checkbox is checked, however this is not working.
I expect that when the checkbox is checked the below code is triggered, however this is not working.
Ad2)
.toggle:checked + .wrapper > aside {
margin-left: 0;
}
.toggle:checked + .wrapper > section {
margin-right: -40%;
}
html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Application Name</title>
<meta name="description" content="Application Name">
<link rel="favorite icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/base-theme.css') }}" id="mode_stylesheet">
<script type="text/javascript" src="{{ url_for('static', filename='js/switch_mode.js') }}"></script>
</head>
<body>
<div class="topnav">
<table class="topnav_left">
<tbody>
<tr>
<td>
<label for="toggle" class="toggler">
<input type="checkbox" id="offcanvas" class="toggle">
<span class="navicon"></span>
</label>
</td>
</tr>
</tbody>
</table>
<table class="topnav_right">
<tbody>
<tr>
<td>
<div class="topnav_mode">
<table>
<tbody>
<tr>
<td>
<label for="mode_toggle" class="mode_switch">
<input type="checkbox" id="mode_toggle">
<span class="mode_slider"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="wrapper">
<aside>
<nav>
HOME
API
<br />
<p>Versions</p>
<br />
Test
</nav>
</aside>
</div>
<section>
<div class="container">
<div class="row">
{% block body %}{% endblock %}
</div>
</div>
</section>
</body>
</html>
css file:
/* Off-canvas sidebar - start */
.wrapper {
height: 100%;
}
.container {
margin: 0 15px;
}
.row {
padding: -15px;
margin: 15px 0;
}
.row:before,
.row:after {
content: "";
display: table;
}
aside {
width: 40%;
height: 100%;
margin-left: -40%;
float: left;
position: absolute;
color: #FFFFFF;
background-color: #333;
}
section {
width: 100%;
height: 100%;
float: right;
margin-right: 0;
}
.toggle:checked + .wrapper > aside {
margin-left: 0;
}
.toggle:checked + .wrapper > section {
margin-right: -40%;
}
.toggler {
display: inline-block;
cursor: pointer;
}
.navicon {
width: 28px;
height: 28px;
background: url("../img/topnav/navicon.png") no-repeat;
background-size: cover;
display: block;
}
/* Off-canvas sidebar - end */
As it says in the MDN docs
To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for an attribute whose value is the same as the input's id.
You've used a class, instead it should be e.g.:
<label for="offcanvas" class="toggler">
<input type="checkbox" id="offcanvas" class="toggle">
<span class="navicon"></span>
</label>
The second problem is with this css selector:
.toggle:checked + .wrapper > aside {
margin-left: 0;
}
.toggle:checked + .wrapper > section {
margin-right: -40%;
}
The + selector is the adjacent sibling combinator, which means your .wrapper would need to be the sibling following your .toggle:checked element. Currently, it is a long way from being an adjacent sibling (and as there are no CSS rules that can reach 'up' the DOM tree there's no valid selector you can use with this current html structure).
Luckily, there is a neat trick you can do here, as long as you don't actually need the original checkbox to be visible. You can move the input element out of your label (the label-for keeps them bound still) and put it somewhere where a CSS rule can do what you want.
So in your case:
<input type="checkbox" id="offcanvas" class="toggle">
<div class="wrapper">
<aside>
<nav>
HOME
API
<br />
<p>Versions</p>
<br />
Test
</nav>
</aside>
</div>
I've had a real search through the existing questions here, and I've trawled Google for hours looking for a solution - but it seems this issue is quite specific.
In a nutshell, I have a fairly large table that contains multiple rows (a person on each line). There's a single column in each row, which I "split" into multiple DIVs using W3.CSS. (I use DIVs instead of additional TD's because the width of each DIV is will be different for each person - sort of like a Gantt chart style workforce management system).
The problem I'm having is that specifically in Chrome (not IE or Edge), I'm experiencing this random margin:
The page in Chrome
The page in IE/Edge
I've used Chrome's Dev Tools to try to figure it out, and you can see from this snip that the whole row (whether it's the TD or one or the DIVs - I don't know) seems to be 30px high, yet the content is only 24px.
It's driving me nuts, so I would really appreciate any support - even if it's to tell me I'm missing something obvious! Coding wise, I'm only just past the point of beginner, so I'm open minded that I'm not doing this right!
<div class="w3-container" style="width: 100%; margin:auto; ">
<table id="php_siteid" style="width: 100%; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="border-bottom: 3px #FFFFFF solid; padding: 0px; " class="<?php print rowClassChange($i); ?>">
<div style="width: 100%;" class="w3-cell-row">
<div style="width: 100px; padding-left: 10px;" class="w3-cell w3-left-align">
<div class="w3-cell-row" style="width: 100%;">
<div class="tooltip w3-cell" style="width: 100%;"><?php if (hasAccess("scheduler")) { ?><strong><span class="fakeLink" onclick="document.getElementById('id<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } else { include('inc/inc_agentsummary.php'); ?><strong><span class="fakeLink" onclick="document.getElementById('id_summary_<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } ?><span class="tooltiptext"><strong><?php print $agentLineDetails["agentname"] . "<BR>" . $shiftTime; ?></strong></span>
</div>
</div>
</div>
<div class="w3-cell w3-left-align w3-rest">
<div class="w3-cell-row" style="width: 100%;">
<div class="w3-cell w3-left-align" style="background-color: transparent; width: 10%;"></div>
<div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
<div class="w3-cell w3-left-align" style="background-color: #a32985; width: 15%; color: white; padding-left: 10px; border-left: 1px #E7E7E7 solid; border-right: 1px #E7E7E7 solid;">MFMT</div>
<div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
<div class="w3-cell w3-left-align" style="background-color: transparent; width: 35%;"></div>
</div>
</div>
</div>
<?php if (hasAccess("scheduler")) { include('inc/inc_agentweeklinks.php'); } ?>
</td>
</tr>
</table>
</div>
Thanks so much in advance - happy to provide more information/code if needed :)
Jamie
It's all about each browser default behavior. Chrome dose not set any value for vertical-align. Just define that property (In your case dosen't matter which value you will assign) to .w3-cell class which has that specific display value:
.w3-cell{
display:table-cell;
vertical-align:middle
}
I need your help,
I can't seem to figure out as to why the div (bottom border) breaks onto the next page when a print preview is done in internet explorer 11:
Either way, if it can done properly, or via another method, id ideally like to get a 1px border around the page (letter-sized, 8.5inches x 11.0inches) with some margins.
Here is the HTML and CSS markup in question:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page {
margin: 0.25in;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.table td {
padding: 0;
}
</style>
</head>
<body>
<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
<tr>
<td>File Number:</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
The problem has to do with the CSS box model. By default, borders are added to the outside of the width/height, so you need to change the box-sizing to border box, which puts the borders on the inside of the width/height:
<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...
If you don't change it to border-box, the div will have a height of 100% + 2px (1px for top border, 1px for bottom border) which causes the overflow to a second page.
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.
I am trying to create a hierarchical display of nested tables, where each sub level is indented further from the parent. I'm open to using table or div. The closest I've come is below. It looks mostly correct in IE (except that the borders on the right are mashed together). In Chrome the sub item border is extending beyond the parent on the right.
I'm open to using divs as well.
<html>
<head>
<style type="text/css">
.ItemTable
{
width: 100%;
margin-left: 20px;
border: solid 1px #dbdce3;
}
</style>
</head>
<body>
<table class="ItemTable">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>Item 1A</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
Looks like a couple of things. Your sub table was missing it's close tag and i added padding to the TD to help with the indent:
<style type="text/css">
.ItemTable
{
width: 100%;
border: solid 1px #dbdce3;
}
.ItemTable td
{
width: auto;
padding-left: 20px;
border: solid 1px #dbdce3;
}
</style>
<table class="ItemTable">
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
Item 1A
</td>
</tr>
</table>
</td>
</tr>
</table>
Tested it in Chrome, FF, IE6, IE7 and Safari and it looks like it works.
Do you plan on displaying tabular data? If not you would be better just using div's for this and just applying a margin to the child element like shown below
<style>
#container {border:1px solid #999}
.indent {margin-left:50px; border:1px solid #999;}
.item {background:#99cc00;}
</style>
<div id="container">
<span class="item">This is item 1</span>
<div class="indent">
<span class="item">This is item 2</span>
<div class="indent">
<span class="item">This is item 3</span>
</div>
</div>
</div>
Of course it really depends on what you are trying to display.
changing
margin-left: 20px;
to
padding-left: 20px;
works for me on IE7, firefox and chrome (although with chrome I had to un-maximise the window then remaximise it - looks like a rendering bug to me)