Susy gallery breaks height for display table and table-cell - height

I'm trying to get equal height columns on my responsive grid using the gallery mixin for SUSY. To do that, I set the container "display: table" and the column "display: table-cell". This works for me if I do not use the mixin, but fails as soon as I turn on the mixin. The mixin works if I have set the height in pixels, but not if I set the height using 100%;
I'm using:
susy (2.1.3) and
sass (~> 3.3)
This works with or without SUSY:
.ttable {
#include container;
padding: gutter();
#include clearfix;
.ttd {
#include gallery(3 of 12);
}
}
.ttable {
display: table;
height: 500px;
border: 1px solid #BF0D3E;;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 500px;
}
This doesn't work with SUSY, but works with the mixin turned off:
.ttable {
display: table;
height: 100%;
border: 1px solid $fuschia;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 100%;
}

The gallery mixin uses floats and margins to position elements, which won't work with table display. The first one works because the table styles are ignored, and the items are floated with a set height. If you want to use table styles to get equal-heights, you should leave out the gallery mixin, and use individual mixins/functions to set width/gutters instead (I think only inside and inside-static gutters will work with table display).
.ttd {
#include gutters;
display: table-cell;
background-color: #eee;
width: span(3 of 12);
}

Related

Place (?) tooltip next to field-name Django

In my_model I have field1 and field2.
In my form I would like to have a (?) tool-tip next to the label of field2 such that I can display some tooltips for it when users hover over the (?). I have found something which works in a html-file but I don't really know how to load the labels from the html file to the label
class MyModelForm(forms.ModelForm):
class Meta:
model = my_model
fields = ["field1","field2"]
labels = {"field2":load_html("my_hmtl_file.html")
Is there a better way to add this (?) tool-tip to a field(s)?
You can put html tags in the help_text, and then use css to render a tooltip. For example,
fieldName = forms.CharField(help_text="<span class=\"tooltip\">?<span class=\"tooltiptext\">tool_tip_text_to_be_displayed</span></span>")
And then use css like this w3s example:
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

C++ Resize QScrollBar up-arrow

auto bar = ui->verticalScrollBar();
bar->setStyleSheet("QScrollBar:vertical { width: 20px; }"
"QScrollBar::up-arrow:vertical, QScrollbar::down-arrow:vertical { width: 15px; height: 15px; }");
I cannot resize the arrows. scrollbar
Already checked stylesheet example here http://doc.qt.io/qt-5.6/stylesheet-examples.html
Any idea would be appreciated.
Try to use min-width, max-width (the same value), min-height, max-height (the same value) instead of width and height.

SharePoint Online cannot expand web part zone width

I have a blog subsite on a SharePoint Online (2013) site that by default has 3 web part zones: BlogNavigator, Left and Right (ordered from left to right).
The layout of the zones is frustrating, because the Left zone, which houses the actual content for the site, is relatively narrow considering the amount of available space to the right of the Right zone.
When I move all the Web Parts from the Right zone into BlogNavigator, the Left zone maintains its size, even though there is room to expand rightward.
I have tried manually declaring the Left zone ContainerWidth on the page file in SP Designer, I have tried applying a CSS file to the page to set the width, but nothing seems to work.
I have even removed all references to the Right zone on the page file, removing it completely, but the Left zone still remains its original width.
Is there some way I can alter this zone?
The out-of-the-box SharePoint page layouts use a peculiar grid framework to layout the different webpart zones.
This framework, which is defined in the layout css, uses display: table and display: table-cell to position the zones in the horizontal layout.
Table layouts usually result in odd sizing issues similar to how you have described.
In a project that I have worked on recently, I needed to fix the table layout to be more rigid so that there were no sizing issues. The site I was working on was a Publishing site so I am not sure if the classes are the same on you blog but here is the CSS I used to tweak the grid framework.
#DeltaPlaceHolderMain .ms-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
width: auto; }
#DeltaPlaceHolderMain .ms-table > div[class*="tableCol"] {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box; }
#DeltaPlaceHolderMain .tableCol-75,
#DeltaPlaceHolderMain .tableCol-33,
#DeltaPlaceHolderMain .tableCol-25,
#DeltaPlaceHolderMain .tableCol-50 {
width: 100%;
display: block;
min-width: 0; }
#contentBox {
padding-left: 15px;
padding-right: 15px; }
#titleAreaRow {
display: table; }
#contentRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#sideNavBox {
margin-right: 5px; }
#contentBox {
min-width: 0;
margin: 0;
-webkit-box-flex: 1;
-ms-flex: 1 0;
flex: 1 0; }
#s4-titlerow,
#contentRow {
max-width: 1450px;
margin: 0 auto; }
#media screen and (min-width: 1020px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 66.666%; }
#DeltaPlaceHolderMain .tableCol-33 {
width: 33.333%;
}
#DeltaPlaceHolderMain .tableCol-25 {
width: 33.333%; }
#DeltaPlaceHolderMain .tableCol-50 {
width: 50%; } }
#media screen and (min-width: 1340px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 75%; }
#DeltaPlaceHolderMain .tableCol-25 {
width: 25%; } }
* {
outline: none; }
html {
-webkit-text-size-adjust: 100%; }
/* Sidenav */
#sideNavBox {
min-width: 180px;
max-width: 300px;
width: auto; }

