Page 1 of 2
style box height
Posted: Tuesday 04 June 2019 20:04
by pvklink
Hi,
i have a device with the content of a weatheralarm. Lot of text i below the box. Is there a way the change the height of the box or to autoadjust or scrool the box?
Re: style box height
Posted: Tuesday 04 June 2019 20:19
by felix63
I use the Machinon theme which has scrolling included. Works a treat!
Re: style box height
Posted: Tuesday 04 June 2019 20:46
by pvklink
ok, i am gonna try it! how do i install/use that?
Re: style box height
Posted: Tuesday 04 June 2019 21:01
by felix63
Hi, you can follow the instructions on the
wiki or on
github. It does require that you run domoticz on a Raspberry I think
.It's a very nice theme. Added some icons and tweaked the colours a little..
Re: style box height
Posted: Tuesday 04 June 2019 21:08
by pvklink
OK,
1. does this effect my current installatio?
2. When i want the old config, simple change the theme ?
3. the doc on github/wiki only mentions domoticz not dashticz, is this gonna work on dashticz?
Re: style box height
Posted: Tuesday 04 June 2019 21:34
by Lokonli
pvklink wrote: Tuesday 04 June 2019 21:08
OK,
1. does this effect my current installatio?
2. When i want the old config, simple change the theme ?
3. the doc on github/wiki only mentions domoticz not dashticz, is this gonna work on dashticz?
3) No
You want to show the value of a Domoticz text device in a bigger Dashticz block?
Re: style box height
Posted: Tuesday 04 June 2019 21:37
by HansieNL
With Dashticz you can have different configurations. Just place your config files in the folder custom_2 and load index2.html.
Re: style box height
Posted: Tuesday 04 June 2019 21:54
by pvklink
@lokonli : yes
Re: style box height
Posted: Tuesday 04 June 2019 22:08
by felix63
Sorry. I was quick in answering and not reading properly so I missed the Dashticz bit. Machinon is a theme for Domoticz and has nothing to do with Dashticz. So sorry for wasting your time.
Re: style box height
Posted: Tuesday 04 June 2019 22:52
by pvklink
ok, no problem!
Re: style box height
Posted: Wednesday 05 June 2019 7:51
by pvklink
I see that the 'log' does has a slider. Is it possible to use this for a switch with text like the weather(alarm)
Re: style box height
Posted: Thursday 06 June 2019 4:02
by Lokonli
pvklink wrote: Tuesday 04 June 2019 21:54
@lokonli : yes
If the domoticz text id is 124 then to change the block height add the following to custom.css:
Code: Select all
.block_124 {
height: 500px !important;
}
If you want to add a scroll bar:
Code: Select all
.block_124 {
height: 200px !important;
}
.block_124 .col-data {
height: 100%;
overflow-y: auto;
}
Re: style box height
Posted: Thursday 06 June 2019 17:05
by pvklink
thanks!
Re: style box height
Posted: Thursday 06 June 2019 19:08
by pvklink
Works perfect! Thank you lokonli!
Does this also works for default buildin blocks like buttons.webcam and calenders.fam?
i tried to change height in calender.fam, that did nothing...
calendars.fam = { maxitems: 6, title: 'Familie kalender', url:'
https://calendar.google.com/calendar/em ... x',icalurl: 'xxx.ics' }
buttons.webcam1 = {width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'xxx', url: 'xxx'}
Re: style box height
Posted: Thursday 06 June 2019 21:08
by Lokonli
pvklink wrote: Thursday 06 June 2019 19:08
Works perfect! Thank you lokonli!
Does this also works for default buildin blocks like buttons.webcam and calenders.fam?
i tried to change height in calender.fam, that did nothing...
calendars.fam = { maxitems: 6, title: 'Familie kalender', url:'
https://calendar.google.com/calendar/em ... x',icalurl: 'xxx.ics' }
buttons.webcam1 = {width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'xxx', url: 'xxx'}
To be able to select the calendar you have to add a key-parameter, for instance:
Code: Select all
calendars.fam = { key:'mycal', maxitems: 6, title: 'Familie kalender', url:'https://calendar.google.com/calendar/embed?height=2000&wkst=1&bgcolor=%23666666&src=xxxx',icalurl: 'xxx.ics' }
Then in custom.css add the following:
Code: Select all
div[data-id='calendars.mycal'] {
height: 100px;
}
div[data-id='calendars.mycal'] .items {
height: 100%;
overflow-y: auto;
}
For a button you have to add the key parameter as well:
buttons.webcam1 = {key:'cam', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'xxx', url: 'xxx'}
and in custom.css:
Code: Select all
div[data-id='buttons.cam'] {
height: 100px;
overflow-y: auto;
}
Re: style box height
Posted: Thursday 06 June 2019 21:51
by pvklink
Both did not work.. put them on the bottom of my css
also tried !important after 400px did not work either..
div[data-id='calendars.fam'] {height: 400px;}
div[data-id='calendars.fam'] .items {height: 100%;overflow-y: auto;}
div[data-id='buttons.webcam1'] {height: 400px;overflow-y: auto;}
div[data-id='buttons.webcam2'] {height: 400px;overflow-y: auto;}
Re: style box height
Posted: Thursday 06 June 2019 22:49
by Lokonli
Did you add key: 'fam', key:'webcam1' and key 'webcam2' to your button and calendar definitions?
Re: style box height
Posted: Friday 07 June 2019 17:18
by pvklink
oeps..
now i understand how it works..
going to add it after work...
Re: style box height
Posted: Friday 07 June 2019 20:29
by pvklink
mmm.. still not working,,
css
div[data-id='calendars.divfam'] {height: 150px;}
div[data-id='calendars.divfam'] .items {height: 100%;overflow-y: auto;}
js
calendars.fam = { key:'divfam',maxitems: 6, title: 'Familie kalender', url: 'x',icalurl: 'x' }
The bottons do work!
buttons.webcam1 = {key:'divcam1', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}
buttons.webcam2 = {key:'divcam2', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}
div[data-id='buttons.divcam1'] {height: 300px;overflow-y: auto;}
div[data-id='buttons.divcam2'] {height: 300px;overflow-y: auto;}
Re: style box height
Posted: Friday 07 June 2019 20:52
by Lokonli
pvklink wrote: Friday 07 June 2019 20:29
mmm.. still not working,,
css
div[data-id='calendars.divfam'] {height: 150px;}
div[data-id='calendars.divfam'] .items {height: 100%;overflow-y: auto;}
js
calendars.fam = { key:'divfam',maxitems: 6, title: 'Familie kalender', url: 'x',icalurl: 'x' }
The bottons do work!
buttons.webcam1 = {key:'divcam1', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}
buttons.webcam2 = {key:'divcam2', width:6, isimage:true, forcerefresh:false, refreshimage: 5000, refreshurl: 5000, image: 'x', url: 'x'}
div[data-id='buttons.divcam1'] {height: 300px;overflow-y: auto;}
div[data-id='buttons.divcam2'] {height: 300px;overflow-y: auto;}
The buttons are working, but sizing of the calendar doesn't work. Correct?
Do you see the calendar? It's displayed as normal?
If you right-click on your calendar and then on 'inspect' a window should open.
Can you make a screenshot of the element starting with:
<div data-id="calendars.....
and the few lines underneath.