I am creating list-style component where the component itself doesn't know the children of its child elements.
Using the standard <ul> element as an example:
<ul>
<li><div>Part 1</div><div style="margin-left: 10px">[Part 2]</div></li>
<li><div>Part 1</div><div style="margin-left: 10px">[Part 2]</div></li>
<li><div>Part 1</div><div style="margin-left: 10px">[Part 2]</div></li>
</ul>
So I'd expect my list element to layout and style each <li>, as that is part of the API, but not the contents.
How does one achieve this with web components/lit-element?
Related
Is there a way to achieve the solution to following problem:
I have a carousel markup and it follows the same HTML structure as mentioned below.
<div>
// Contains the carousel slide
<div>
<ul>
<li><img src={....} /></li>
<li><img src={....} /></li>
<li><img src={....} /></li>
</ul>
</div>
// Container for arrows
<div class="carousel-arrows">
<button class="carousel-arrow"> < </button> // left arrow
<button class="carousel-arrow"> > </button> // right arrow
</div>
// Container for pagination
<ul class="carousel_pagination">
<li></li>
<li></li>
<li></li>
<ul>
</div>
Since the library, I'm using for the carousel follows this exact HTML structure I am unable to place the ul (pagination bullets) in between the left and right arrows.
I have tried using the position property as absolute to place the ul (pagination bullets) in between the arrows by setting a fixed width of carousel-arrows div, separating them with space-between and then placing ul in between them but I want the carousel-arrows width to be dynamic such that it can adjust based on increasing or decreasing number of bullets in ul.
When the bullets in pagination are less, then the width of the carousel-arrow should adjust itself accordingly and vice versa.
Is there a way to solve this using scss?
You can not do that with SCSS alone I'm afraid. position:absolute removes the element from the normal document flow, and no space is created for it in the page layout. As far as .carousel-arrows is concerned, .carousel_pagination does not exist from a layout perspective.
You would need to use JavaScript to solve your problem, basing the width of .carousel-arrows on the width of .carousel_pagination.
I have a webpage built in Angular 2. The routes in the navbar are being handled through Angular's router. I have a <main> area where all the child components appear through each respective route which acts as a flexbox container. However, I want each flex-child/router component to have a different flex arrangement.
The problem is that I can't determine the organization of the flex-child until each particular routerLink is active. However, I can't style the child element's flex-position in its own component styles; you have to do that through the flex-container, in this case <main>. For example, consider this nav:
<ul>
<li class="dropdown">
About
<ul class="dropdown-content">
<li routerLink="/members">Members</li>
<li routerLink="/history">History</li>
</ul>
</li>
<li routerLink="/media">Media</li>
<li routerLink="/merch">Merchandise</li>
<li routerLink="/aaru">AARU</li>
</ul>
<main>
This is where my ng-components go
<router-outlet></router-outlet>
</main>
This template is in my main component AppComponent. Let's say I want /members to be styled as { justify-content: center } but /merch to be { justify-content: flex-start }.
Is there a way in Angular I can specify the style/toggle css classes on <main> once I click the appropriate routerLink?
I have a jquery mobile listview, and I'd like to make one of the li items appear first in the list via css without moving the li item in the code. I don't want the li item to be in a fixed position (in other words, I do want it to scroll with the list). I just want it to appear as though it were the first li item.
Here is the code for the list (just 2 li items). So I'm wondering how I could style the second li to appear first.
<div data-role="page" data-theme="c">
<div data-role="content">
<ul data-role="listview" data-inset="false"><li>
<a href="http://domain.com/1XyK?id=1117448578">
<img src="https://domain.com/moreicon/EN/bundle-loseweight.png" />
<h2>Healthy Weight Loss</h2>
<p>Now includes Mindful Eating!</p>
<span class="ui-li-count">NEW</span>
</a>
</li>
<li>
<a href="http://domain.com?id=977040364">
<img src="https://domain.com/moreicon/EN/bundle-top10.png" />
<h2>Our Top 10 Apps!</h2>
<p>Save BIG on our chart toppers!</p>
<span class="ui-li-count">SAVE</span>
</a>
</li>
Is that possible?
One possibility, if your browser support allows for it, is Flexbox. This allows you to control the order of elements by using the order property on the child.
For example, if your HTML is:
<ul>
<li>First</li>
<li>Second</li>
</ul>
Then, you can style the UL as a columnar flexbox in CSS:
ul {
display: flex;
flex-direction: column;
}
And you can assign a negative order to the child you want to bring to the top:
ul li:nth-of-type(2) {
order: -1;
}
Working example: http://codepen.io/honzie/pen/oLxENz
Here is the html:
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</
<li class="newgroup">Rose Hill Rally</li>
There are <li> under this as well as four <li class-="newgroup">
Here is the assignment for the CSS Style Sheet:
"If the list item belongs to the newgroup class, add atop padding space of 25 px to add a bigger gab between that list item and the previous list item."
Ideas?
Sounds pretty obvious:
.newgroup {
padding-top: 25px;
}
Listview has a data-inset property to make its corners rounded. However, I can't use listview because my list is a nested list and the frameworks default behavior is hide the nested list and show it once the its primary list is clicked. So, I chose to use a ui-grid view inside the primary listview row which looks like below:
<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>
My problem is the ui-grid's corners should be rounded. I tried to put data-inset="true" but didn't work.
You can use the classes that jQuery Mobile adds to widgets, in this case you're looking for the ui-corner-all class which puts corners on all four corners, and then you will probably want the box-shadow that ui-shadow applies:
<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">
I added the padding because the grid element didn't have any by default. Also there are the ui-corner-top and ui-corner-bottom classes that only round the top/bottom of the element to which they are applied.
Here is a demo: http://jsfiddle.net/VXrxv/
If instead you want to round the li element that is the parent of the ui-grid element you can add margin to them:
<li class="ui-corner-all ui-shadow" style="margin: 5px;">
Here is a demo: http://jsfiddle.net/VXrxv/1/
Try with css property border-radius. For example, try border-radius: 0.5em 0.5em;
On the Bootstrap the rounding is effected;
This seems to be the quickest solution for me;
Wrap mist widgets with the following div
<div class="k-block" style="padding:0px">