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.
Related
I've read all the posts on this but none of the things work and I'm stuck.
I'm trying to hide a couple of li elements. Here's the URL: http://foundernest.com/submit-project/
I'm trying to hide the block that says "Venture URL"
I've tried:
form.post li:nth-child(2){
display:none !important;
}
But it didn't work.
Do you have any other idea of what I could do?
Thanks a lot.
That code you have there should work as long as you've considered that nth-child selector is 0 indexed
Otherwise you're not using the right selector for that li, just right click the element you need on google chrome, select "Inspect element" and when dev tool prompts with that li selected, right click on that selected element and simply select copy > copy selector
Hope that helps
Now that I've seen your html I'd recommend you to either use this selector "#step-post > div > form > li:nth-child(7)" or use an inline style tag as the selector may cause trouble with if that element exist in another HTML file. However, I'd get rid of that on the HTML not on the CSS, putting the entire element in or simply deleting it if I'm sure it will not be used in the future
Try :nth-of-type
#step-post li.form-group:nth-of-type(2){
display:none;
}
Your form element has a mix of child elements (both div and li ), and the above example selects the 2nd li.
You will you need to count all the siblings of the form, not just the li items, if you want to use the :nth-child selector:
#step-post li:form-group:nth-child(7){
display:none;
}
Apologies. You need to be logged in to see it.
You can use:
Username: test
Password: test12
Thanks everyone
<form class="post" role="form" class="validateNumVal">
<li class="form-group custom-field">
<div class="row">
<div class="col-md-4">
<label for="venturelink" class="control-label title-plan">
Venture URL<br/>
<span><p>This will give more context to the expert</p>
</span>
</label>
</div>
<div class="col-sm-8 text-field">
<input class="field-control input-item form-control text-field" placeholder="e.g. http://foundernest.com" name="venturelink" value="" type="text" > </div>
</div>
</li>
Using TB, is it possible to style the radio or checkbox so that it shows a glyphicon instead of the default style for radio or checkbox? I want to use a glyphicon glyphicon-star to indicate unchecked, then glyphicon glyphicon-star-empty to indicate checked.
Without javascript you could modify the style... Its kind of a hack in my opinion but it was interesting because I realized that boostrap uses an icon font #newb.
HTML
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
CSS
.glyphicon:before {
visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
content: "\e006";
}
input[type=checkbox].glyphicon{
visibility: hidden;
}
Try it out HERE
Just for those, having the same problem and came from Google (I didn't find any convenient answer).
I tinkered something like this and tested it in the current Chrome, Firefox and IE. With this method, you also can use everything else you want as checkbox. Just give the classes "checked" and "unchecked".
For every checkbox do this:
<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
<span class='glyphicon glyphicon-unchecked unchecked'></span>
<span class='glyphicon glyphicon-check checked'></span>
Checkbox 1
</label>
And add to your CSS:
input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}
On the official website, the javascript section has examples of styling groups of checkboxes and radio buttons as buttons groups. It's under the buttons section here.
Instead of having text inside the button that reads "Option 1", you would place your glyphicon instead. If you wanted only one checkbox, I suppose you could eliminate the button group and just go with a single button.
To remove the button appearance and only show your icon, use the "btn-link" class.
I haven't tried this myself, but I see no reason for it to not work.
Here is a pure angular solution to toggling between to glyphicon to conditionally show content on the page. I found the CSS solution to fail in IE.
This does more than your question, but I thought the toggling of something on the screen is useful.
<p ng-init="toggle = false" ng-click="toggle = !toggle" title="#Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[toggle]"></p>
<div ng-show="toggle">
//what you want to show here
</div>
I'm just fiddling around with jQuery UI. I want a region on my web page to show notifications...however the way jquery demo sites show is not so practical.
The markup on my page goes somewhat like follows:
<div id="msgRow">
<span class="ui-icon ui-icon-info"></span><span id="msg">Some message</span><span class="ui-icon ui-icon-close" id="close-message"></span>
</div>
Problem with the above is the message icon, text, and the close icon all appear in separate lines.
How to make them in the same line?
Ps: fiddle showing how its done jQuery ui way: http://jsfiddle.net/deostroll/EnKNh/
Give them a common class class with css property,display: Inline-Block.
.Sameline
{
Display: Inline-Block;
}
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 creating a website using Bootstrap found here:
http://www.bestcastleintown.co.uk/wp/
My issue is that on the home page my social networking buttons for Twitter and Facebook found just underneath the <header> do not align horizontally if you look closely. I was hoping that by creating a separate CSS class class="like-btn" for the list item containing the facebook button I can make them align horizontally.
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
<li class="like-btn">
<!--facebook like button-->
</li>
<li class="follow-btn">
<!--twitter follow button-->
</li>
<li class="tweet-btn">
<!--twitter tweet button-->
</li>
</ul>
</div>
</div>
However it looks like the facebook code for the like button is contained within an iframe which includes some CSS styles and unless my website happens to have the same matching protocol, domain and port as the Facebook iframe, I cannot not modify it because of Same Origin Policy.
I have noticed one CSS rule from facebook that if removed makes the buttons seem to align, but the border is removed from the bottom of the like button which is undesirable.
.pluginButtonSmall {
padding: 0 5px 2px;
}
Is there anything I can add to my .like-btn class to resolve the issue so the buttons align horizontally?
If that's causing the issue; maybe add a rule
.like-btn div {
padding: 0px;
}
or
.like-btn .pluginButtonSmall {
padding: 0px;
}
You might like to try a css rule something like...
.like-btn, .follow-btn, .tweet-btn {
float: left;
display: inline-block;
}
Use divs instead of ul> li and the use margin-top or padding-top on the social container elements to make them align horizontally. Usually you need to move them one or two pixels since not all social buttons have the same dimension.
At the bottom of getBootstrap.com they had this:
I used Chrome's developer's tools to see that the formatting came from this css file: http://getbootstrap.com/assets/css/docs.min.css
It has a license at the top that allows me to use it. So I downloaded it and made my own social media footer:
I found this thread because you are using the same class names as getBootstrap.com does, so I guess you are using bootstrap....