I have a table with max-width: 300px;. In Mozilla Firefox, IE, and Opera, if the content of the table is wider than 300 px, it tries to break it. If it can't be broken, it allows the table to resize over 300 px. How can I achieve this behaviour in Google Chrome?
Edit:
<table style="max-width: 300px; background-color: yellow;">
<tr><td>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</td></tr>
<tr><td>LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.</td></tr>
</table>
In Firefox the table is 625 px wide. The text is dynamically generated.
Just add the following style to the table or the cells
word-break: break-all;
This will force the work to break even if it does not have spaces and not break the tables width, and it wont force you to set a min-width / width on the table either.
Edit:
This should give you the desired behavior:
<html>
<head>
<style type="text/css">
table {
width: auto;
}
</style>
</head>
<body>
<div style= "max-width: 300px">
<table style="background-color: yellow;">
<tr class="text"><td><div>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</div></td></tr>
<tr class="text"><td>
LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.
</td></tr>
</table>
</div>
</body>
</html>
Related
This is my Vue code and I am using bootstrap-vue, I am using the sidebar inside the card body Ideally it should only appear inside the card-body but it's not working. How can I make it fit either inside the outer div or b-card body?
<template>
<div class="">
<div>
<b-card title="Card Title" body-class="text-center" header-tag="nav">
<template v-slot:header>
<b-nav card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</template>
<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>
<b-card-body>
<b-sidebar visible="true" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img
src="https://picsum.photos/500/500/?image=54"
fluid
thumbnail
></b-img>
</div>
</b-sidebar>
</b-card-body>
<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
</template>
The sidebar wasn't really designed to be inside a container. but instead be used as an off-canvas menu for the entire page.
However, you can hack it a bit to fit your needs with a little CSS.
The sidebar is position: fixed by default, so that it is fixed to the viewport.
You need to change this to position: absolute, so that it will be positioned based on the closest parent that is position: relative. In this case that's the card.
In the snippet the sidebar goes over the title. If you want it only inside the body, all you need to be is wrap it in another element with position: relative
new Vue({
el: "#app"
});
body {
padding: 1rem;
}
.my-sidebar.b-sidebar-outer {
position: absolute !important;
height: 100% !important;
}
.my-sidebar .b-sidebar {
position: absolute !important;
height: 100% !important;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<!-- The height is only here for the example -->
<b-card style="min-height: 300px;" class="overflow-hidden" no-body>
<b-card-header>
<b-card-title>Title</b-card-title>
</b-card-header>
<b-sidebar id="sidebar-1" title="Sidebar" shadow class="my-sidebar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
</div>
</b-sidebar>
</b-card>
</div>
I solved by modifying the style of the element by using JQuery where top': '60px' is going to be the hight of the navbar.
mounted() {
$('#sidebar-1').css(
{'top': '60px',
'opacity': '80%'
}
);
},
In Internet Explorer 10 I have a problem with flexbox in this situation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
</head>
<body>
<div style="width: 500px; background-color: grey;">
<table>
<tbody>
<tr>
<td>
<div style="display: flex; display: -ms-flexbox;">
<span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus dui, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The "text very long" exceed from the grey div. In other browser it works. Also in Internet Explorer 11. Now I inserted meta to set Internet Explorer 10 compatibility.
UPDATE:
I updated the code with your corrections, but it yet doesn't works in my situation.
looks like max-width or width is needed too. http://codepen.io/anon/pen/wGgWWW
DISCLAIMER: only tested via the devellopper tools and not a real IE10
.a{
display: flex;
width:50%;
background:red;
}
span {
display:inline-block;
max-width:100%;
}
<div style="width: 50%; background-color: grey;">
<div class="a" >
<span >Text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long very long text very long text very long text very long text very long text very long text very long</span>
</div>
</div>
EDIT from code edited in question.
A table is wrapping the flex container.
Table expands according to content, if table-layout:fixed; is set with a width, the flex container should stands within and child should wrap inline content. http://codepen.io/anon/pen/oxBeoz
table {
table-layout:fixed;
width:100%;
}
<div style="width: 500px; background-color: grey;">
<table>
<tbody>
<tr>
<td>
<div style="display: flex; display: -ms-flexbox;">
<span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus duploplopoloppl i, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Well, since the same code works in Chrome and not in IE, it seems that there indeed is a bug. I could fix your code on IE by using px instead of % for the second div, also by removing the table. Somehow the interaction of table and percentage is causing a bug.
For me it is clear that the problem is in the way width is computed. What does 50% mean? It is half the width of the offset parent, but the offset parent is the table division, which computes its width based on its contents. You get a circular reference. Change the width of the div to a static px value and you break the circle.
Either way, what is the point of using a flexbox inside a table?
It looks like you forgot to close your <span></span> tag. I would start there. I have a working pen that works for IE10
http://codepen.io/cheapwebmonkey/pen/eZgzLP
I'm working with a bootstrap based site. I have a problem where we are trying to get the two column heights to be equal despite the size of the content inside the columns, and without setting a column height (to keep it responsive).
I have googled my brains out and decided that the display: table, display: table-cell is the appropriate way to fix this (we support IE9, so Flexbox is OUT, and the negative margin/padding thing breaks responsiveness). I have specific media queries to fix responsiveness based on screen size.
However, I am getting a single pixel of what appears to be padding on the left side of my smaller column in Safari (it looks perfect in IE, Chrome, Firefox and Edge). After looking through the inspector, I can tell that it's not margin or padding causing the pixel, so I'm not sure how to fix it. I tried border-collapse: collapse to no avail. If I remove the display: table or display: table-cell, it looks correct, but I need those to make the columns the same height (see example here). Any ideas? Code is below.
<style>
.row-tbl {
display: table;
}
.col-tbl-cell {
float: none;
display: table-cell;
}
.blue-bg {
background-color: blue;
}
.white-bg {
background-color: white;
}
</style>
<div class="row row-tbl">
<div class="col-md-4 col-tbl-cell blue-bg">
<!-- This displays as a table cell -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-8 white-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac tempus sem, nec luctus tellus. Integer erat urna, fermentum sit amet porttitor at, rhoncus non arcu. Aenean a libero consectetur metus imperdiet scelerisque at ut nibh. Sed mauris mauris, facilisis nec nulla at, cursus imperdiet magna.</p>
</div>
</div>
I can’t reproduce this issue in Safari 9 on OS X 10.11.2 with the code sample above, but it could be some kind of rounding error.
http://cruft.io/posts/percentage-calculations-in-ie/
You could try applying the left column’s background color to the row itself. If it goes away, then it might be a subpixel rendering issue.
Note: I think you’re missing the col-tbl-cell class on the second column ;)
I ended up pulling the row-tbl class onto a new div under the row and above the column. That worked!
I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.
I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.
I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.
<div>
<span>Some other stuff</span>
</div
<div class="outer-container">
<h2>
<a class="inner-container" href="https://www.google.com" target="_blank">
Lorem ipsum
</a>
</h2>
</div>
<div>
More different stuff
</div>
I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!
.outer-container {
background-color: #337AB7;
text-align: center;
vertical-align: middle;
position: relative;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
&:focus, &:hover, &:link {
background-color: #286090;
color: #fff;
text-decoration: none;
}
}
If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.
I hope I'm making sense...like I said, I have a horrible time explaining design stuff.
Any suggestions?
You just need to set background color to outer-container.
When you set background-color to <a> tag, the background color is assigned to the text only.
Here is you updated fiddle.
Here is the snippet.
.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}
<div> <span>Some other stuff</span>
</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div>
Why can you not change the background colour to be on the parent .outer-container?
This would solve your immediate issue.
See http://jsfiddle.net/n1gva5b4/
If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.
like this:
<div class="outer-container">
<div class="inner-container" >
Lorem ipsum dolor sit
</div>
</div>
Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.
My web page renders as I expect in IE. When I get into Firefox, it renders an important div in the wrong place, throwing the layout off. From what I can tell, Firefox is just wrong. How can I get Firefox to render the div in the correct place?
I've put borders around three of the divs to make it easier to see where they're being rendered. The purple one is the one that is incorrect in FF, but correct in IE.
EDIT
JSFiddle: http://jsfiddle.net/PYy6t/1/
JSFiddle renders the code identically (and in the same manner as FF) in both browsers, but IE10 renders it as I want it, and as my screenshot shows, when actually running the page.
My code:
<div style="float: left; clear: both; width: 100%;">
<asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
<hr />
<br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
border-width: 1px;">
 
