Jump to content


Photo
- - - - -

Bootstrap Form Styling


  • Please log in to reply
11 replies to this topic

#1 wondergrove

wondergrove

    Newbie

  • Members
  • 4 posts

Posted 10 July 2012 - 04:27 AM

I am trying to style a form based on the Bootstrap framework. Some of the CSS tags are working with Pageline 2.2 but many of them are not working correctly. I am using the code snippets from Bootstrap to test the styling so it should technically work if everything is working properly. Can you give me any direction on why this would not work with the framework? What do I need to do to get it to work properly? I would really like to have my forms match what I am seeing on Bootstrap.

#2 batman

batman

    Bat Learning

  • Members

  • 1987 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 10 July 2012 - 09:41 AM

You can see in:

Please Login or Register to see this Hidden Content

There are many information

#3 wondergrove

wondergrove

    Newbie

  • Members
  • 4 posts

Posted 10 July 2012 - 11:59 AM

batman... thank you but I am actually using the code snippets from the Bootstrap site you have given me. The problem is that even following their info, it doesn't work correctly with my Pagelines 2.2. Any other options?

#4 batman

batman

    Bat Learning

  • Members

  • 1987 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 10 July 2012 - 12:07 PM

Your Pagelines Framework is 2.2.2 ? Can you give an example ? ;)

#5 evert100

evert100

    Super Member

  • Members
  • 156 posts
  • Framework Version:2.3.8.
  • Country: Country Flag

Posted 10 July 2012 - 12:16 PM

I think the problem is that pagelines only implemented part of the bootstrap. That's my experience so far. It would be nice to have better documentation on that. Also the wiki is outdated.

#6 Stefan

Stefan

    Business Manager

  • Administrators
  • 156 posts
  • LocationTransylvania
  • Framework Version:trunk
  • Country: Country Flag

Posted 10 July 2012 - 02:09 PM

The wiki docs are not ready yet for this part, but they will be very soon! We're working hard on this. Btw can you give us an example so we know where you're going? Most of the Bootstrap integrations are exemplified in the tools tour here:

Please Login or Register to see this Hidden Content



#7 wondergrove

wondergrove

    Newbie

  • Members
  • 4 posts

Posted 10 July 2012 - 06:32 PM

Thank you for all of your feedback. Here is an example of how the Bootstrap code is rendering on the latest version of PageLines (for me at least). For testing purposes, all of my code has been taken directly off of the Bootstrap site. As you can see from the link (and example image), the form elements are not laying out correctly.

Please Login or Register to see this Hidden Content



Posted Image

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 July 2012 - 03:10 AM

Thanks for the screenshot. Do you have any CSS for the "Text input" form?

#9 wondergrove

wondergrove

    Newbie

  • Members
  • 4 posts

Posted 18 July 2012 - 03:32 AM

Catrina... The CSS I have is from Bootstrap. It is my understanding that since Pagelines is built on the Bootstrap CSS framework, I should theoretically be able to us the examples from the Bootstrap documentation (as shown above and on my sample page

Please Login or Register to see this Hidden Content

) and it should work.

Any thoughts why it I might be having trouble?

#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15042 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 July 2012 - 09:42 AM

Hi Wondergrove, PageLines isn't built on Twitter Bootstrap, we simply implemented it into our Framework to give you guys better functionality. Regarding the form issue, I am not entirely sure if this was included with our implementation of Bootstrap, as there are as many form plugins out there. I will find this out for you and reply here when I have more information.

#11 revoltoid

revoltoid

    Advanced Member

  • Members

  • 99 posts
  • Country: Country Flag

Posted 29 July 2012 - 01:34 AM

Hello,

I am experiencing similar issues. For example I tried to include a form that worked well on a website, but looks exactly like on the attached photo above. The form works but the styling doesn't.

My question is, are only features that are listed

Please Login or Register to see this Hidden Content

implemented, or are these only the ones that already have Pagelines short codes, but otherwise all the rest should work with Bootstrap codes?

Thanks,

Istvan

#12 revoltoid

revoltoid

    Advanced Member

  • Members

  • 99 posts
  • Country: Country Flag

Posted 29 July 2012 - 01:52 AM

Ah, ok, I wrapped the codes in RAW and they work now. This is what you can do too @wondergrove , wrap the whole bootstrap code that doesn't work like this: [pl_raw] the whole Bootstrap code goes here [/pl_raw] This likely solves your styling issue.