I'm new to Joomla programming. I have built a plugin, and it works well. I have just one little annoyance that has been driving me crazy all day. When you go into the back-end to configure the plugin the options are offset by a 180px left margin. I found it was because the options are wrapped in a div with a style="control-group" that has this margin applied.
To better understand the problem the following is condensed version of the output:
<div class="control-group">
<div class="control-label">
<label id="jform_params_group_template_mapping-lbl" for="jform_params_group_template_mapping" class="hasTooltip" title="" data-original-title=""></label>
</div>
<div class="controls">
//This is where my generated code is
<div class="control-group">
<div class="control-label">
<label>Uncategorised</label>
</div>
<div class="controls" style="float:right;margin-right:20%;">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label>Blog</label>
</div>
<div class="controls" style="float:right;margin-right:20%;">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label>TestingTemplate</label>
</div>
<div class="controls" style="float:right;margin-right:20%;">
</div>
</div>
</div>
</div>
As you can see, my controls are all inside a control. I Can't seem to find where the parent Div with the class control-group is coming from. I would prefer my generated content to be there own controls and and not sub div's.
Please let me know what part of the code you will need to look at to help me determine this issue. I feel its a part of the manifest XML, but am to new to Joomla to know.
the config portion of the manifest file is:
<config>
<fields name="params">
<fieldset name="basic">
<field type="fta.mapping" name="group_template_mapping" addfieldpath="/plugins/system/assigntemplatebycategory/fields" description="PLG_SYSTEM_TEMPLATE_ASSIGNER_GROUP_TEMPLATE_MAPPING_DESC" label="PLG_SYSTEM_TEMPLATE_ASSIGNER_GROUP_TEMPLATE_MAPPING_LABEL" default=""/>
</fieldset>
</fields>
</config>
The structure of the configuration file is correct. But quite unusual since the addfieldpath is usually defined in the fields level, not the individual field i.e.
<config>
<fields addfieldpath="/administrator/components/com_littlehelper/elements/" name="params">
I'm not sure if this can be an issue.
Most likely the problem lies with the custom field. To test, simply change the field type to text and see if the non-required indent appears. If so, the custom field output as defined in /plugins/system/assigntemplatebycategory/fields/fta.mapping.php should contain an extra wrapper.
Also try to move the addfieldpath attribute to the fields (and remove it from the field).
Related
I'm learning Angular. I've created a datepicker from the scratch (*why from the scratch is a different story). As you can see I've two date-picker custom component in the same widget. The code is same for both. I just copied and pasted in the same HTML file.
Here is my monthpicker.component.html
Note: dls is our own library of basic html components like textfields etc. Please Ignore that.
....
<div class="dropdown">
<span>
<dls-textbox id="upper">
<input dlsInput [ngModel]="text" placeholder="...">
</dls-textbox>
</span>
<div class="my-table-div dropdown-content">
<div class="year-div">
<input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
</div>
<br>
<div *ngFor="..." class="my-table">
<span *ngFor="...">
<span class="month-name" (click)="onClick(x);">
{{ x.monthName }}
</span>
</span>
</div>
</div>
<!-- A TOGGLE SWITCH GOES HERE-->
<!-- THEN SAME DATE PICKER CODE I COPIED BELOW-->
<div class="dropdown">
...
</div>
But the problem is, dates selected in one calendar is reflected in the later one also.
I tried separating them by changing id and class also. But still both of them are responding together. I want them to act independently.
Please correct me.
It happens because you are binding two inputs to the same variable with the [ngModel], due to which a change in one gets reflected in the other.
Try changing the ngModel value.
<div class="year-div">
<input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
</div>
If you enter the same value for both ngModels it will reflect the other one as well. You need to use different values for each ng-model.
Make sure you should clear the dates which you selected with another one. Make "ID" should be different in each compoenent.
I have discovered what appears to be a very odd behaviour in Safari and I cannot figure out what is going on.
My layout as viewed in Chrome:
But when viewed in Safari I get the following:
For some bizarre reason the <small class="text-muted">(required)</small> portion of my HTML has been dropped to a new line.
Even more bizarrely, if I just change one letter in the word 'City', the layout becomes correct.
The same portion of my form but I have literally changed one thing and that is that I've changed the word 'City' to instead say 'Sity':
In fact, I seem to be able to use any word instead of 'City', but when I use the word 'City', the label suddenly takes up 2 lines. So, in light of this, there is an easy fix which is to just use the word 'Town' instead of the word 'City' but I would still like to know if this is just a really strange bug or if I'm missing something.
What on earth is going on here?
I was unable to recreate this issue in stack overflow's code snippet tool.
I am using Bootstrap 4 and the portion of HTML that I'm looking at is as follows:
<div class="form-row">
<div class="form-group needs-validation col-sm-6 col-md-6">
<label for="inputCity">City <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputCity" name="city" required>
<div class="invalid-feedback">
Please provide your city.
</div>
</div>
<div class="form-group needs-validation col-sm-6 col-md-4">
<label for="inputState">State <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputState" name="state" required
autocomplete="address-level1">
<div class="invalid-feedback">
Please provide your state.
</div>
</div>
<div class="form-group needs-validation col-5 col-sm-4 col-md-2">
<label for="inputZip">Zip <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputZip" name="zip" required>
<div class="invalid-feedback">
Please provide your zip code.
</div>
</div>
</div>
EDIT Responding to Comments
#Rdg Replacing the space with does indeed fix the layout. But why does this only occur when followed by the word 'City' and nothing else (granted I haven't tested every word in the English language, so could it be something to do with the exact width of the word 'City'?)
#Geuis Yes I have finally managed to recreate this in codepen, it seems to be an issue with the font I am using ("Raleway") and the exact width of the word "City". https://codepen.io/Redtama/pen/RdRpqX
#Richard Uie I'm not sure what you mean by substitute the HTML entity for uppercase "c," i.e., C, but with regards to the wrapping being caused by width, I can replace the word 'City' with something much longer and no wrapping takes place.
Example with Longer Label Text
I would recommend adding the following to your css forcing the text to become an inline element:
.text-muted {
display: inline-block;
}
I'm VERY new to boot strap. So I figured I would setup a small "form" to see if I could get it to flow and I did an absolute horrible job. I am trying to get things to group into 2's and no more than 5 text boxes per row even in the largest of settings. When I try to set it properly I get TONS of space between the left and right columns.
I tried setting the header but this wrapped strangely and when I tried doing text boxes I got TONS of space between the two columns
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
. I ended up getting something kind of close using
<div class="row">
<div class="input-group text-center">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
But that doesn't seem like its the proper way to handle groups of text boxes and it certainly doesn't get me my grouping that I was looking for. I have set a mockup in jsfiddle from my ASP.net code and it can be found at https://jsfiddle.net/5ckoapng/9/
Any help would be greatly appreciated in understanding what i'm missing here. I'm sure its really stupid but I've spent about 2 hours researching different forms or formatting and couldn't figure this out.
Bootstrap is mobile first - if an element is going to span 12 columns on all resolutions then all you need is the single class:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
</div>
</div>
To show form elements in groups of 2, then you need to nest columns: http://getbootstrap.com/css/#grid-nesting
For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-xs-6">
#form input
</div>
<div class="col-xs-6">
#form input
</div>
</div>
</form>
</div>
</div>
</div>
That way there will be 2x 50% (col-xs-6) width columns nested within the main 100% (col-xs-12) column. I have not added form styling or classes, as these are all readily available in the documentation: http://getbootstrap.com/css/#forms
If you wish to use 5 nested columns, then you can utilise the offset class to push 5x col-xs-2 columns over by 1 so they appear to be centred within the main col-xs-12 column: http://getbootstrap.com/css/#grid-offsetting
I'm still young when it comes to coding, and I've heard multiple things about organization. Some use section's and some use div's, some use a div for buttons, other use the inputs in css to change it. As someone who likes to do his code clean and simple to understand, yet correct, this sometimes bothers me.
What is the best way to make a login form, with the for example the maximum of remember me and a button, with a text under saying "You don't have an account yet? Register here".
Should I use divs, sections, or both? What are the orders of the divs/sections? Container, Login, buttons?
Example:
<div class="container">
<div class="login">
<form>
<input text>
<remember me>
<div class="buttons">
<input submits>
</div>
</form>
</div>
</div>
Is this correct? Is there a way of doing it more organized?
What the most correct, used, simple and clean way to make it?
Bootstrap makes it really easy to do forms w/ minimal styling, with the exception of font sizes, colors, etc, but they add extra elements, like the form-group so you don't have to add extra CSS. I like to always use article, header, section, footer, etc whenever I can.
I understand that div is basically a "whatever" element. Bootstrap uses divs throughout their examples, but just b/c it's a div on THEIR example, doesn't mean you cannot use something else.
It also depends a whole lot on your layout. Perhaps you have the login on one page, but you have background images, centering the login form, etc, so this will determine which types of elements that you use.
<div id="login">
<div class="form-group">
<input type="text" class="form-control" name="username" />
</div>
<div> class="form-group">
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group form-inline">
<input type="checkbox" />
<label>Remember Me</label>
</div>
<div class="form-group">
<input type="submit" value="Login" />
</div>
</div>
This could easily be turned into
<article id="login">
<section class="form-group">
<input type="text" class="form-control" name="username" />
</section>
<section class="form-group">
<input type="password" class="form-control" name="password" />
</section>
<section class="form-group form-inline">
<input type="checkbox" class="form-control" />
<label>Remember Me</label>
</section>
<footer class="form-group">
<input type="submit" value="Login" />
</footer>
</article>
I tend to like the latter, but it's your decision really.
It all depends on 'what you use' and 'what you want to end with'.
If you want to add a complex css stylesheet or most of the work will be done on the server side, then you should better have a detailed composition.
In another hand, if you plan to use javascript and few css, the clearest the best.
To me, the login part (or its container, ie a header) of your page should be a section. The divs should be used to organize the inner-elements.
"The tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document."
[http://www.w3schools.com/tags/tag_section.asp]
I depends really basicly what you can handle better.
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)