I've created a pure CSS navigation for a one pager, demo here:
http://webentwicklung.ulrichbangert.de/thread36-nav-6.html
Works fine so far, but additionally I'd like to hide the menu when a link is clicked. I tried wrapping the ul in the nav by a label for the radio button that hides the menu, but no success. Obviously the link captures the click event and it doesn't reach the label.
HTML for the radio buttons:
<!-- menu visible when checked -->
<input type="radio" name="rbnav" id="rbnav1">
<!-- these should hide the menu -->
<input type="radio" name="rbnav" id="rbnav2">
<input type="radio" name="rbnav" id="rbnav3">
<input type="radio" name="rbnav" id="rbnav4">
HTML for the nav:
<nav>
<ul>
<label for="rbnav4">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</label>
</ul>
</nav>
I there a pure CSS solution for this task? I read this thread:
Activate Label and Link with one click
#Aziz writes "I don't think there is pure CSS solution to your problem, you'd have to use some JavaScript code". Can anyone confirm that it's definitely not possible by pure CSS or on the other hand point out a solution?
I don't know how have you structured your code, but, the better way(maybe the only) way to do this is using JavaScript.
If you use CSS class to open and close the nav, you should create a function that changes the class of it.
Can you show more about your code? Are you using another JavaScript functions?
Related
So, I have the IssuesList component, which is the list of issues that I get using ajax and github api, and DevStatus component, which sort of wraps the list up and contains all the logic, triggers state changes by two radiobuttons and so on.
My problem: When I click on one of the radiobuttons, the DevStatus component won't change state if the click was on the text inside the radiobutton. And when I click on the corners of the radiobuttons, the blue areas without text, the state changes perfectly.
Here's the structure of the radiobuttons:
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.CLOSED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Closed Issues
</label>
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.OPENED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Open Issues
</label>
</div>
Here's the codepen with the code and here's the full page view so you could better see and understand what I'm talking about.
Please, open the full page view and try to click on parts of the button that contain text and on ones that don't and you'll notice that as long as you click on parts without text - the state changes and if you click on text itself - the state doesn't change at all.
Could you please help me with that problem?
PS: removing onChange from the input element is not the solution.
Update 1
If you go to DevTools and inspect the radiobutton element, you'll see that inside the label tag there're input and weird span elements. The span element is not in the code I wrote, did React automatically add that? For some reason, the onClick event listener is not applied to those input and span elements.
Update 2
I've tried to add click event listener to the radiobutton in the console of dev tools and tried to figure out the target of the clicked element. When I click on the text - it is the span element and when I click on place without text - it is the label element and that's why the click event is not working.
Can my problem be solved using dangerouslySetInnerHTML, so that it won't create the unnecessary span?
Could you tell me please how to solve that?
React is creating a span because your text is not in any div. Also it would create a span if there was any white space (but in your case this is because there is no div around your text).
But the real problem here is the way you check your event. You need to check e.currentTarget instead of e.target
Then no need to use the ugly dangerouslysetinnerhtml!
React appeared to sometimes be adding span tags around text, no matter if there are the free white-spaces or not. The spans didn't allow the onClick event to fire when they were clicked on.
So, to force React not to render the spans, the dangerouslySetInnerHTML may be used:
noSpanRender(text) {
return { __html: `<input type='radio' name='options' autoComplete='off'/>${text}` };
}
render() {
return (
<div className="dev-status-page col-centered">
<div className="graphs">
<h1 className="text-center page-header">
Our Recent Closed and Opened Issues from GitHub
</h1>
</div>
<div className="issues col-centered">
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Closed Issues')} />
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Open Issues')} />
</div>
<IssuesList issues={this.state.issues} />
</div>
</div>
)
}
It was vital to avoid those span elements inside the input tag, so using dangerouslySetInnerHTML finally helped.
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>
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 have a load of wizard controls and I need to slightly modify the html it is spitting out around the navigation. Currently I have the below..
<div class="nav">
<input type="submit" value="Back" class="secondary" id="FinishPreviousButton" name="FinishPreviousButton">
<input type="submit" value="Submit" class="primary" id="FinishButton" name="FinishButton">
</div>
I have added my desired classes to the buttons, primary and secondary, but i cant seem to work out how to change the containing div's class from nav. I've already tried .NavigationStyle.CssClass but that isnt doing the trick.
Any ideas?
My bad, NavigationStyle.CssClass was getting overridden. Sorted now.
I got a markup like below and without any styling, the Twitetr Bootstrap css seems to mess something such that the checkbox falls below the label text.What is the thing i got to change
<ul >
<li>
<label>1<input type="checkbox" id="chk1" name="chk1"></label>
</li>
<li>
<label>2<input type="checkbox" id="chk2" name="chk2"></label>
</li>
</ul>
screenshot http://img525.imageshack.us/img525/3390/savec.jpg
inputs-list doesn't seem to be a css class anymore. I used class="nav nav-list" instead.
Add the class "inputs-list" to your <ul>. Everything will magically work.