I am trying to design email template. In a table, clicking on a row, more info shows up. Here is the fiddle: https://jsfiddle.net/0oyubtaL/
However, the problem is that mobile app of outlook doesnt support and the rows dont expand. I have converted to use inline CSS from using internal CSS - it didnt work. here is the fiddle: https://jsfiddle.net/y2dr7ags/
My question,
Is there a way to make the :checked feature of checkbox as inline CSS in the above fiddle and make the expand table row feature work ?
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked+table {
display: table;
width: calc(100% - 20px);
}
Is there a way to achieve the same effect of collapsible table row using some simple HTML, CSS trick that would work in email templates ?
Is there a way to make the whole row of a table an accordion ?
Many thanks.
Related
Have html codes for images from a Shopify app that I want to be inline on the page.
I have tried following tips on making them inline blocks, but nothing works. Here's the html the gallery provides for embedding:
<div class="cz-embed-gallery cozy-gallery-lazy-load" id="cz-embed-gallery#">
in your css just select the div and apply the propert, eg.
.cz-embed-gallery {
display: inline-block;
}
unless there is conflicting css this should work, but then again there is only so much I can do because you have not provided me with your css, just essentially select your element and apply display: inline-block; as a css property to it.
I have an issue related to vertical whitespace in a table. I'm using the border-spacing CSS property to add some space between the table rows (to make them appear less-crammed).
Data is added dynamically in the table, so there can be the situation in which I have no data in the table (no trs) but there is some vertical whitespace due to the border-spacing property (which is currently border-spacing: 0px 10px).
Is there a possibility to fix this through CSS?
Fiddle example with data: http://jsfiddle.net/lav911/QLsah/
Fiddle example without data: http://jsfiddle.net/lav911/yWRS7/
I mention that the intended functionality would be not to display the table at all when there is no data in it.
Edit: Testing on Chrome.
You can use CSS :empty pseudo, and than use display: none;
table tbody:empty {
display: none; /* Than get rid of it */
}
Demo (No display: block; required there)
Still a small black dot remains, it is because of the border of your table element, since there's no way as of now to select the parent element using CSS, you cannot eliminate that without using jQuery, by selecting the parent element and applying border: 0;
like this
DEMO
table {
border-collapse:collapse;
}
CSS is not capable of knowing if selectors have content. Since you're adding it dynamically though, if there is no data present add a class to the table. something like:
<table class="empty"></table>
then, in your CSS, add:
table.empty {
display:none;
}
since you're using a framework that may or may not be editable, you can add this JS (using jQuery):
$(document).ready(function() {
if ($('table tr').length == 0) {
$('table').addClass('empty');
}
});
In the Primefaces Showcase, a SelectOneMenu is placed within a table cell. Here's the layout of the containing cell:
But, if I replicate the Showcase HTML structure and include its default.css, the layout I get looks like this:
Somehow they differ by ~3px!
This is annoying because I'm creating a form with input elements. Whenever I use SelectOneMenus, the grid row is slightly too large:
Any idea of how to remove this bottom "margin"? The developer tools in Chrome/FF/IE aren't revealing the root cause...
Add display:block to your css for the SelectOneMenu:
.ui-selectonemenu {
display: block;
}
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
My code for changing background of checkbox:
.question11 input[type=checkbox] + label {
display: block;
height: 16px;
padding-left: 25px;
background: url(images/bg.gif) top left no-repeat;
}
The problem is it's not working with Internet Explorer 9.0.4.
The CSS selector is too complex for IE. The easy solution is to give a class or id to the checkbox and the label if you can change the HTML.
<input type="checkbox" class="foo"><label class="foo">...</label>
.question11 .foo {
...
}
Juhana is right.
The other problem is, you can't style checkboxes 100% individual via CSS only.
There are great plugins for it, so you can completely replace the checkboxes etc. via images.
--> Uniform - sexy forms with jQuery for example.
The rule does not set any properties on any checkbox. It only applies to label elements in a specific context, and that’s how it works, on IE 9 and other browsers.
If you would like a rule to apply to any checkbox element that is immediately followed by a label element (as I guess), then you would need a different kind of selector—something that does not seem to exist in the CSS Selectors Level 4 draft, still less as supported. So you would need to add some markup, like class attributes for checkboxes.
Try like this
.chh {
background-image: url(images/checkbox_bg.gif);}
if(document.getElementById(id+ii).checked==true){
document.getElementById(id+ii).className==chh;
}
First write css then apply javascript function