0

I'm developing a component for the front end (Joomla 3.x version).

I have used Bootstrap 3 for all the component views. I know Joomla is using bootstrap 2, so I unset the bootstrap 2 css & js files in my componentname.php and added the bootstrap 3 CSS and Javascript files.

The text box is not showing correctly (height of the text box is very low) and the form fields are 100% width.

How can I solve the text box problem and reduce the width of form controls ?

Thanks in advance.

componentname.php

$script = JURI::Root(true).'/media/jui/js/bootstrap.min.js';
unset ($script);

$css = JURI::Root(true).'/media/jui/css/bootstrap.min.css';
unset ($css);

views/viewname/default.php

<div class="form-group">
<label  for="parent_id" class=" hasTooltip required">Add Group</label>
    <select name="parent_id" class="inputbox" id="parent_id"  size="1">
    <option value="1">yes</option>
    <option value="0">No</option>
    </select>
</div>

<div class="form-group">
    <label  for="firstname" class=" hasTooltip required" title="">Enter First name</label>
    <input class="form-control" type="text" name="firstname" id="firstname"   /> 
  </div>
  <div class="form-group">
    <label  for="lastname" class=" hasTooltip required" title="">Enter First name</label>
    <input class="form-control" type="text" name="lastname" id="lastname"   /> 
  </div>
 <div class="form-group">
    <label  for="sub_fmt" class=" hasTooltip required" title="">Enter Long Text</label>
    <textarea name='sub_fmt' id='sub_fmt' rows='3' class="form-control" cols='40'></textarea> 
  </div>

enter image description here

Improve this question
4
  • In my experience, unsetting bootstrap will create more headache than solution, especially when you're still willing to use the Joomla frontend content editing.
    – webchun
    Sep 3, 2015 at 2:08
  • Can you please suggest a way to implement bootstrap 3 ? Because I need to use bootstrap 3 only.
    – ram
    Sep 3, 2015 at 7:00
  • Form fields have a width of 100% by default, see this: getbootstrap.com/css/#forms
    – fruppel
    Sep 3, 2015 at 9:08
  • @ram is there any specific bootsrap 3 feature you'd like to implement in your component?
    – webchun
    Sep 5, 2015 at 5:33

1 Answer 1

Reset to default
1

There are advanced techniques implemented by template developers to support BS3. For example, loading first their own rendering classes to replace core rendering classes. Unsetting BS2 is not an option.

In my opinion, this can be implemented in a template, but it is overkill for a component (not in charge of the general style).

T3 framework is a nice example about how it can be done: http://www.t3-framework.org/downloads.html

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.