OrdaSoft forum
Welcome, Guest
Please Login or Register.    Lost Password?
Center alignement of searchbar when resize window (0 viewing) 
VehicleManager component support
Go to bottom Favoured: 0
TOPIC: Center alignement of searchbar when resize window
#35582
installer19 (User)
Fresh Boarder
Posts: 10
graphgraph
User Offline Click here to see the profile of this user
Center alignement of searchbar when resize window 3 Weeks, 1 Day ago Karma: 0  
Hello everybody.

Please I need your support.
I created a searchbar with vehiclemanager searchbar.
I have a problem:
when I resize browser windows I wish that my searchbar is positioned as shown in the image, but I don't how could I do this.



I tried to modify the default.php code as follow:

<table>
<tr>
<td><input style="border-radius: 30px 0px 0px 30px; width:100%; margin: 0 auto; justify-content: center; " type="text" name="searchtext" size="300" maxlength="300" placeholder="<?php echo _VEHICLE_MANAGER_SEARCH_DESC1; ?>"/></td>
<td><input style="border-radius: 0px 0px 0px 0px; margin: 0 auto; justify-content: center;" type="text" id="vm_search_date_from_mod" name="search_date_from1" placeholder="<?php echo _VEHICLE_MANAGER_LABEL_AVAILABLE_FOR_RENT_FROM; ?>"></td>
<td><input style="border-radius: 0px 0px 0px 0px; margin: 0 auto; justify-content: center;" type="text" id="vm_search_date_until_mod" name="search_date_until1" placeholder="<?php echo _VEHICLE_MANAGER_LABEL_AVAILABLE_FOR_RENT_UNTIL; ?>"></td>
<td>
<input type="submit" value="<?php echo _VEHICLE_MANAGER_LABEL_SEARCH_BUTTON; ?>" class="button"></input>
</td>

But it doesn't work.
Could you help me [file] please? Thank you so much.
 
Logged Logged  
 
Last Edit: 2017/11/19 12:14 By installer19. Reason: modified the text and ripositioned the img
  The administrator has disabled public write access.
#35594
installer19 (User)
Fresh Boarder
Posts: 10
graphgraph
User Offline Click here to see the profile of this user
Re:Center alignement of searchbar when resize window 3 Weeks ago Karma: 0  
Hallo guys,
I post An update of my status.


I founded the instruction min-width and max-width that help me in a part of what a want to do, but I still have some difficulties to set a different searchbar's layout related to the size of active window.

My searchbar is composed by 4 elements:
1. an input box to find a vehicle
2. an input box to select the From date
3. an input box to select the To date
4. a GO button to start the search


and what I want to do is described below:

if (active windows' width is > min-width=400px) {
I want that all the 4 elements of searchbar are positioned on ONE single row (see tripadvisor searchbar)
}
elseif (active windows' width is < max-width=400px) {
I want that all the 4 elements of searchbar are positioned - one over each other - on ONE single row (see tripadvisor searchbar when you resize the active window)
}

I appreciate all of your help.

Thank you in advance.

Best regards
Michele
 
Logged Logged  
  The administrator has disabled public write access.
#35598
admin (Admin)
Admin
Posts: 5355
graph
User Offline Click here to see the profile of this user
Re:Center alignement of searchbar when resize window 2 Weeks, 6 Days ago Karma: 66  
Dear Michele

In your CSS file You need create class some like below

for 4 fields per row:

@media ( min-width: 401px) {
.the_4_fields_per_row {
width: 24% !important;
margin: 0px;
display: block;
float: left;
}
}

for 1 field per row:
@media (max-width: 400px ) {
.the_4_fields_per_column {
width: 100% !important;
margin: 0px;
display: block;
float: left;
}
}

and add both these class to your block

Regards
Andrew
OrdaSoft team
 
Logged Logged  
  The administrator has disabled public write access.
#35619
installer19 (User)
Fresh Boarder
Posts: 10
graphgraph
User Offline Click here to see the profile of this user
Re:Center alignement of searchbar when resize window 2 Weeks, 5 Days ago Karma: 0  
Hallo Andrew,

thank you for your answer.

Maybe I am doing something wrong because it doesn't work.

I am editing these two files:

(1) ..components -> com_vehiclemanager -> includes -> vehiclemanager.css
(2) ..modules -> mod_vehicle_manager_search_free -> tmpl-> default.php

In the doc (1) I add your instruction at the bottom of file.
In the doc (2) I add the two class (.the_4_fields_per_row and .the_4_fields_per_column) to the block in this way:
code at line 30 modified from:
<div class="vm_search_inline" style="height: 200px;">
to
<div class="vm_search_inline; .the_4_fields_per_row; .the_4_fields_per_column;" style="height: 200px;">

Of course....it doesn't work.
Am I modifyng the right files?
Am I adding the two classes to the right instruction?

Furthermore, my goal is to create my own override file (called "myfile.css" in the path (1) ) but if I import it with @import myfile.css in the file (2) it doesn't work.

Thank you for your support.
Best regards
Michele
 
Logged Logged  
 
Last Edit: 2017/11/22 11:24 By installer19.
  The administrator has disabled public write access.
#35635
admin (Admin)
Admin
Posts: 5355
graph
User Offline Click here to see the profile of this user
Re:Center alignement of searchbar when resize window 2 Weeks, 4 Days ago Karma: 66  
Hello

We at forum may give only advice for code change.

Your changes impossible do with help change one row

We may propose to you order this as "customization service".
Please write to OrdaSoft contact form (ordasoft.com/contact-us-form) with full details description.
How all must look and work. And we will give to you quota

If you would like any further information,
please do not hesitate to contact us.

Best Regards,
Andrew
OrdaSoft team
 
Logged Logged  
  The administrator has disabled public write access.
#35684
installer19 (User)
Fresh Boarder
Posts: 10
graphgraph
User Offline Click here to see the profile of this user
Re:Center alignement of searchbar when resize window 2 Weeks ago Karma: 0  
Thank you so much Andrew
 
Logged Logged  
  The administrator has disabled public write access.
Go to top
What are you looking for?
Anti-spam question: How many eyes has a typical person?