I have a navbar element. It has a navbar-dropdown element. I want to add a navbar-item with a sentence to it, but word transposition in navbar-item doesn't work.
How can I turn it back on? Here's the code for the navbar-dropdown element.
<div class="is-primary navbar-dropdown is-size-4 dropdown-width">
<div class="navbar-item">
Чтобы воспользоваться функционалом системы, пожалуйста, авторизируйтесь.
</div>
<div class="navbar-item">
<a
class="button is-light"
:class="{ 'is-hidden':$store.state.isAuth }"
#click="openModal"
>
Войти
</a>
</div>
</div>
The "dropdown-width" class sets a fixed width for the element.
Related
I'm trying to capture all the anchor clicks.
In GTM, my trigger is:
All Elements / Some Clicks / Click Element / Matches CSS Selector / #most-popular-posts > a
I've tried #most-popular-posts > * > a as well with no luck. Any ideas on why this isn't working?
My HTML is as follows:
<div id="most-popular-posts">
<h4>Most Popular</h4>
<div class="post-loop">
<ul>
<li>
<a class="latest_thumbnail_wrapper" href="http://thelink.com">
<div class="latest_thumbnail">
<img src="https://theimage.jpg" class="attachment-loop-thumbnail size-loop-thumbnail wp-post-image" alt="">
</div>
</a>
<div class="latest_list_wrapper">
<h5 class="cat-label">The Category</h5>
<h3>
Article Title
</h3>
<div class="byline">
<span>by</span> <a class="author" href="">First Last Name</a></div>
</div>
</li>
<li>
</ul>
</div>
</div>
Remove the > from the selector. That will look for any <a> tag inside of the #most-popular-posts element instead of looking for an <a> directly nested inside of that element.
See this Mozilla article for more details: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
How do you get elements in ion-footer-bar to line up directly below each other rather than stack up next to each other?
For example, this:
Is produced by the code below:
<ion-footer-bar>
<div>
sdsd
</div>
<div class="button-bar">
<a class="button button-positive">First</a>
<a class="button button-positive">Second</a>
</div>
</ion-footer-bar>
In the example above, I'd like each element to be placed directly under each other, as opposed to next to each other.
The solution is to create another footer as you can see in this tuto : https://www.tutorialspoint.com/ionic/ionic_js_footer.htm
In your exemple, the solution would be :
<ion-footer-bar class="bar-subfooter>
<div>
sdsd
</div>
</ion-footer-bar>
<ion-footer-bar class="bar-subfooter>
<div class="button-bar">
<a class="button button-positive">First</a>
</div>
</ion-footer-bar>
<ion-footer-bar>
<div class="button-bar">
<a class="button button-positive">Second</a>
</div>
</ion-footer-bar>
I have two scenarios with similar problems. I'm attempting to add a font awesome icon:
Inline with a text input and 'add on' button, yet superscript (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (JSFiddle2)
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
Here's how I'd like each to look:
I don't know if this is important, but as a side note:
In the first scenario, the icon has a popover
In the second scenario, the icon has a dropdown
I don't think these have any effect on the layout, so I left out the related code.
For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:
JS Fiddle
For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:
.dropdown {
display:inline-block;
float:right
}
For your first issue: JS Fiddle
For your second issue as Raed N. said before just add a float:right to your dropdown:
.dropdown { float:right; }
I want to center the title and navigation links in my paper-toolbar. I am using the properties "justify" and "bottomJustify" to accomplish this, but the content remains on the left side.
<paper-toolbar class="medium-tall" justify="center" bottomJustify="center">
<div class="title">Titel</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
It does not matter which "tallness" I choose. It never works. Does anyone has an idea how to solve this?
Update:
This code works:
<paper-toolbar class="medium-tall" justify="center" bottom-justify="center">
<div class="top">
Title
</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
I had to:
change the bottomJustify to bottom-justify
remove the "title" class and instead use the "top" class
In your code you should use bottom-justify instead of bottomJustify to set the attribute!