using bootstrap.
reproduce here
the first column is defined like this:
.feedback-table tbody tr td:first-child {
width: 40px;
min-width: 40px;
max-width: 40px;
word-break: break-all;
}
The html as you see in jsfiddle is sent the "bigger" html and wrpped inside a
The gap in there is created by the ::before pseudo element of the .row class.
This is from boostrap:
.row:before, .row:after {
display: table;
content: " ";
}
Why do you need the .row class for ? Strip that and the gap will go. If you need the .row class, you could also just specify content: none; for the after and before elements
.feedback-row:before, .feedback-row:after {
content:none;
}
Later EDIT: I've seen your comment about constraints. To be able to specify widths with tables you need to specify the table-layout to be fixed. Therefore...
.feedback-table {
font-family: 'Arimo', sans-serif;
font-size: 16px;
background-color: yellow;
margin: 15px;
direction: rtl;
text-align: right;
table-layout: fixed;
}
The table row spaces before and after. You can clear them using this:
.feedback-row:before {
content: None;
}
.feedback-row:after {
content: None;
}
Related
I am working on a website in which I want to have equal spacing between cell elements in mobile view.
The HTML code for that particular section of code where I want equal spacing is:
HTML code:
<td id="gv-field-6-25" class="gv-field-6-25"></td>
<td id="gv-field-6-29" class="gv-field-6-29">2016</td>
CSS code:
The complete CSS code which I am using is in order to make cell elements is:
#media (max-width: 767px) {
.gv-container-2777 th {
display: none;
}
.gv-container-2777 tr + tr {
display: block;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.gv-container-2777 td {
display: block;
margin-bottom: 5%;
margin-top: 7.9%;
}
.gv-container-2777 td::before {
display: block;
font-weight: bold;
margin-bottom: 1.6%;
}
.gv-container-2777 td:first-child::before {
content: 'Year Submitted';
}
.gv-container-2777 td:nth-child(2)::before {
content: 'Descriptive Title of Proposal:';
}
.gv-container-2777 td:nth-child(3)::before {
content: 'Name of Institution';
}
.gv-container-2777 td:nth-child(4)::before {
content: 'Awarded';
}
}
Problem Statement:
I am wondering what changes I should make in the CSS code (can't change the HTML code as its all coming from wordpress) so that there is equal spacing between elements before and after the border.
Attached are the screenshots where I want equal spacing before and after the border:
1st Image:
2nd Image:
3rd Image:
4th Image:
In the above screenshot the spacing is off before and after the border. I am wondering what changes I should make in the fiddle so that I can find equal spacing before and after the border.
Give margin-bottom and margin-top for .gv-container-2777 td same value.
.gv-container-2777 td {
margin-top: 5%;
margin-bottom: 5%;
}
Remove margin-bottom for .gv-container-2777 td::before
I used below CSS code for add row number to a table rows:
table {
direction: rtl;
counter-reset: line-number;
}
td:first-child {
text-align: right !important;
}
td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
}
but it's content not align right after tenth row. See below image:
But I want something like this:
I also try add padding but it's not a working solution.
How fix this?
This is my Fiddle now.
You can set min-width of td:first-child:before.
td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}
Make sure you put the number in an element, like this:
<input type="checkbox"> <div class="number">10</div>
Then you can style that element, to have a minimum width:
.number {
min-width:20px;
}
That way they have the same with, and you don't need funny padding depending on how many digits the number has.
I've got a CSS element set up to insert some content, via:
.foo:after {
content: "Bold, italics";
}
I'd like the word "Bold" to be rendered in a bold font-weight and the word "italics" to be rendered in an italics font-style. I know it's possible to add lines:
font-weight: bold;
font-style: italics;
But this will make both words bold and italics. If I could use html elements inside the content field I would put something like:
content: "<strong>Bold</strong>, <em>italics</em>"
But alas that's not possible.
Is there another way to achieve this effect? Ideally without invoking javascript and purely using html/css.
It's mentioned above, but unless you add a :before and :after not too sure how it can be accomplished without JS..
.foo {
float: left;
}
.foo:after {
content: "Bold, ";
font-weight: bold;
float: right;
margin-left: .5em;
display: block;
}
.foo:before {
content: 'Italic';
font-style: italic;
float: right;
margin-left: .5em;
display: block;
}
It also contains floats everywhere, but, hey! it works:)
Check it here: http://codepen.io/achoukah/pen/gpBopd
EDIT:
Heres the same, but with flex-box:
.foo {
width: 100%;
clear: both;
display: flex;
}
.foo:before {
content: "Bold, ";
font-weight: bold;
margin-left: .5em;
order: 1;
}
.foo:after {
content: 'Italic';
font-style: italic;
margin-left: .5em;
order: 2;
}
You do have other pseudo elements than 'after'/'before', like first-line or first-letter, which, with some imagination, maybe you could use on your particularly case:
w3schools Pseudo-elements
But 'inside' those first 2 I think you can not do nothing more, like #s0rfi949 pointed out.
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
I have an invoice that contains over 100 lines of product that I am trying to print. This single invoice should take over 3 pages, but when printed, the content flows off the footer and the next page is the following invoice.
I am using divs instead of tables, and I can't understand why the long invoices will not print on multiple pages.
Any ideas?
Here's my stylesheet:
h1,h2,h3 { margin: 0 0 0.5em 0; padding: 0;}
body { font-family: sans-serif; font-size: 0.8em; }
label, legend { font-weight: bold; }
pre { font-family: sans-serif; }
shipping_address {
width: 45%;
}
billing_address {
width: 45%;
}
order_info {
padding: 0 10px;
}
shipping_logo {
width: 115px;
}
content {
margin: 0px auto 0px auto;
width: 100%;
padding-bottom:15px;
}
div.container {
display: table;
width: 100%;
}
div.header {
display: table-row;
text-align: center;
}
div.row {
display: table-row;
}
.even {
background: #CCCCCC none repeat scroll 0 0;
}
div.cell {
display: table-cell;
padding: 0 10px;
}
You might want to specify specific stylesheets for printing. For example,
#media all
{
.page-break { display:none; }
}
#media print
{
.page-break { display:block; page-break-before:always; }
}
You can then apply the page-break class where you want to page to break. This article has a few neat tricks to format a page for printing.
We're going to need much more information than what you have suggested to really tackle this problem.
However, a pretty blind stab at something that would cause a similar behavior is if you had something set such that the height is 100%, whether it's a table, a div, or something. This is sometimes done to try and keep a footer at the bottom of the browser window and if you do that, this can cause this behavior when printing.