<div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; ">
//details removed
<div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;">
//details removed
 
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
 
</div>
<hr style="width: 100%;" />
The Firefox render:
The IE render:
As you can see, FF is starting the div way up above the header text and the top hr, despite the fact that both should be taking the entire width. This is causing the second hr to render underneath the red-bordered panel (along with a label that should be further down the page), rather than beneath the purple panel. What am I missing?
Your issue is known as the clearfix problem. It is not only occuring in FF, but also in webkit browsers (safari and chrome). I even think that only IE handles it as you state you expect it to.
The problem only occurs when you have a parent div container, with all its children floating inside it. For a better explanation i suggest googling 'clearfix'.
The solution stated by #Kev does indeed work, but it requires you to a an extra element to your DOM, wich is only used for styling, wich is considered bad practice. I suggest working with some sort .clearfix class. I usualy work with the one from twitter bootstrap:
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
All you have to do is apply it to your #divTop container and you should be fine. An explanation on how and why it works can be found here: http://nicolasgallagher.com/micro-clearfix-hack/
Your HTML is pretty invalid at all. I don't know if you're using some fancy CMS but it's not right at all.
you don't close your divs inside #divtop
using css inline in html is bad practice, as it's supposed to be very poor in changing it.
if you want your divs side by side, they have to get the style attribute float:left
if you want to wrap the purple div around the others, it has to have overflow:auto in order to resize with its children
InternetExplorer is NEVER right, try to develop with firefox, chrome or safari. These are supposed to be the best of the developer browsers.
The result in all this would be:
<div style="float: left; clear: both; width: 100%;">
<asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
<hr />
<br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
border-width: 1px; overflow:auto">
 
<div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; float:left;">
<p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px; float:left;">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
 
</div>
<hr style="width: 100%;" />
If you can, then clear the float:left you have in your divs.
If thats not an option, then Kev answered how you can fix it.
float:left;//remove it or change it into
float:none;
I've created this fiddle. Take a look.