I'm developing an internal web app for my organization, written in PHP. Unfortunately, HTML and CSS are not among my specialties, so I have to teach myself a lot of the presentation side as I go.
I want to implement a basic scrolling box with some content in it. For the most part I've gotten it working. However I can't use the keyboard with IE (9, 10, 11) to scroll inside an HTML5 semantic element (section, article, nav, etc). A regular div works fine. Firefox and Chrome have no problems regardless of the element.
To be clear, the scroll bar is visible, active, and functions properly when directly manipulated (i.e. clicked or dragged). The mouse scroll-wheel also scrolls just fine. Only the keyboard arrows seems to be an issue. I could just shrug and abandon the HTML5 semantic tags entirely (having no functional use for them beyond readability), but I'd rather figure out what's wrong.
Is there something I'm doing incorrectly, or have I hit an IE bug that requires a workaround? I've tried searching/experimenting for hours and can't seem to find a solution.
CSS
.scrollable {
height: 75px;
width: 150px;
border: solid black 1px;
overflow-x: hidden;
overflow-y: auto;
}
HTML
<section class="scrollable">
IE <em>can not</em> keyboard scroll this.<br />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</section>
<div class="scrollable">
IE <em>can</em> keyboard scroll this.<br />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
Looks like IE has forgotten to made these new elements focusable, when they're having scrollbar(s). You can fix the issue by adding a tabindex to section tag, works at least for IE10.
A live demo at jsFiddle.
Related
I'm trying to show a horizontally center-aligned Foundation 6 dropdown. I'm attempting to use a dropdown as a tooltip, because it better fits my needs and allows for rich HTML to be inserted into it, where the tooltip does not.
Foundation 6 dropdowns can be positioned by adding classes .top .right .bottom .left. These classes are parsed by the Foundation core Javascript and then the element is given dynamically calculated top: and left: attributes.
Because of this, adding any left, or transform: translate properties to the element are voided by the fact that Foundation takes this into account when dynamically calculating the positioning attributes.
Any ideas short of writing a different class into the javascript?
Use text-center.
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu text-center">
<li>Item 1A</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
In Short
I need to be able to activate a menu on hover while I'm dragging a sortable object. Is this possible?
The context:
I have a nav menu that's being powered by cssmenu, which basically takes list items and arranges them into a nice clean menu structure. I'd like to connect the lists in the nav menu and be able to rearrange the elements with jqueryui sortable connected lists. I can get the connected lists to work separately (outside of the cssmenu) and within one menu of a particular list. The problem is when I try to drag from one menu item to another, the drop-down isn't activated.
You can see in this fiddle that I can sort objects within a list but I can't activate the drop-down menu to drag it into another list (i.e. drag from the yellow list to the blue list or vice versa):
http://jsfiddle.net/9j5wyoLn/
html
<div id='cssmenu'>
<ul id='subNavElements'>
<li class='active has-sub'><a href='#'><span>About Us</span></a>
<ul id="sortable1" class="connectedSortable">
<li class="">Item 1</li>
<li class="">Item 2</li>
<li class="">Item 3</li>
<li class="">Item 4</li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Articles</span></a>
<ul id="sortable2" class="connectedSortable">
<li class="">Article 1</li>
<li class="">Article 2</li>
<li class="">Article 3</li>
<li class="">Article 4</li>
</ul>
</li>
</ul>
</div>
js
//make sortable
$(document).ready(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
css: handled in fiddle (too much to show below)
Figured it out...
I added a class in the css called "openSaysMe" which styles the elements to appear.
#cssmenu .openSaysMe {
left: auto;
top: 34px;
opacity: 1;
}
Then I added the class when the items are being sorted, took the class away once the sorting was complete.
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable",
sort: function( event, ui ) {
$('#cssmenu ul ul').addClass('openSaysMe');
},
beforeStop: function( event, ui ) {
$('#cssmenu ul ul').removeClass('openSaysMe');
}
}).disableSelection();
Here's a fiddle: http://jsfiddle.net/9j5wyoLn/2/
I am getting a little confused by this.
Currently have a table, with two columns.
On the left we have a description, and on the right a fact.
The left hand side is usually one line, but might wrap over onto two.
The right hand side is often 3, 4 or more lines.
How can I arrange this using CSS instead of tables.
Obviously the two sides have to line up for each row of information.
desc1 fact 1
desc2 fact 2
more to fact 2
desc3 fact 3
etc.
Like this?
HTML
<ul class="sublist">
<li>Item 1</li>
<li>Description 1</li>
</ul>
<ul class="sublist">
<li>Item 2</li>
<li>Description 2 / Description 2 / Description 2 / Description 2</li>
</ul>
<ul class="sublist">
<li>Item 3</li>
<li>Description 3</li>
</ul>
CSS
ul.sublist > li {
display: inline-block;
max-width: 150px;
vertical-align: top;
}
Demo
I have some nested <ul>s and I want them to be the same height: the height of the tallest one. I cannot specify the height of any <ul> since it depends on the amount of <li>s in it.
I figure I could solve this pretty easy using some js, but I am curious if this could be fixed using CSS.
I created a simple fiddle to demo: http://jsfiddle.net/vnFLK/2/
<nav>
<ul>
<li>Li 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Li 2
<ul class="green">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
</nav>
The <ul> with green borders is supposed to determine the height of the root <ul> and then I want the sibling <ul> to get the same height. The green <ul> is pushed 200% to the right just to be clearer.
This is a simplified representation of a navigation where a <ul> is a submenu that is going to be pulled over the parent one. Therefore they need to be the same height to prevent the parent menu being shown.
/Erik
Absolutely-positioned elements are no longer part of the document flow - they act as a new context. Therefore the parent element has no idea what size the child element is and cannot adjust its own size to match it.
There is no CSS solution for this. You need to use JavaScript.
I have the following code:
<ul id="myList">
<li class="li1">Example 1</li>
<li class="li2">Example 2</li>
<li class="li3">Example 3</li>
<li class="li4">Example 4</li>
</ul>
Is there any way i can transform the list to:
<ul class="myList">
<li class="li1"><div class="container">Example 1</div></li>
<li class="li2"><div class="container">Example 2</div></li>
<li class="li3"><div class="container">Example 3</div></li>
<li class="li4"><div class="container">xample 4</div></li>
</ul>
using css only.
without using javascript
CSS cannot add elements, that really isn't its purpose.
That being said, you can achieve a similar effect by making the items display: block, like this:
#myList > li { display: block; }
No. CSS is designed to instruct the browser on how elements look and are positioned. It isn't capable of editing the live HTML.