Hello so if some variable exists (token within) I want to change 2 divs order - turn them other way around, from controller.
I found way to do this with ng-repeat directive but I don't really want to use ng-repeat in this case because I already have many ng-repeats in this two divs and I think it may cause some problems, maybe even longer loading.
Is there any other way to change divs order from controller? Maybe I can just add some classes to elements whenever variable exists or not, if I remember good I can change elements order with flexbox help.
Could you guys show me path how to accomplish this task? I would be grateful
if you provide some little demo.
Nobody answered my question which I already have found solution for. Someone in comment section said that I should use ng-repeat because it's good solution but I could not really figure out how to use it and keep tone of html content inside those 2 divs. I don't want to bind all of it from controller, do I?
So what I did instead is wrap this 2 divs inside another div with display: flex and then used ng-class directive on this 2 divs inside new container to dynamically add classes with this rules:
1st div
.flex-container--child_1 {
order:2;
}
2nd div
.flex-container--child_2 {
order:1;
}
The ng-class add this two classes to divs whenever some variable exist like I wanted.
<div ng-class="{'flex-container--child_1': authentication.isAuth}">...</div>
I wrote this post if somebody ever came across same problem and find this question on SO.
Related
I'm going to simplify my problem a bit, because I really want to avoid adding a lot of code, because this is a gigantic project we are working on if I started adding code snippets, there would be a lot of it.
My project has one feature, where you have a list of different div elements in the left column of the page, and they can be individually dragged to the right column, where you can make your own list out of these elements in the order you choose.
These div elements are all the same child component. My task is to add a dropdown to these div elements, but only to the ones that have been dragged to the right column (you can choose additional preferences, once it's in the right column). It shouldn't be there on the divs in the left column.
The only way to differentiate between them is by the class name. The ones on the left have a class="left" and the ones on the right get the class="right".
Now I'm wondering if there's a way where I can write some code to the effect: if the element has the class 'left', hide the dropdown, else show the dropdown?
Yes, this is definitely possible.
Create a Directive that has a #HostBinding() for a specific class and just add the directive to every component.
Inject ChildComponent into the constructor of that Directive. You can also inject ViewContainerRef and then call this.viewContainerRef["_data"].componentView.component This will give you reference to that child element that the directive is put on.
Once the #HostBinding('.left') event handler is triggered this will be the function that gets called when the class you're looking for is added. Here you can then access that ChildComponent and then presumably call a method on that child component to show/hide the mat-select
I haven't actually tested this but thats the approach I would take.
You might also achieve this thru your css. Something like
div[class*="left"] dropdown-element {
display: none;
~or~
visibility: hidden;
}
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
Can any one help this..
I want to adjust the two adjacent cell height using div tag without using the display:table-cell. Please reply as soon as possible..
I don't believe you can do what you're trying to do using simply CSS.
I'd recommend using a jQuery Equal Heights plugin like this one:
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
You simply load jQuery and the plugin onto your page then use it like so:
$('.myCLASSorIDorWHATEVER').equalHeightColumns();
Hope that helps.
a quick introduction :
facebook has changed the LIKE (count) button
into something like :
LIKE (count)
[ -------------------- clic = open a Big zone bottom / right --------------------]
problem :
Its nice BUT ....
you forgot that a lot of website are using the like button in "toolbars". Page example
Header
Left column Tooblbar, include fb:like -------------------- Right column
Document content
Footer
and lot of structured pages/ blocs are using "overflow:hidden" !! So it makes the displayed widget randomly truncated everywhere (right, bottom...) depending of its environnement.
Its impossible to remove all the overflow:hidden from the containers blocks, to satisfy a widget update.
What can we do. Some sites where clean, now they look drafts, with all button opening truncated stuff...
any solution ?
If you want to use the Facebook plugin, the only solution seems to be to change the HTML/CSS so overflow:hidden can be removed. Alternatively, you could try to use a service that forwards the user actions to social networks for you and offers different methods of website integration.
If you're not using overflow: hidden for semantic reasons, you could always change it to overflow: visible or just remove it. I'm assuming that the fix isn't that simple...
A quickfix that wouldn't require you to modify your CSS would be to place your FB Like button outside of any containing elements that have overflow: hidden or overflow: auto and use absolute positioning to get it where you want it.
I think I'm pretty good at using semantic markup on my pages but I still have a handful of classes like this:
/**** Aligns ****/
.right_align { text-align: right; }
.left_align { text-align: left; }
.center_align { text-align: center; }
Which, technically, is a no-no. But when you just want to position some text in a table, how crazy am I supposed to get with the semantic markup?
Why do you want to align the text?
The answer to the question is the name of the id or class you need to have for your selector. Do you want to align it right because it's a price?
table .price {
text-align: right
}
Just ask yourself why do you want to apply a particular style, and all will become clear.
I probably overdid it, but my last work project was pretty close 100% semantic- anything I needed which was not semantic (say, a filler div which I could not do without for a layout requirement), I added dynamically using jQuery.
If you want tight coupling between the table cells and the alignment, you could just assign the attribute style="text-align:right" directly on the tag. There is no reason to go the extra level of indirection through a class if you dont use it for a level of abstraction anyway.
I try to consider why I want a column right aligned in a table. For example, if the column contains currency amounts then I would use a style named currency instead of right_align.
Semantic markup is an admirable goal, but in the real world, you sometimes have to make compromises. In some cases, the only sensible way to do something is to break semantics and just throw in a right_align.
Edit: People seem to be misunderstanding my point in this. You should use semantic markup where possible. However, there are cases where it really is just a stylistic choice and there is nothing inherent to the data that you can use to describe or classify it. This is most typically true with large sections of tabular data, especially if it is dynamically generated.
I've had cases where clients want to be able to dynamically control what columns appear in data grid. There's no way to know ahead of time what type of data they're going to choose to show. If they want a way to center or right align a dynamically generated column, it's better to have center and right align classes available for them to use than to have them sticking style attributes everywhere.
100% semantic markup is a silly goal. Your graphic designer will say, "Let's right align this", and the reason will be "because it looks good that way". What are you supposed to do, add a class of "looksgoodthatway" to the div? Just right align it and get on with your life! :)
From experience, for usability reasons you should keep tokens on as many lines as possible.
I use the following notation
matcher,¶
matcher¶
{¶
··attribute:·property;¶
}¶
Why you ask? This solves many problems with collisions, as it reduces the number of places 2 unrelated changes can occur in 2 different places at once ( which causes the collision ), and when the collision does occur, its much easier to see what caused it and chose the correct solution.
This is because SCM's DIFF is row oriented, and if you have all your content on 1 row, you get 2 choices, hose one complete set, or hose the other.
Also, that particular style I find, if adhered to, makes it easy to write lint checking code that detects errors in your CSS.
For insance, spot the typos:
matcher
matcher,
{
attribute property
attribute
}
In this case, code that simply checks for whitespace and delimiter conformance also detects coding mistakes!.