My html page has a fieldset and inside that div I am rendering a table on the fly.
This table can have just 1 row or 1000 row.
Outer Div's height is 75% and I do not want table to go pass through that.
The HTML code looks like this
<fieldset>
<div>Some text and some HTML Elements </div>
<<h4>Field Permissions </h4>
<table class="mytable">
// Dynamically populate rows. Number of rows can be 1 or 100 or 1000
</table>
</fieldset>
Now, I wish to keep this table within outer field set but it renders past across the field set.
In the attached image, DOM element with red border is the table and with blue border is the outer fieldset.
This is my css:
.mytable{
font-size: 12px;
margin: 10px;
width: 95%;
border-spacing: 5px;
text-align: center;
position: absolute;
height: 100%;
}
fieldset {
margin: 0;
font-size: 12px;
overflow-y: auto;
overflow-x: auto;
width: 100%;
height: 100%;
}
Try adding overflow:auto; to the fieldset
fieldset{
overflow:auto;
}
Ahh wait. If i remove 'position: absolute' and it works.
Thank you all for help though
Related
I have tried almost every answer in similar thread, but could find anything that works for me.
I have following site:
A header (div span over the full width).
A left column.
A right column.
The header and the right column are fixed.
I would like the text in the left column to disappear beneath the header when scrolling.
Something like I see on many websites where a header with a message (ex. "accept cookies") stays on a fixed place.
Any ideas?
HTML:
<div id="head">
<!-- here is the code of our header -->
</div>
<div id="content">
<!-- The next block for example with the main content -->
</div>
CSS:
#head{
width: 1000px;
height: 60px;
position: fixed;
background: #fff;
z-index: 1000;
}
/* So that our next block does not run under the header, as soon as the page is loaded, add an indent. */
#content {
margin-top: 60px;
}
Everything works now.
Left column scrolling with fixed header:
.header {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
}
Right column fixed (responsive):
#media (min-width: 1200px) {
.rightcolumn {position: fixed;}
}
After a lot of tinkering I finally have a decent setup for my material table. It's got pagination, it's got sort, it's got all the goodies I need. However, it looks off because several of my columns are single digit values, and they have the same width as columns I would prefer to be larger (like the description which is wrapped excessively).
Being inexperienced in scss (and css for that matter) I'm at a loss for how to fix this. I attempted tinkering with the flex property in just about every way I could figure out, and it doesn't appear to change a thing on the table.
This issue is further complicated in that I cannot easily use the 'hack' of the material table generating classes based on the column identifier, as the columns are generated dynamically. I could pass in width information as well, but that seems like an unmaintainable hack.
Is there a way to apply styling to the entire table and header that would get me the desired look?
I used this successfully with Angular10.
First, wrap your table with a div, like this:
<div class='table-responsive'>
<mat-table>
....
</mat-table>
</div>
then add this CSS
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.mat-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
.mat-row,
.mat-header-row {
display: table-row;
}
.mat-cell,
.mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
This will size the cells according to the content, and make your table horizontally scrollable!
Assuming that you do mean the angular material table, this one might help:
md-table - How to update the column width
Use the below style for columns width and header
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
I am using Joomla Membership Pro component and am having some trouble with CSS styling.
If you click here
http://se24media.net/dc3/index.php/join-us/membership-options/supporter/sign-up
You will see the background is styled nicely but if you fill in the form, click submit and go through to the page which dispalys your membership details it loses all styling (see link below)
http://i60.tinypic.com/33pa4c2.png
Does anyone know why it suddenly loses it's formatting?
Many thanks
It loses the styling because on the first page, the table containing all the fields is wrapped with <form> tags like so:
<form id="os_form">
<!-- Table with fields are in here -->
</form>
and the following CSS has been given for #os_form
#os_form {
background-color: #FFFFFF;
background-image: url("/dc3/images/news_header.gif");
background-repeat: repeat-x;
border-color: #868687;
border-radius: 12px;
border-style: solid;
border-width: 0 2px 3px 0;
color: #000000;
float: left;
font-family: 'Source Code Pro',sans-serif;
height: auto;
margin: 0 40px 40px 50px;
max-width: 100%;
opacity: 0.9;
padding: 40px 20px 20px;
width: 85%;
}
The second page simply displays a table with the class os_table so style this table, you will need to add the following to your CSS file:
.os_table {
/* code here */
}
Hope this helps
When I use overflow: hidden, top and bottom margins appear around these containers. I really don't understand why this should be. I'm looking for an explanation to help me understand CSS better.
Here is the code:
CSS CODE:
#container {
border: 2px solid black;
overflow: auto;
}
.field {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
padding: 0 5px;
border: 5px solid #FC0;
line-height: 1.5em;
overflow: hidden;
}
.w50 {
width: 50%;
}
.w100 {
width: 100%;
}
HTML CODE:
<div class="w50" id="container">
<div class="field w50">
<input type="text" size="100" value="input field that overflows #######################################">
</div>
<div class="field w50">content</div>
<div class="field w100">content</div>
</div>
If I don't use overflow: hidden, the container has no top and bottom margins, but I do have overflow issues.
http://jsfiddle.net/8ErHQ/2/
If I use overflow: hidden, the container (apparently) has top and bottom margins, but my overflow issues go away.
http://jsfiddle.net/8ErHQ/1/
Is there a way to use overflow: hidden and avoid this extra white space?
The mysterious whitespace you're seeing is because you made the divs inline-block, and inline elements are adjusted to text baseline, leaving room for descenders (letters that "hang low") like "j" and "g".
You can avoid the issue by setting a vertical-align value to something other than baseline (which is the default), like middle:
.field {
vertical-align: middle;
}
http://jsfiddle.net/8ErHQ/3/
...or just avoid using inline-block (float: left; instead, for instance)
For more information, you can check out https://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
There is one other option you can do. Using the one without overflow: hidden; you can use this approach to fix your overflow issue.
Set your css to this.
.field input {
width: 100%;
}
And change your input field to this.
<input type="text" size="auto" value="input field that overflows #######################################"> //Size was changed to AUTO
Here is what you get.
http://jsfiddle.net/cornelas/8ErHQ/5/
Put a margin value in your .w50 and .w100 statement.There might be other fixes, but that's the fastest I could think of.
.w50 { margin: 0 0 -7px 0; width: 50%; }
.w100 { margin: 0 0 -4px 0; width: 100%; }
I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
Please help, thanks.
Use positioning. The following worked for me...
With zoom to the center of the image (image fills the div):
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.
Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.
Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle: http://jsfiddle.net/MJ5j4/
just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.
Thats pure CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
Just Check out the Fiddle.
MyFiddle
Dave
If you are trying to get it in the middle inside the div, have you tried:
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case.
Either way, I hope it helps.
Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.
Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.
Check out this demo: http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Why didn't you set align of the image center?
Then your code should be:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
And I think it's also problem of the ratio of the image width vs the div block + it's padding and border.
Try to set it balance.