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>
Related
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 3 years ago.
I would like to apply styling to list items in ordered list (specifically to the ::after or ::before), based on the classes of the <li>. The code for these lists looks like the following:
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
The lists are generated automatically, and the position of the first class2 item may vary inside the list (it can even be absent in some case, leaving only class1 items in the list).
I would like to add something in the ::before of the first item of each class (like a specific header for each type of item in my list). Ending up with something like this:
Example of expected result
Anyone could help me with the CSS selector to use for this? I tried several things with + or ~ but nothing works seems for now...
Thanks!
David
There is no :first-of-class selector available, but you can use the general sibling combinator to remove the pseudo element for all elements with the same class, that are following the first one:
.class1::before { content:"some header for class 1"; display:block; }
.class2::before { content:"some header for class 2"; display:block; }
.class1 ~ .class1::before, .class2 ~ .class2::before { content: none; }
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
You can use a section tag to define a header for your list.
<section>
<h3>Reference Document</h3>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
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'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.
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.