Hi,
This issue is only reflecting in Google Chrome,
In style
.GridviewScrollHeader > TH, .GridviewScrollHeader > TD {
padding: 5px; white-space: normal;
border-right: 1px solid #a5bed4;
border-left: 1px solid #fff;
border-bottom: 1px solid #AAAAAA;
border-top:none;
background:url(../Images/grid_head.jpg) repeat-x top center #cfe4ff;
text-align: left;
vertical-align: bottom;
}
If you provide the height to the grid then this problem can be solved. For example:
height: 250,
autowidth: true
width: 1100,
Related
On QdockWidgets part of the text is being caught off, the "tail" part or decender in typography terminology. So for example Chapters and Settings, the "p" and the "g" are cut
/******** QDockWidget - this controls the top header for widgets ********/
QDockWidget {
titlebar-close-icon: url(:/Controls/ic_close2.png);
titlebar-normal-icon: url(:/Controls/ic_undock.png);
color: white;
font-size: 12pt;
}
QDockWidget::title {
text-align: left; /* align the text to the left */
background: #2e333b;
padding-left: 27px;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid black;
}
QDockWidget::close-button, QDockWidget::float-button {
border: 1px solid transparent;
border-radius: 2px;
background: transparent;
}
QDockWidget::close-button:hover, QDockWidget::float-button:hover {
border: 1px solid grey;
}
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
padding: 1px -1px -1px 1px;
}
/*_______QDockWidget_______*/
The problem in border and padding here:
QDockWidget::title {
<...>
padding-bottom: 15px;
border-bottom: 1px solid black;
}
For example, you can reduce padding or remove border.
I'm trying to create this vertical line within my HTML page, I wanting to use it as a place to put side information. I'd like to be able to color this as well! I tried a few things, but just can't get it right. Here is my code:
#sidebar {
width: 200 px;
border-right: 3px solid #000000;
border-left: 3px solid #000000;
}
#sidebar {
float: left;
width: 200px;
padding: 15px 10px 15px 20px;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
min-height: 100vh
}
I think this is what you're wanting
I have an html file as inserted in the image file and i have to make the heading of it fixed and the rest table scrollable by using CSS.
I found the css to do that but my problem is that after inserting the css in html file the formatting for the header and data does not match .Suggest me whats wrong in my css my css is as following.
I want my formatting should not be disturbed only the header should be fixed up.
<style type="text/css">
div.tableContainer
{
clear: both;
border: 1px solid #963;
height: 300px;
overflow: hidden;
width: 1000px
}
html>body thead.fixedHeader tr
{
display: block
}
thead.fixedHeader th
{
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
position: relative
width: 200px
}
html>body tbody.scrollContent {
display: block;
height: 300px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th +th {
width: 50px
}
</style>
this is the image for html file i was not able to insert the source code of it.
add margin to table like jsfiddle.net/h5t98/
table
{
margin-top: 26px;
width: 138px;
}
.month
{
width: 79px;
}
.saving
{
width:49px;
}
I have given fixed column width you can change according to your max column width.
I have my td's set with a height on them, but on mobile devices such as my iPad and iPhone, the td background and border flows out of the td and into the tr. I recreated my exact code to show you what it NORMALLY looks like on my desktop, but as you can imagine there's probably a bug in my code which is allowing it to flow into the tr's
#tstyle2 {
width: 1000px;
border-top: 1px solid #e8e6e6;
border-bottom: 1px solid white;
}
#tstyle2 tr {
height: 160px;
border-bottom: none;
border-collapse: separate;
border-top: 1px solid white;
border-bottom: none;
width: 1000px;
}
#tstyle2 td {
border-top: none;
display: block;
height: 130px;
background-color: white;
border-left: 4px solid #bd6ec1;
box-shadow: 0px 3px 5px #b5b6b6;
}
http://jsfiddle.net/338cR/
I managed to find the solution:
I had to add
display:block;
to the #tstyle2 tr {}
and then add
width: 1000px;
to the #tstyle2 td {}
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.