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.
Related
I'm using Angular UI Bootstrap datepicker popup on a modal dialog. The width of the outside border is not calculated properly based on the inside contents. In some cases, the outside box is bigger than inside contents. In other cases, the outside is smaller. Also, it seems the width of the outside of the datepicker has impact on the width of the popup. For example, "col-sm-4" will make the border smaller, while "col-sm-5" will make the border larger.
Can anyone please point me to the right direction to check where the problem might be?
Thanks in advance!
Look this: http://plnkr.co/edit/JTkIvBwl9agQCYxLaN6X?p=preview
Just change to: is-open="opened" to: is-open="$parent.opened"
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i>
</button> <b><- button not working</b>
</span>
</div>
Just figured that out. It was a mistake. I have changed the "dropdown-menu" css class buried somewhere, which affects the datepicker layout.
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.
I am trying to get an input-group styled properly in Bootstrap 3 with a drop-down selector, using this sample code:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<select class="btn">
<option>USD</option>
<option>GBP</option>
<option>ZAR</option>
</select>
</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<div class="btn btn-default" type="button">Button</div>
</span>
</div>
</div>
It works fine in Bootply (http://www.bootply.com/ZVSunDnXif):
but if I put it into my site (ASP.Net Web Forms) using exactly the same code, it breaks:
I wouldn't mind so much (in vanilla bootstrap it's only lacking the border around the select box), except that I'm using a Bootswatch themed version, which doesn't even align properly:
The css path to the input group is body > form > div #MainBody > div.row > div.col-md-9 > div.form-group.
If I remove the select element, it displays fine, so is there something wrong with how I've defined that?
try adding row class to the form-group div parent of the select element. My select element was breaking the form div and going into another row. Adding the row class kept it inside visually although it is still going outside the html form tag. I am going to post about that separately.
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 using jquery mobile for my project. It automatically converts all radio buttons in its inputs with its styles. The major problem is that in different situations i have different number of buttons (it depends on user) with its different width and i need it every time center.
<div data-role="fieldcontain" id="inline" >
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
{section name=i loop=$data['input'] start=0}
<input name="position" id="radio{$smarty.section.i.index}" value="{$data['input'][i]}" type="radio" />
<label for="radio{$smarty.section.i.index}">
{$data['input'][i]}
</label>
{/section}
</fieldset>
</div>
As you see each button has his size (for example Up and Zoom In are different). As i said before - i don't know what buttons will be for each users - it depends on their own settings, so i need somehow automatize process of centering it - is some ideas?
You could try it with <a> instead of <input> as done in the documentation, if at all possible in your situation.