I'm working on a Polymer app. I keep running into oddities. At this time, I'm trying to put a paper item in my app. At runtime, these elements appear to add an HTML element that looks like this:
<div id="contentIcon" class="content-icon style-scope paper-icon-item">
</div>
For some reason, this element is always 56px in width. In the Chrome Developer tools, I can see width:56px. If I set it to width:0px in the Chrome Dev tools, the UI looks how I want. In an attempt to do this, I added the following to my CSS:
.content-icon.paper-icon-item {
width:0px !important;
}
However, the 56px width still remains. I do not understand why at I have to do to remove this 56px width.
Thanks,
Why are you using a class attribute for defining a web component?
That syntax seems quite weird.
Can you please provide with more specific description regarding this issue as it doesn't seems clear.
AFAIK, the correct syntax for including a paper-item component in your code should be:
<paper-item>
<paper-item-body two-line>
<div>Show your status</div>
<div secondary>Your status is visible to everyone</div>
</paper-item-body>
<iron-icon icon="warning"></iron-icon>
</paper-item>
Related
I'm using CSS Grids to achieve this layout and just for reference, the desired behavior is that when users scroll down the page all the text remain fixed while the rest of the content slides over, something like this. I've managed to achieve this by creating a Home.svelte component and adding a .grid class to the <main>. This is what my CSS looks like:
.grid {
height: 100vh;
display: grid;
gap: 0px;
grid-template-columns: 9% 18% 27% 46%;
grid-template-rows: 9% 24% 22% 45%;
}
But as you can see there is going to be a Thoughts link that behaves like a <nav> element on the top and possibly another pages as well and the problem I'm having is: for every new Svelte component that works as a route (I'm using svelte-spa-router) I need to add the same <main class="gird"> and that CSS code snippet. And this makes adding the page-specific content messy. I was hoping to be able to use all those elements as some kind of layout. Tried to add then to a Svelte component that I would then import but I was unable to do so because things wouldn't fit in the grid, it seems like they were following the normal flow.
I was wondering if it would be possible to somehow make this style global so I don't need to replicate it for every other page. I tried to apply these grid properties to body and html in my app.css (which is where all my CSS variables are attached to :root) file without success as the styles apparently aren't even applied to other pages. I even tried adding these stylings under something like :global(.grid) inside the app.css file but again, had the same outcome.
Any ideias or suggestions on how to handle this and avoid the code repetition? Where should these grid stylings live in a Svelte project? What are the best practices here? Thanks in advance!
In a regular CSS file that is linked in the page, you don't need :global.
In a component's <style> you do need it.
Check the styles that the page actually loads (e.g. via the network tab in the dev tools) and see if the rules actually exist and match what you expect.
I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.
Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.
Right now core-toolbar has an indent class that indents the title to the right by 60px, while material design dictates that the margin should actually be 80px (as a matter of fact the number 60 never shows throughout the documentation).
So I could easily go and edit it in bower_components/core-toolbar/core-toolbar.css but the problem is that, once I move the project somewhere else, I'd have to make the same edit once I've done my bower installs etc..
Mind you that if I was to extend core-toolbar say, I'd have a problem with core-header-panel etc.. because it would be looking for either <core-toolbar> or something with the class "core-header" which is a bit of an annoyance, but it's something I can live with.
What's the best way to do something like this?
One approach might be to globally override core-toolbar's style using something like http://jsbin.com/soveyo/12/edit Note that I've only got native shadow dom support there.
Or you could do that in a particular instance if you'd prefer & remove the html /deep/ bit.
Or you might add your own class to the element you're giving as content to the toolbar & give it the indentation you want.
You could also try creating your own toolbar element
A noscript polymer-element, with just you css style and a core-toolbar in it.
Something like :
<polymer-element name="my-toolbar" noscript>
<template>
<style>
core-toolbar { /* xxxx */ }
</style>
<core-toolbar><content></content></core-toolbar>
</template>
</polymer-element>
Or even better, you can extend the core-toolbar to keep all the attributes handling from the core-toolbar
I ran into an issue while using Worklight 5.0.5 for an Android mobile project today. This project does make use of Apache Cordova, Dojo Mobile, and Worklight libraries, if that helps.
The problem is that Worklight automatically generates unwanted inline CSS in some cases during build time. I cannot find which component of Worklight is responsible for this, nor can I find out how to alter or prevent this behavior when required. This may seem like a small problem, but the fact that it's inline CSS, and during build, means that I'm prevented from affecting it!
A search through the JavaScript and CSS, both those that I have built and those that are imported for Dojo, do not seem to show anything that would add the CSS.
Example:
I have the following tag in my HTML:
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="center segmentContainer">
After build, this shows in a WebKit-based browser (Google Chrome) as:
<ul bartype="segmentedControl" class="mblTabBarSegmentedControl mblTabBar center segmentContainer mblTabBarNoIcons"
data-dojo-type="dojox.mobile.TabBar" id="dojox_mobile_TabBar_0"
widgetid="dojox_mobile_TabBar_0" style="padding-left: 78px;">
The final inline CSS, the "padding-left", is what I'm trying to seek and destroy. Does anyone know what is responsible for this behavior, and how I can change or prevent it?
I don't know much about the technologies, but in case you cannot get rid of the CSS being inserted you can use !important in your own CSS. For example:
.segmentContainer {
padding-left: 0px !important;
}
This prioritizes the padding-left statement moving out of the normal prioritization order. Normally I bvelieve it goes inline, ids and then classes but with !important your class prioritizes.
Are you sure this Worklight's build process adding this style and not Dojo's parsing of the ? I would check Dojo mobile api to ensure it's not adding that by default. OOTB Dojo, for TabBar generates the following markup with inlined CSS.
<ul id="demoTabBar" dojotype="dojox.mobile.TabBar" single="true" iconbase="images/tabbar_all.png" fixed="bottom" role="tablist" class="mblTabBarTabBar mblTabBar mblFixedBottomBar mblTabBarNoText mblTabBarFill" widgetid="demoTabBar" style="bottom: 0px; padding: 0px;">
This is the default Dojo style. You override it writing this code in your AppName.html:
...
<style>
.segmentContainer {
//your personalization
}
</style>
</head>
<body>
......
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="segmentContainer">
The design of the page should look like this:
http://www.ski.kommune.no/Skoler/Finstad/
Another css-file is loaded in this page, bringing some unwanted attribute of the css-tags, which makes the design undesirable, e.g. the text in the blue field is moved.
http://www.ski.kommune.no/Skoler/Finstad/Praktisk-informasjon/Test-av-bildegalleri/
Which css-tags are creating the design problem in the above example? I looked with Firebug, but I couldn't find.
What is the best way to restore the design?
The problem comes from 5th item in your main horizontal menu.
The list item there has a class="calendar".
according to browser developer tools that class is:
.skole .calendar, .skole .news-list {
overflow: hidden;
margin-bottom: 20px;
}
the problem there is margin bottom.
to solve the problem:
the best way is to separate the 2 classes and remove the margin-bottom from the calendar class.
a word of advice:
try learn how to use different browsers developer tools.
in my view the bests are chrome and firebug.
have fun!