I have an HTML that has a navigation bar on top, a div with some wells and then another div which is the "main page" div.
So the main page div has a table in it with several columns. This table is a form and almost all are inputs. I have tried to add one more column there and the page gives me an overflow to the right.
I want to prevent it and make the table to be able to shrink based on the screen. I have this problem on a 15'' screen. Though on a 32'' screen there is no problem and everything is ok.
My CSS code for the table and the HTML is and from what I see the inputs on the table should be able to shrink base on the default values that they get:
html, body {
height: 100%;
margin: 0;
}
#mileCtlTable{
position: relative;
vertical-align: middle;
text-align: center;
border-collapse: collapse;
margin:auto;
border: 3px solid black;
//white-space: nowrap;
width: 100%;
}
#mileCtlTable thead td{
border: 1px solid black;
font-style:oblique;
text-align:center;
//white-space: nowrap;
margin:0vw;
background-color: navy;
color:white;
}
#mileCtlTable tbody td{
border: 1px solid black;
//width:auto;
white-space: nowrap;
text-align: center;
}
#mileCtlTable td,#mileCtlTable th{
padding: 0.2vw 0.5vw;
}
#mileCtlTable input{
text-align: center;
//white-space: nowrap;
padding: 0.2vw 0.5vw;
}
I have added
input{width: 100%;}
Related
I would like to have text inside the element to be aligned such that it begins from the bottom of the page. I want it so that as I increase or decrease the width of the div, the text fills up the bottom first before the top.
I want to look like the following design from adobe illustrator:
Instead, it looks like the following:
the code used in the second image is below:
<style media="screen">
*{
font-family: 'Heebo', sans-serif;
}
.big-intro-text{
font-size: 100px;
width: 100%;
position: absolute;
}
.big-intro-text div{
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
</style>
<div class="big-intro-text" align = "center">
<div>home of the zebras</div>
</div>
* {
font-family: 'Heebo', sans-serif;
}
.big-intro-text {
font-size: 100px;
width: 100%;
position: absolute;
}
span {
display: block;
}
.big-intro-text div {
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
<div class="big-intro-text" align="center">
<div><span>home<span> of the zebras</div>
</div>
Try this code.
You could add a large amount of margin on the top, and reduce the div height.
Sorry about the old answer, I did not understand the question.
I was creating a page on Reactjs. I have two react components, which are basically simple divs. Lets call one LeftPanel and the other one Right Panel.
So for left panel i have float set to left and for the right panel, i have float set to right, so that these panels appear on the respective sides of screen. (see screenshot attached).
The area left in the center, containing textbox and button is a div with following attributes:
.Area{
display: flex;
min-height: 125px;
align-content: center;
background-color: lightblue;
}
textarea and button have the following CSS:
.text{
display: flex;
width: 55em;
margin:3% 0% 0% 10%;
height: 33%;
font-size: x-large;
vertical-align: top;
resize:none;
border-top-left-radius:30em;
border-bottom-left-radius:30em;
border-color:black;
text-align: center;
outline: none;
box-shadow: 0px 5px 0px 0px rgb(51, 46, 46);
}
.searchBtn{
width:20em;
height: 38%;
margin-top:3%;
margin-right:10%;
border-top-right-radius: 30em;
border-bottom-right-radius:30em;
border-color:black;
outline:none;
box-shadow: 0px 4px 0px 0px rgb(51, 46, 46);;
}
Now, my problem is, that when i reduce the screen size, this happens:
Below 800px:
How do i fix this?
I can provide any further information if necessary.
You should avoid combining flex with float, because output behavior is often unexpectable. In below example I used flex for parent .container and for all children. I assume you want .leftPanel and .rightPanel to have defined min-width, so I added min-width: 250px; for .leftPanel (you can also add it to .rightPanel). Property flex: 1 for all children make them grow so to fit evenly .container, but all defined min-width are respected.
.container {
display: flex;
width: 100%;
}
.leftPanel, .rightPanel, .Area {
display: flex;
flex: 1;
border: 1px solid black;
}
.Area{
display: flex;
min-height: 125px;
align-content: center;
background-color: lightblue;
}
.leftPanel {
min-width: 250px;
}
<div class="container">
<div class="leftPanel">
leftPanel
</div>
<div class="Area">
Area
</div>
<div class="rightPanel">
rightPanel
</div>
</div>
I have a form where i have fieldsets, in 1 fieldset i have a table. This table will be in the fieldset in chrome and IE but not in Firefox. Please have a look:
https://jsfiddle.net/79504g5b/1/
my fieldset has this CSS:
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*----------------------->2*/ position: absolute;
}
I don't know what is the problem.
The element .statusHead1 does not occupy the available width. So, table is added next to it, in the available space.
To move table on it's own line, use clear: both on the table.
table {
clear: both;
}
See Demo.
Optionally, you can also set the float: left to the table.
Demo
I'll recommend you to use clear: both. Using this, you don't have to change your other elements structure/view.
Remove float:left form .statusHead1 class
Check this link https://jsfiddle.net/g0t1rwyw/
.statusHead1{
/*float:left;*/
width: 600px;
font-weight:bold;
border-bottom:1px solid #bfcfdf;
}
For my editor I need a vertical line to run from the bottom of draggableNode (the blue box) to the bottom of the page. When the text inside of the div draggableNode exceeds one line, the vertical line is shifted down as well, see below:
I can see that the vertical line is dependent on the end of the text whereas I would like it to be dependent on the bottom of draggableNode, regardless of how many lines the text is. How could I go about doing that?
CSS
.draggableNode {
width: 100px;
height: 36px;
margin: 0;
margin-left:15px;
position:absolute;
background-color: #29e;
color: white;
z-index:9995;
border-radius: 0.5em;
padding: .5em;
}
.verticalLine {
border-left: 3px solid #000000;
position: relative;
margin-left:50px;
z-index:-1;
height: 613px;
width:0;
margin-top: 8 px;
}
I'm using dataTables for my application and its awesome, but I do have a small problem: fnAdjustColumnSizing function only works when I resize the browser. Lets say I don't resize the browser and any additional scroll bars (i.e body scroll) bar pops up or any additional scroll bar pops up because I have the overflow set as auto for some within my page the header does not align with the columns. I'm including the image so you can see whats going on.
As you see in the image above, the scroll bar on the right causes the alignment issues. I have to re size the window to fix this problem every time its not doing it automatically how it works when I re size the the browser. Any suggestions?
Javascript:
$(document).ready(function() {
var oTable = $('#myTable').dataTable({
"sScrollY" : "400px",
"bPaginate" : false,
"aaSorting": []
});
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
} );
});
CSS:
#summary{
overflow-y: auto;
overflow-x: auto;
}
table.display {
font-family:arial;
background-color: #FFFFFF;
margin:0px 0pt 0px;
text-align: left;
position: relative;
border: 2px #808080;
border-style: outset;
}
table.display thead th {
background-color: #FFFFFF;
border: 1px #808080;
border-style: groove;
font-size: 14px;
font-family: Arial;
font-weight: normal;
text-align: center;
background-position: center bottom;
cursor: hand;
position: relative;
}
table.display tbody {
color: #3d3d3d;
font-size: 12px;
font-weight: normal;
vertical-align: center;
text-align:left;
font-family: Arial;
}
#export{
cursor: hand;
}
.highlight td {background: #FFFFFF;}
.cbx{
width: 13px;
height: 13px;
}
#table1{
height:600px;
overflow:auto;
}
After adding "sScrollX" : "100%", to my javascript it works fine for me now!.
Updating this in dataTables.fixedHeader.js from fixed to auto worked for me.
Note: It is probably not a good idea to update the dataTables.fixedHeader.js directly as I have for this example.