Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 19, 2015 at 1:35 am #446139
    radugidei

    Hi,
    I’m trying to resize the search box using CSS but i’ve hit a bug. The changes display fine, but only after scrolling the page (even a few pixels). Right after clicking the search icon in the main menu, you get this :
    before scroll
    And after scrolling, even a little bit, it displays as intended :
    after scroll

    here’s the code I added to custom.css :

    .inner_tooltip {
	position: fixed;
	width:100%;
	left:0px;
	top:150px;
	padding: 50px;
	background-color: white;
	z-index: 99999;	
}
#top #searchsubmit, .ajax_load{
	width: 100px;
	height: 100%;
}
#top #s {
	width: 100%;
	font-size: 50px;
}
#top #searchform div {
	max-width: 100%;
}
    May 19, 2015 at 5:44 pm #446602
    Elliott

    Hi radugidei!

    What happens when you remove all of your custom CSS?

    Send us a link to your page and we’ll take a look. Also let us know what operating system and browser your using.

    Best regards,
    Elliott

    May 19, 2015 at 5:56 pm #446607
    radugidei

    Hi Elliott,
    when i remove all of the CSS, things go back to normal : press the search icon, the little search box pops up, all works fine.

    Was testing on OS X Yosemite, latest Safari.

    May 19, 2015 at 5:57 pm #446608
    radugidei
    This reply has been marked as private.
    May 21, 2015 at 3:27 am #447518
    Ismael

    Hey!

    I would like to check the page but it redirects me to the maintenance mode page even though I logged in to the site. http://dev.lee-evans.co.uk/

    Regards,
    Ismael

    May 21, 2015 at 12:41 pm #447698
    radugidei

    HI @Ismael, your creds have now been elevated, give it a try !
    thanks !

    May 22, 2015 at 5:43 am #448159
    Ismael

    Hi!

    Try to replace the code with this:

    .avia-search-tooltip.avia-tt {
	position: fixed !important;
	min-width:900px !important;
	max-width: 900px !important;
	left:10% !important;
	top:30% !important;
	background-color: white;
	z-index: 99999;	
	margin: 0 !important;
}

.avia-search-tooltip.avia-tt {
	width: 100%;
	max-width: 1310px;
}

#top #searchsubmit, .ajax_load {
	width: 100px;
	height: 100%;
}
#top #s {
	width: 100%;
	font-size: 50px;
}
#top #searchform div {
	max-width: 100%;
}

    Best regards,
    Ismael

    May 25, 2015 at 2:59 pm #449530
    radugidei

    Thanks Ismael, that worked but not quite aligned as I needed, so I tweaked your code a little.
    This now works :

    .avia-search-tooltip.avia-tt {
	position: fixed !important;
	min-width:900px !important;
	top:18% !important;
	left:0% !important;
	background-color: white;
	z-index: 99999;	
	margin: 0 !important;
}

.avia-search-tooltip.avia-tt {
	width: 100%;
}

#top #searchsubmit, .ajax_load {
	width: 100px;
	height: 100%;
}
#top #s {
	width: 100%;
	font-size: 50px;
}
#top #searchform div {
	max-width: 100%;
}
    May 25, 2015 at 4:12 pm #449578
    Rikard

    Hi!

    Great, glad you got it fixed :)

    Regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.