How to make Vue2-leaflet map have 100% height of its parent container?
When I set its style to style="height: 100%" it is overwriting whole page on first interaction with the map and tile layer isn't showed at all.
Use calc(100% - 100px) for #map-wrapper because #some-div has a height of 100px in your example.
Then the scrollbar disappears.
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: calc(100% - 100px);
margin: 0;
}
Fiddle: https://jsfiddle.net/yLe9n1uk/
Or use a flexbox for the parent div (#app):
#app {
display: flex;
flex-direction: column;
}
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: 100%;
margin: 0;
}
Fiddle: https://jsfiddle.net/xo5z8r7q/
Here's my code: css:
I keep on receiving an error message. It shows
"missing a property name before colon(:)in the "(property)":"(value)"declaration"
I'm not sure what I'm doing wrong could any one help me with this?
body {.thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } }
Try to remove the brackets:
.thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }
Then apply the class "thumb" on relevant elements.
I am trying to set width for Webgrid column. But it is not working.
Anyone help me please.
Please find below my code
#grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
alternatingRowStyle: "webgrid-alternating-row",
mode: WebGridPagerModes.All,
columns:grid.Columns(
grid.Column(columnName:"ID", header: "ID",canSort:true, style: "id"),
grid.Column(columnName:"Name", header: "Name",canSort:true,style: "name")
)
And my css file
.webgrid-table { border: 1px solid #98BF21; }
.webgrid-header { background-color: #A7C942; color: #FFFFFF; text-align: left;}
.webgrid-alternating-row { background-color: #EAF2D3; }
.id { width: 20px; }
.name { width: 40px; }
Anyone help me please?
You need to specify the width of the WebGrid itself in order to solve this issue.
Add this
.webgrid-table { *width*: *specify the width value here* ;border: 1px solid #98BF21;}
I'm working with this ComponentView example:
Kitten ComponentView
In my variation, I'd like to highlight the selected row when the user taps on it, as would happen in an xtype: 'list'. How can I accomplish this?
You can achieve this by using an tpl property and then set the class of the css inside the <div> tag
Something like this,
....
xtype: 'list',
tpl: '<div class="clickedItem"> ...'
....
and then write your css code as,
.clickedItem{
background: // some color value;
text-shadow: // some color value;
}
After examining the Sencha Kiva example in their examples directory,
it looks like it's a combination of the .x-dataview-UI_NAME class with .x-list-item, where UI_NAME is defined is the dataview view config. In the Kiva example, it's the line 'ui: loans'.
So, the CSS section looks something like this:
.x-dataview-loans .x-list-item {
...
}
Defining the UI suffix in the view:
Ext.define('Kiva.view.LoansList', {
extend: 'Ext.DataView',
xtype : 'loanslist',
requires: [
'Kiva.view.LoansListItem'
],
config: {
ui : 'loans',
store: 'Loans',
useComponents: true,
defaultType: 'loanslistitem',
deselectOnContainerClick: false
},
onItemTap: function(container, target, index, e) {
var me = this;
me.callParent(arguments); // WARNING: without this call, the row will not become selected
}
The relevant code in application.css
.x-dataview-loans .x-img {
margin-right: 1em;
background-position: center center;
width: 60px;
height: 60px
}
.x-dataview-loans .x-list-item {
padding: 1em;
border-bottom: 1px solid #e1e1e1;
-webkit-transition: linear .2s background
}
.x-dataview-loans .x-list-item .name div {
font-weight: bold
}
.x-dataview-loans .x-item-selected {
background: #fff
}
.x-dataview-loans .completion {
display: -webkit-box;
display: box;
-webkit-box-align: center;
box-align: center
}
.x-dataview-loans .completion .x-innerhtml {
display: -webkit-box;
display: box;
-webkit-box-align: stretch;
box-align: stretch;
height: 1em;
width: 100%;
border: 1px solid #bbb;
-webkit-box-shadow: inset 0 0 1px #fff;
padding: 1px;
-webkit-border-radius: 1em;
border-radius: 1em;
background-color: #e2e2e2;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c9c9c9), color-stop(10%, #d5d5d5), color-stop(65%, #e2e2e2), color-stop(100%, #e3e3e3));
background-image: -webkit-linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3);
background-image: linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3)
}
.x-dataview-loans .completion .x-innerhtml .bar {
min-width: 1em;
border: 1px solid #4b9123;
-webkit-border-radius: 1em;
border-radius: 1em;
background-color: #74b446;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6e1b2), color-stop(2%, #87c05e), color-stop(100%, #639a3c));
background-image: -webkit-linear-gradient(#c6e1b2, #87c05e 2%, #639a3c);
background-image: linear-gradient(#c6e1b2, #87c05e 2%, #639a3c)
}
I have 2 inline divs inside a parent div:
.parent {
width: 200px;
height: 200px;
}
.div1 {
float: left;
width: 10px;
height: 10px;
background-color: blue;
}
.div2 {
position: relative;
height: 100%;
width: 100%;
right: 0px;
float: left;
background-color: red;
}
The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.
Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/
How can I make div2 have a width of 190px without setting a static width?
You could do it this way:
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:90%;
float:left;
background-color:red;
}
You could also do it without floating the right div (this is the way I would prefer):
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:100%;
margin-left:10px;
background-color:red;
}
in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/