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

More

6 years 4 months ago - 6 years 4 months 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

SearchBox.PNG

Last edit: 6 years 4 months ago by KhemrajC.

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

6 years 4 months ago #197981 by Joffm

Replied by Joffm on topic Map Search Input Box Size and Marker Size and

I also need to have the default Map Marker to display twice as big.

Hm, you would like to have it bigger?

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

More

6 years 4 months 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

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

6 years 4 months ago #197990 by Joffm

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

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

More

6 years 4 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

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

6 years 4 months ago #198073 by DenisChenu

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 support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

6 years 4 months ago #198079 by Joffm

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

More

6 years 4 months ago - 6 years 4 months ago #198093 by tpartner

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>