I am finally upgrading the yadcf version on my site from 0.6.9 to 0.8.8 and am seeing some change in behavior I'm not sure how to control. (I'm also upgrading from datatables 1.9.4 to 1.10.10)
See the 0.6.9 version at my production site and the 0.8.8 version at my sandbox site
The difference I see is when inspect (chrome) around the Gender external filter, in 0.6.9 the <div id="yadcf-filter-wrapper-_rrwebapp_filtergender" class="yadcf-filter-wrapper"> and in 0.8.8 <div id="yadcf-filter-wrapper-_rrwebapp_filtergender">, i.e., the div is not given .yadcf-filter-wrapper.
In any case, can someone advise how to get the production / 0.6.9 behavior of having all these on a single line?
Update 1: The sandbox page is simplified here. Note this is equivalent to the production page.
The since its your external container that you placing the yadcf filters at, the proper solution should be for you to set your containers with a display: inline-block; css rule and thats it.
You can add a class to your _rrwebapp_filtergender and _rrwebapp_filterdivision and set a rule for that class display: inline-block;
Relying on your internal style should come before relying on third party css styling.
Related
Example of the HTML of a dropdown element:
<div aria-owns="ember-basic-dropdown-content-ember1234" tabindex="0" data-ebd-id="ember1234-trigger" role="button" id="ember1235" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-view"> <!---->
<span class="ember-power-select-status-icon"></span>
</div>
The xpath and CSS selector also contain the same ember id.
xpath : //*[#id="ember1235"]
css selector : #ember1235
The ember id would change from id="ember1235" to say, id="ember1265" when there is a change in the UI.
I am using id to locate the element. But every time it changes I need to modify the code. Is there any other attribute I could use for Ember JS UI elements?
There is quite a lot to discuss in your question but hopefully we will have a good answer for you #PriyaK
The first thing to mention is that Ember IDs may not be the best method to select an element in the DOM. As you have already mentioned, they can change from time to time and also it doesn't really give you a great semantic thing to select in your selenium test so it might seem a bit out of context when looking back.
One thing that you could try is to either pass a class to the ember-power-select component (the one that provides the HTML that you used in your example) and use that to select the element, something like:
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
Then you should be able to select the selected value by using the CSS selector .my-fancy-class span (because the component outputs the selected value in a span)
We just tried this in an example app but it didn't actually work 🤔 Never fear, you can also do something like this and it should work with the same selector as before:
<div class="my-fancy-class">
<PowerSelect as |name|>
{{name}}
</PowerSelect>
</div>
This is fine, but there are also a few issues using classes for selectors in tests. One example of a problem that might crop up is that your tests might all suddenly stop working if you did a style refactor and changed or removed some of the classes on your elements. One technique that has become popular in the Ember community is to use data-test- attributes on your DOM nodes like this:
<div data-test-my-fancy-select>
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
</div>
which can then be accessed by the following selector: [data-test-my-fancy-select] span. This is great for a few reasons! Firstly it separates the implementation of your application and tests from your styling and avoids the issue I described above. The second benefit of this method is that using what #Gokul suggested in the comments, the ember-test-selectors package, you can make use of these data-test- selectors in your development and test environments but they will be automatically removed from your production build. This is great to keep your DOM clean in production but also, depending on the size of your application, could save you a reasonable amount of size in your templates on aggregate.
I know you say that you are using selenium for your testing but it's also worth mentioning that if you're using the built-in Ember testing system you will be able to make use of some testing helpers that addons may provide you. ember-power-select is one of those addons that provides specific testing helpers and you can read more about it in their documentation: https://ember-power-select.com/docs/test-helpers
I hope this answers any questions you had!
This question was answered as part of "May I Ask a Question" Season 3 Episode 1. If you would like to see us discuss this answer in full you can check out the video here: https://www.youtube.com/watch?v=1DAJXUucnQU
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
For a project where Vue is dropped in, is using style or similar available to components?
Vue.component('vue-sup', {
template: '<div>Sup</div>',
style: '* { color: blue; }'
})
I tried adding the styles inside the template like:
<div>
<style>
.here{}
</style>
<div>Sup</div>
</div>
which didn't work because the template parser detected a tag with side effects
Vue's implementation of scoped css is entirely a feature of vue-loader, and thus only works with compilation. Scoped css momentarily made a debut into Html 5 but saw almost no adoption and was dropped entirely as far as I know. There is the anticipation that "Shadow DOM" may be supported broadly and could be use to add scoped css, but adoption is not there yet either.
So at this point you can add unique classes or ids obviously to a parent container and scope your css that way, but is understandably not what you are asking for nor is it always practical.
The best alternative is a pollyfill. There are several that are available. Here is one by Sam Thorogood and another by Thomas Park but if you do a quick search you will likely discover more.
I came across the same problem and I'm able to insert styling inside Vue template
by creating a component that will dynamically insert a <style> tag on the DOM. This might be impractical like #skribe said but it allows me to have separate CSS from JS without using .vue extension.
You can take a look at this
Is Bigcommerce performing some sort of minification to the main theme.css stylesheet being generated in production? I'm seeing a strange issue where certain styles that work correctly in development do appear in production.
Here's an example. In my development store, you can see the new customer sign-up box here:
As you can see on the right, I'm showing the styles that are being applied to the ul element, which ensures there is a left margin of 1.25rem.
Now, after bundling the theme with stencil bundle and uploading it to my development store, this is what I see:
As you can see, the ul element no longer has it's margin-left applied. On the right, you can see that the styles being applied are not the same as they were in production. Specifically, the margin-left: 1.25rem rule is being overriden by the margin: 0 rule.
It's as if some process was run to combine style declarations for certain elements, but this caused the order of the rules to change. Does anyone know what is happening here? Or what process is being used to attempt to minify this css? Maybe it's a bug with the library doing the minification.
UPDATE
Here's another example of the issue that I just came across. I have a style declared to show a magnify glass when the user hovers over the main image to indicate that they can zoom. The style is defined as follows:
.zoomImg {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
As you can see, in development, this style appears correctly for .zoomImg:
However, in production the style is incorrect. The chrome prefixed declaration is missing:
Where did it go? I'm confused why the styles are being changed. Again, I'm assuming it's part of some minification process. Any ideas?
how can i change width of container in bootstrap3. I want content in center of browser (70% of browser's width).
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p>
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p><p>
Positive Energy By Nature <br>
Sun is always there for us
</p>
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p>
</div>
Please check my code
You surround your p tags in a
<div class="container">
Then in your css file declare something like:
.container {
max-width: 70%;
}
I hope that this will help you :)
But instead of 70% it is better to declare max-width precisely...like max-width: 1100px;
You can create a new style. Name it styl.css. Afterwards, search bootstrap3 folder. You will find bootstrap.min.css. Type Ctrl+F and search for "container" class. Modify it.
for example,
.container{
width:70;
}
I hope that will help you.