9 years ago
Topic

Hello,

I seriously need urgent assistance on centering list & search type form elements (Title, inputbox, and buttons) as seen here attached.

When I created this, everything aligned to the left. How can i align the elements to the center? As seen below is how I wanted the elements aligned;-

I have tried all I could include playing with the template positioning and CSS, but no success.


Kindly assist in guiding me to center those three elements and also to support mobile responsiveness.

.
Hope to hear from you soon.
Thanks in advance for your time.

Get a Book for SEBLOD
9 years ago
4
Level 1

Hello yusuf.

Do you have this example online? To answer this we need to know your html code.

But maybe you can do this adding a wrapper to those buttons and style with certain width and margin:auto.

9 years ago
3
Level 2

Sure Rafael,

Is online at: http://bintasms.0fees.net/sep1/index.php

Thanks for your time in advance.

154 Posts
WebOne
9 years ago
0
Level 3

try this :

div.cck_forms.cck_search div.cck_form {width: 87%;}

9 years ago
1
Level 3

Hi Yusuf i take a look and follow this steps:

1 - Access through ftp/cpanel and edit this archive - sep1/media/cck/css/cck.search.css.

2 - You will need to remove the float:left style inside this css selector: div.cck_forms.cck_search div.cck_form or near the line 84. After do this, your buttons will be center align.

3 - Inside your css archive, create this above rule:

#art_title_backend {
width: 98%;
}

This will change the width of your search input, keeping all the elements align.

9 years ago
0
Level 4

Hi,

Thanks Rafael!

Note: topic not related to SEBLOD itself but about CSS.

9 years ago
0
Level 1

Thanks @all for your contributions, it is now fixed.

Thanks for your time.

9 years ago
0
Level 1

Hi,

Thanks for the previous help. 

Am back with another little requests! Still on the same issue but responsively (on mobile) this time.

My form doesn’t align properly to center on mobile device? Your help will be appreciated.

I don’t want to create a new post for this as is more of CSS not seblod itself as noted by @Bes above.

Finally, I did like to have a text/icon appendfed at the end of the input box as seen below?

Thanks in advance.

Get a VIP membership