- Posts: 89
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Map Search Input Box Size and Marker Size and
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
4 years 17 hours ago - 4 years 17 hours ago #197968
by KhemrajC
Map Search Input Box Size and Marker Size and was created by KhemrajC
Hi,
For Openstreetmap, the Map Search Input Box shrinks on a mobile screen, please see attachment. I tried by setting different values for the Text Inbox Width and Text Inbox Size and it is not responsive.
I also need to have the default Map Marker to display twice as big. This will better allow its dragging on a mobile screen.
How do I fix the above with CSS ?
Any idea please ?
Thank you very much.
Best regards
For Openstreetmap, the Map Search Input Box shrinks on a mobile screen, please see attachment. I tried by setting different values for the Text Inbox Width and Text Inbox Size and it is not responsive.
I also need to have the default Map Marker to display twice as big. This will better allow its dragging on a mobile screen.
How do I fix the above with CSS ?
Any idea please ?
Thank you very much.
Best regards
Attachments:
Last edit: 4 years 17 hours ago by KhemrajC.
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
4 years 11 hours ago #197981
by Joffm
If you investigate the page with a web development tool you see that the css class is ".leaflet-marker-icon"
So you may use a media-query to set it to your desired height and width.
Like (XXX = your desired values)
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Map Search Input Box Size and Marker Size and
Hm, you would like to have it bigger?I also need to have the default Map Marker to display twice as big.
If you investigate the page with a web development tool you see that the css class is ".leaflet-marker-icon"
So you may use a media-query to set it to your desired height and width.
Like (XXX = your desired values)
Code:
@media (max-width: XXXpx) { .leaflet-marker-icon { width:XXXpx !important; height:XXXpx !important; } }
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 9 hours ago #197987
by KhemrajC
Replied by KhemrajC on topic Map Search Input Box Size and Marker Size and
Hi,
Thanks for prompt help for the Marker Size.
I tried this in the source of the map text area:
<style type="text/css">
@media (max-width: 50px) {
.leaflet-marker-icon {
width:50px !important;
height:82px !important;
}
}
</style>
The actual size is not doubling!
Where should the CSS be put?
Thanks and regards
Thanks for prompt help for the Marker Size.
I tried this in the source of the map text area:
<style type="text/css">
@media (max-width: 50px) {
.leaflet-marker-icon {
width:50px !important;
height:82px !important;
}
}
</style>
The actual size is not doubling!
Where should the CSS be put?
Thanks and regards
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
4 years 1 hour ago #197990
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Map Search Input Box Size and Marker Size and
Hi,
your media query is at the right place.
If there is no typo in your post, it seems to work as expected.
So you have to revise it. There is something strange in your settings.
www.w3schools.com/cssref/css3_pr_mediaquery.asp
Joffm
your media query is at the right place.
If there is no typo in your post, it seems to work as expected.
So you have to revise it. There is something strange in your settings.
www.w3schools.com/cssref/css3_pr_mediaquery.asp
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #198070
by KhemrajC
Replied by KhemrajC on topic Map Search Input Box Size and Marker Size and
Hi,
I changed the max width to 500px and it works!!!
I will now attempt to adjust Map Search Box using the Media Query.
Learning a lot from here, thank you very much.
Best regards
I changed the max width to 500px and it works!!!
I will now attempt to adjust Map Search Box using the Media Query.
Learning a lot from here, thank you very much.
Best regards
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13648
- Thank you received: 2491
3 years 11 months ago #198073
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Map Search Input Box Size and Marker Size and
Else if you have this issue in 3.22 or 4.2 : you can report it …
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
3 years 11 months ago #198079
by Joffm
Therefore I didn't tell you directly your small error. It's always "learning by doing".
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Map Search Input Box Size and Marker Size and
Learning a lot from here, thank you very much.
Therefore I didn't tell you directly your small error. It's always "learning by doing".
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
3 years 11 months ago - 3 years 11 months ago #198093
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Map Search Input Box Size and Marker Size and
To fix the layout of the inputs on smaller screens, something like this in your custom.css file:
Code:
<style type="text/css"> @media only screen and (max-width: 480px) { .map-item { padding-top: 0; } .map-item .geoname_search .input-group > * { display: block; width: 100%; } .map-item .geoname_search .input-group-addon:first-child { display: none; } .map-item .geoname_search .input-group-addon:last-child { float: none; padding: 9px 12px 3px 12px; border: 1px solid #CCCCCC; border-radius: 4px; white-space: normal; padding: 9px 12px 3px 12px; } .map-item .geoname_search .input-group input[type="text"] { display: block; float: none; border-radius: 4px; } .map-item .coordinate-item { display: block; margin: 0 0 5px 0; } } </style>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 3 years 11 months ago by tpartner.
The following user(s) said Thank You: DenisChenu, KhemrajC
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #198133
by KhemrajC
Replied by KhemrajC on topic Map Search Input Box Size and Marker Size and
Hi,
TPartner did it again!!!
All fix for small screen.
Thanks and regards
TPartner did it again!!!
All fix for small screen.
Thanks and regards
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #198134
by KhemrajC
Replied by KhemrajC on topic Map Search Input Box Size and Marker Size and
Hi,
That is the spirit.
Thanks and regards
That is the spirit.
Thanks and regards
The topic has been locked.