Hello there, I just created this datepicker thingy which turned out pretty cool except that it creates some really annoying and weird looking white space below the divs when empty and appears higher, see the fiddle > http://jsfiddle.net/VtKkM/2/ Any help is greatly appreciated!
Haven't figured out the problem as of yet, but it seems that it doesn't like it when the spans are empty. One workaround, at least for now, is to replace your blank options with just a space ( ) so that there's still the illusion that it's empty but the spans still technically contain a value. This may not be a permanent solution, but it'll work for now.
To elaborate:
Line 2 of your js would go from
var days = '<option></option>',
to
var days = '<option> </option>',
and line 32 would go from }).parent().prepend('<span></span>'); to }).parent().prepend('<span> </span>');
Its for line height and your font size of page you can fix it by
Add line height style to your datePicker class like this:
line-height: 8px;
or change font-size like:
font-size: 10px;
Edit:
and for moving when you pick a some value from select you should set your span to position: absolute;
.datePicker > div > span{
position: absolute;
}
Edit2:
or you can set space value in first time in your span, change <span></span> to <span> </span>
Edit3:
i changed this lines to add space in initial between span tag, check values that add onload datepicker:
$.each(picker.children(), function () {
$(this).wrap('<div>').change(function () {
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val() - 1]);
} else {
$(this).prev().html($(this).val());
}
}).parent().prepend('<span> </span>');
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val()]?months[$(this).val()]:" ");
} else {
$(this).prev().html($(this).val()?$(this).val():" ");
}
});
Edit 4:
and css way, you can fixed it by add padding style to empty span like this:
.datePicker > div > span:empty{
padding:5px;
}
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;
padding:0 5px 0 5px;
}
Just change display:inline-block to display:inline
The part about it appearing high I could fix with giving .datePicker select a 5px margin.
Related
I need to target the last <a> element but with some conditionals.
In this case the text is created through a CMS which limit's me the option to add a class. I created a jsfiddle to show my problem. The last <a> must have an font awesome angle right in it's :after the other <a> elements not. I can't use something like :last-child a because the user/text writer doesn't have to write a link by default. There is also the possibility of another paragraph after the first. So nothing is default but the last <a> element which stands alone from the paragraph with some actual text must have an icon.
It's kinda hard to explain but the jsfiddle will explain itself so please take a look. it would be nice if there was a CSS solution. if not jQuery comes second.
Thanks in advance!
As far as I know it cannot be done using CSS alone.
How about JavaScript:
var element = document.getElementsByTagName("a");
for(var i=0; i < element.length; i++) {
var el = element[i]
var x = el.parentNode.innerText.length;
var y = el.innerText.length
if (x === y) {
el.classList.add('icon');
}
}
CSS:
.icon::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
It adds an .icon class to all <a> elements which are not wrapped inline with text in the parent element.
You can target the last p tag.
p:last-of-type a::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
I've been working on a pyramid website and I'm having a problem. I have a textbox inside my td, and if the text is long, it cannot be seen already. Here is what it looks like:
As you can see the level1 portion there, if I have a name like someLongnameforever, it will only be seen like this:
Is there a fix for this using css or any trick? I am using bootstrap by the way.
If you want to see my table code, click this. I'm using twig templating also.
For now I am already using a textarea for the level 1 fields.
Why don't you try ellipsing if it exceeds the maximum width available to it. And maybe try showing the complete name in a tooltip?
That would keep the table clean too.
Demowrap word to new line if there is overflow
button{
word-wrap:break-word;
white-space: normal;
}
You can add an overflow: scroll; to allow scrolling or you could add an ToolTip attribute so when users however they will see the full content.
I guess you can do something like this.
You should be able to change the example to fit your needs.
HTML
<div id="fitin">
<div>Lorem im Lorem im Lorem im Lorem im</div>
</div>
JS
$(function() {
var $fitin = $('#fitin');
var $fitindiv = $('#fitin div');
$fitindiv.css('font-size', '1em');
while( $fitindiv.height() > $fitin.height() ) {
$fitindiv.css('font-size', (parseInt($fitindiv.css('font-size')) - 1) + "px" );
}
});
CSS
#fitin {
width: 100px;
height: 30px;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}
Check the fiddle
I am injecting html from an editor into my site. How can I 'inherit' the alignment from a child element like this:
<li>
<div align="right">one</div>
</li>
the issue is that the bullets are aligned left and text is right , I would like to get the alignment from whatever is set on the div in this case 'right'. This can be different since it is coming from an html-editor.
css:
ul, ol, li {
list-style: disc !important;
}
jsfiddle:http://jsfiddle.net/bfu20zhq/
There is no way to select a parent according to this and the MDN has nothing to suggest that this has changed recently.
However, as indicated in related posts, this can be achieved through javascript (and must be, since css can't do it yet). You can do this by walking the DOM tree and finding all the div elements that have a parent li and then make their align attributes the same:
// create the filter for the tree walker
var div_filter = {
acceptNode: function (node) {
if ( node.tagName == 'DIV' && node.parentElement.tagName == 'LI' ) {
return NodeFilter.FILTER_ACCEPT;
}
}
};
// create the tree walker so we can
// find all the divs
var treeWalker = document.createTreeWalker( document.body,
NodeFilter.SHOW_ELEMENT,
div_filter,
false);
// walk the DOM tree for the nodes we want
// and make the `li` elements have the same `align` as the `div`s
while (treeWalker.nextNode()) {
console.log(treeWalker.currentNode);
treeWalker.currentNode.parentElement.setAttribute('align',
/* fetch the div's align attribute */
treeWalker.currentNode.getAttribute('align') );
}
Unfortunately, while this correctly sets the align attribute, it doesn't give the desired result as you can see in this fiddle. I'm leaving this here however because we need it for the full solution.
Setting float: right on the list elements has an effect, but a horrible one.
After a bit of tweaking, I found that adding inside to list-style and adjusting text-align to right or left accordingly, the desired result is achieved:
This is what we want, if the div has align = "right"
li {
list-style: disc inside;
text-align: right;
}
We also need to change the divs to display: inline-block so they don't act like non-text elements:
li > div {
display: inline-block;
}
If you want to align the bullets vertically, you need to give the divs a definite width, such as width: 30% or something like that.
So our while loop changes to:
while (treeWalker.nextNode()) {
console.log(treeWalker.currentNode);
treeWalker.currentNode.parentElement.style.textAlign =
treeWalker.currentNode.getAttribute('align');
}
Here is the complete fiddle.
If you want the same alignment simply add "list-style-position: inside;" to your css like this fiddle.
li
{
list-style: disc;
list-style-position: inside;
}
Link for reference is here: http://www.roi-owa.com/
The sidebar column (on the right) is written like this...
#aside {
background: #ffffff;
width: 220px;
overflow: hidden;
}
The main content column (on the left) and wider....is written like this...
#content.alpha,
#content.beta {
width: 700px;
background-color: #ffffff;
background-image: none;
}
The problem is that with how this theme is written...the aside column isn't contained inside a floated container with the content div...so I might be stuck. I don't want to start rewriting theme files, I just want the right column to stretch down to the height of the #content div. Not sure if its possible.
Unfortunately I don't know of way for this to be done in pure CSS, since the columns know nothing about each other. However, some simple Jquery could be used.
The idea is to check the height of both and set the shorter one's height to the longer one's height. It should look something like this in jQuery:
var contentHeight = $("#content").outerHeight();
var asideHeight = $("#aside").outerHeight();
if ( contentHeight > asideHeight ) {
$("#aside").height( contentHeight );
}
else {
$("#content").height( asideHeight );
}
I have a nested shopping-type list that is grouped by type (and has descriptions for each item).
What I'm wanting to do is have the last type scrolling in the list, until the point that it would scroll off the top of the list.
A list may declared as
<div id="items">
<item-type>Type A</item-type>
<description>a</description>
<description>b</description>
<description>c</description>
<item-type>Type B</item-type>
<description>d</description>
<description>e</description>
<description>f</description>
<description>g</description>
<description>h</description>
</div>
I'm using element types so that I can use #items > item-type:last-of-type in CSS3 to select the last element.
#items {
word-wrap: break-word;
overflow: auto;
height: 100%;
}
#items > * {
display: block;
}
#items > item-type:last-of-type {
position:absolute;
bottom: 100px;
}
So the only point now, is how do I keep it (effectively) position: relative; top: 0 to position: absolute; top: 0 using only CSS3?
I'm using FF4 and HTML5, so you can go all out; this won't be supported on older browsers. Also, using calc() is fine.
The valid view options are be something like:
______________________________________
Type A a Type B
a b e
b c f
c Type B g
d h
---------------------------------------
Where the lines are the visible area, and each column shows how it would appear given a certain amount of data (progression left to right)
If I understand the problem correctly, you want to create something like the iPhone Contacts list. Looking at the solution someone already built it uses JavaScript. Also, I've thought about it and gone through all the CSS3 specs but cannot determine anything that could be used here to achieve the same affect without JavaScript.
I knocked up a small demo, but again this uses JavaScript. I just don't think it's possible with pure CSS, although I'm sure someone will correct me if that's not the case :-)
HTML
<div id="items">
<item-type>Type A</item-type>
<description>a</description>
<description>b</description>
<description>c</description>
<item-type>Type B</item-type>
<description>d</description>
<description>e</description>
<description>f</description>
<description>g</description>
<description>h</description>
<description>i</description>
<description>j</description>
<description>k</description>
<description>l</description>
</div>
CSS
#items {
word-wrap: break-word;
overflow: auto;
height:100px;
border:1px dashed red;
width:200px;
}
#items > * {
display: block;
}
#items > item-type {
border:1px dashed blue;
background-color:#fff;
width:180px;
}
JavaScript (jQuery 1.6+)
var itemsTop = $('#items').position().top;
var itemTypeHeight = $('item-type').height();
var itemTypeBottom = itemsTop + itemTypeHeight;
$('#items').scroll(function() {
$('item-type').each(function() {
$(this).css({position:''});
if ($(this).position().top < itemsTop + itemTypeHeight) {
$(this).css({position:'fixed',top:itemsTop});
}
});
});
I think it's not possible for the following reasons (which may or may not be related):
When in normal viewing, a relative position is needed; at the top of the visible area, it would need to change to absolute
you could use calc() and min() or max() with the visible height, the current element's height and the current scroll position; except that none of these calculated properties are available to css
Another idea is making more absolute positioning of the 2nd item level, but there's no way of referencing the absolute-parent's height as well as the absolute-grandparent's height.
I think the first point is the easiest way to convince myself that it's not possible. The other two convince me that combinations of fancy css functions and absolute positioning are sunk as well.