I've started using Foundation and have a qiestion about best using the framework.
I can see the $input-border in my settings.scss file. I want to remove the left and right borders only. I'm trying $input-border-left however I see from the docs thats not supported.
So i know how to do this otherwise in CSS - e.g. i have a custom file and set border-left: 0px !important. However when trying this it doesnt work:
.input {
border-left: 0px !important;
}
However could someone explain how this is done. Do i need to use mixins?
Thanks.
Related
I'm on day three of learning web development and I'm struggling with getting things where I want them. I want my little logo (slothw.png) to lign up better with my nav links. I want it to line up in the exact same way that the logo of a website lines up with the name you give it on the bookmark bar in Chrome. I hope that makes sense and thanks for the help.enter image description here
That’s a job for css :).
You case use the flex display mode and them set the align-items property to center.
.myClassWithCenteredChildren { display: flex; align-items: center; }
I see where the cke-maximize css class is added to the editor whenever the maximize button is clicked. However, I can't seem to find where to add my custom .cke-maximize class. I want to either change the z-index or add a padding-top:50px; to .cke-maximize
I've tried adding it to
env/lib/python2.7/site-packages/ckeditor/static/ckeditor/ckeditor/skins/moono/editor.css
&
env/lib/python2.7/site-packages/djangocms_text_ckeditor/static/ckeditor/ckeditor/skins/moono/editor.css
I've tried putting it in django_admin_style. I've even tried putting it in <style> tags on the main template itself. Nothing seems to work.
Can someone point me in the right direction to fix the toolbar overlap?
Assuming you're talking about the admin part of django-cms, it should be possible to add this to templates/admin/inc/extrastyle.html (in your project)
<style>
.cke_maximized {
top: 47px !important;
// or z-index: 10000 !important;
// whichever you would prefer
}
</style>
this would override the values that are set by CKEditor javascript until it's fixed in djangocms-admin-style
I've been trying to copy my QTreeView style/behavior to my QListWidget. Everything works fine except when trying to apply that style: paint-alternating-row-colors-for-empty-area which, in a way, make sense because that tag should only be supported by QTreeView.
Do you guys know a good way to re-implement that behavior?
Maybe I can tweak my QAbstractItemView? Or try to go with a QListView + Custom model?
Please find enclosed what it's look like on my QTreeView:
And here is my current QListWidget:
And here is the Style Sheet I used on both:
QListWidget,
QTreeView
{
border: 0px;
color: white;
paint-alternating-row-colors-for-empty-area: 1;
background-color: #292929;
alternate-background-color: #2C2C2C;
}
Edit:
So, I know that I can replace my QListWidget by another QTreeView, but the thing is, would I be able to get custom item like that using a QTreeView?
This appears to be a SharePoint 2013 bug.
One of the exciting features of SharePoint 2013 is the Callout. When you have a list of documents, and you want to learn more about the document without having to open it, you can click the three dots Callout button to get a popup that shows pertinent information about the document.
The problem is this information is being cut off when you apply a fixed height to the webparts properties and the height is not enough to accommodate the popup.
It appears to be due to the webpart being converted to an iFrame when a specific height is applied to it. I have been unable to find a CSS fix for this.
You can view an image of the issue here: http://www.pixelwonders.com/fixed-height-webpart.jpg
Anyone know how to fix this?
Thank you in advance for your help!
I had a very similar issue. I have a Google Map web part with fixed height and width in a two column layout, with a list on the right. The filter drop down menu would cut off just like what your image shows.
I was able to correct it by adding a script editor to modify the CSS with overflow: visible !important on both columns. In your image it looks like you have one web part above another, I would think the same rules would apply.
<style>
#WebPartWPQ3{
overflow: visible !important;
}
#WebPartWPQ2{
overflow: visible !important;
}
</style>
right now the content of dropdowns is by default to the bottom right.
Is there an option to set it so it goes to the bottom left?
(foundation 5)
The "right" style is being applied through JS. To override this just give #contentDrop a style of #contentDrop{left: -100px !important;} or whatever value you would like to pull left. You will need to adjust the .f-dropdown:after{left:XXpx !important;} and .f-dropdown:before{left:XXpx !important;} stylings to bring the little triangle to the right of the dropdown box.
This is a hack because Zurb-Foundation is still working on a solution to this problem. There is an github issue related to this. I found a Hack here that helped me solve it.
Using this information here is how to get the alignment correct. Add a class bottom-align-left to the content dropdown div:
Search
<div id="drop2" data-dropdown-content class="f-dropdown bottom-align-left">
Then add this to your CSS or SCSS file. You will have to play with the number to get it right.
.bottom-align-left {
margin-left: -375px;
}
Now the triangle shows up in the wrong place. To fix this remove the triangle.
Open _settings.scss.
Find $f-dropdown-triangle-size and set it to 0px i.e.
$f-dropdown-triangle-size: 0px;