CSS Background image not showing with height auto

I have a div with a background image in it. I have to specify a height in px for it to show. But I want it to show with height auto as the width resizes. I am stuck.
When I have height auto it just does not show the image at all...
#slider-shadow1 {
z-index: 9999;
margin: 0 auto;
width: 100%;
height: auto;
background: url(images/layouts/shadow2.png) center no-repeat;
background-size: 100% 100%;
position:relative;
display: inline-block;
background-size:cover;
overflow: hidden;
}
Height: auto means the height of element is exactly the same as elements content. If you have empty element, its height is zero. And you can't see background image (you see exactly 0px of them).

How to center-align svg-based Google Charts (since they have position: absolute)

Does anybody please have an idea how to center-align the new (i.e. svg-based) Google Charts?
When I inspect the chart elements at my web page (please scroll down to the jQuery Tabs with several Google Charts at that page), I see that the chart itself is given an absolute position:
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; ">
<svg width="800" height="500" style="overflow: hidden; ">
I'm not sure why Google does it, but it breaks my layout (other than that the charts work well for me):
My CSS-code:
h1,h2,h3,p,div,form {
text-align: center;
}
And I've also tried adding there:
margin-left: auto;
margin-right: auto;
My JavaScript-code:
var money_data;
var money_chart;
var money_options = {
width: 800,
height: 500,
legend: {position: 'top'},
areaOpacity: 1.0,
vAxis: {format: '# $'},
hAxis: {title: 'Номер недели', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 39, max: 52}},
colors: ['CCFFCC', '66CC66', 'FF9999'],
animation: {duration: 1000, easing: 'out'}
};
function initMoney() {
$.ajax({
url: '/money-json.php',
data: { id: 'OK408547485023' },
dataType: 'json'
}).done(function(jsonData) {
money_data = new google.visualization.DataTable(jsonData);
money_chart = new google.visualization.SteppedAreaChart(document.getElementById('money_chart'));
google.visualization.events.addListener(money_chart, 'ready', function() {
$('#money_slider').slider('enable');
});
drawMoney();
});
}
function drawMoney() {
money_chart.draw(money_data, money_options);
}
If no CSS-based solution possible here, could I maybe use JavaScript to move the SVG to the same x-position as the money_slider while enabling the latter (please see the above code)?
You could set the size of money_chart DIV to the size of the graph ( I am guessing 800px ) and use auto margins like this.
#money_chart{
margin-left: auto;
margin-right: auto;
width: 800px;
}
You will need to make the chart side another div here is my code and it works for me
.chart_outside{
position:relative;
display: inline;
border: 2px solid #FFF;
width: 500px;
height: 460px;
background: #000;
margin: 5px 5px 5px 5px;
}
.chart_inside{
position:absolute;
right:0px
;top:0px;
}