I'm learning how to use the Ionic Framework. I like a lot of it. However, I don't care for the form layouts. I would really like to include one additional component: some help text. In other words, I would like to create a form tht looks like the following:
Label1
[TextBox with a border here]
a tidbit goes here
Label2
[TextBox with a border here]
a tidbit goes here.
[Button]
However, I can't figure out how to do this well in the Ionic Framework. All of the form layouts use a list, which adds boundaries to each piece, which I don't want. Can a CSS wizard please help me out?
Thank you!
How does this work? for you?
<label class="item item-input item-stacked-label item-divider">
Name
<input type="text" placeholder="Name">
</label>
<div class="item item-footer">
Please enter your name
</div>
To get the css the way you want, you can add this
.item{
border: none;
}
.item-footer {
font-size:11px ;
padding: 8px ;
}
.item-stacked-label input, .item-stacked-label textarea{
padding:0 ;
}
Related
i'm trying to add some checkboxes into my form and to make them look nice. The thing is that when I use {{form.checkBoxFilter}} the output is like:
I would like to have them inline and readable, unfortunately using crispy forms renders them too close to each other.
I found that looping through elements will place them inline but still they're close to each other (their labels are much longer than shown below).
{% for x in filter.weights%} {{x}} {%endfor%}
Where to put my css in this case?
filters.py:
weights = django_filters.MultipleChoiceFilter(
label = "Filter by weight",
required=False,
widget=forms.CheckboxSelectMultiple,
choices=OZ,
method = 'filter_by_checkbox'
)
Adding directly into static/css won't work :
input[type=checkbox]
{
padding: 20px;
margin: 20px 15px 0px 3px;
}
You could use css to seperate them. For example you could use a bootstrap stylesheet in your base.html (read here).
when installed you could do it like this:
<div class="container">
<div class="row mb-1">
{% for x in filter.weights %}
<div class="col-sm-XX">
{{x}}
</div>
{%endfor%}
</div>
</div>
where XX should be a suitable size. Keep in mind bootstrap divedes the page in 12 parts. Also it comes with some css features.
Update for your edit:
assign a class to your checkbox and go for the class in the css. You can also use the built in x.as_p to display it as <p> element.
Im building a football app (using phonegap, backbone, require and topcoat.io) allowing users to pick their man of the match (MOTD).
In the MOTD template, I want to display the player name, position, a link to their full external profile and a radio button. The HTML looks like:
<li class="topcoat-list__item">
<div class="player-container">
<div class="player-details">
<label for="player_516" class="topcoat-radio-button">
<input type="radio" name="player_id" id="player_516" value="516">
<p>Robin van Persie</p>
<p>Forward</p>
</label>
</div>
<div class="player-more">
<a target="_blank" href="http://www.premierleague.com//en-gb/players/profile.overview.html/robin-van-persie">More</a>
</div>
</div>
</li>
The CSS is:
.player-more{
width:48%;
float:left;
}
.player-details{
vertical-align: middle;
float:left;
width:48%;
}
But it comes out looking like so on a mobile:
list example http://match.webintelligence.ie/img/motm.png
Maybe I'm trying to include too much information in each list item. Any suggestions as to how I could present this better? Maybe I dont need the radio buttons. Instead, if a user clicks anywhere on the list, it will highlight it and this will be their selection. Except if the click "more", in which case the external link will show...
This happens because your p elements are block-level elements. This means they will occupy their own line. Change the p to an inline element.
p.player-name {
display: inline;
}
Or use a span element, which is inline by default.
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}
I am using Twitter Bootstrap for Rails, in a 3.2 app, and am not seeing the checkboxes appear.
If I look at the same page in just straight HTML (with checkboxes hardcoded in, and using the regular Bootstrap assets) it works fine.
The HTML code is produced correctly, I believe...e.g.:
<div class="field">
<div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
</div>
Here is the Rails Code:
<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>
Here is a live example. Right beside the text "List square footage", should be a checkbox. Scroll down to amenities, and there you will see a list that obviously should have checkboxes.
This doesn't work in development either.
Not quite sure why it's not showing up.
Thoughts?
Looks like uniform.js is setting the opacity of the checkbox to 0.
Try disabling uniform.js if you're not using it.
Update: It also looks like you're getting a 404 on a sprite image? Probably a uniform theme sprite image?
GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found)
Another Update: This is definitely the problem. Uniform works by making the opacity of the input 0, so that it's invisible, but still clickable, and changing up the markup a little bit, so it looks like this.
<div class="checker" id="uniform-listing_amenity_ids_4">
<span>
<input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
</span>
</div>
And it sets a css rule on div.checker span:
div.checker span {
background-image: url(../img/sprite.png);
}
That image is missing, so the input appears to be invisible.
actually the problem in you have the check boxes but its hidden, due to the margin property
input[type="checkbox"] {
float: left;
#margin-left: -20px;
}
so remove or change the margin size
see below, FF with firebug
$('input[type="checkbox"]').css("visibility","visible");
I'm creating a css template for form types and want to give form inputs a rounded border. This works well with type=text but doesn't work with type=file (for file upload).
What am I doing wrong?
.tempform input[type="text"] {
-moz-border-radius: 10px;
}
.tempform input[type="file"] {
-moz-border-radius: 10px;
}
<div class="tempform">
<label for="textfield">Test Text Field</label>
<input type="text" id="textfield" name="textfield"></div>
</div>
div class="tempform">
<label for="filefield">Test File Field</label>
<input type="file" name="filefield" id="filefield-0">
<input type="file" name="filefield" id="filefield-1">
</div>
Unfortunately, it's impossible to style a file upload input, besides changing the width a little bit. Browsers just don't allow any other change. If you want to style your file upload input, you'll have to use a nasty hack like placing an almost invisible file upload input on top of an image (which only works in some browsers), or a JavaScript solution like ajax-upload.
According to the first Google search result, it's rather involved. See this article on quirksmode.org for information on how to do it.