In classic bootstrap, this construction is easy:
<div class="panel panel-danger">
<div class="panel-heading">
Some HTML including a drop-down.
</div>
<div class="panel-body">
Panel body, lots of HTML here
</div>
<div class="panel-footer">
<button class="btn btn-default">Click me</button>
</div>
</div>
In the react-bootstrap implementation, there seems to be no way of including further html in the panel header or footer?
Try this
<Panel
header="Some HTML including a drop-down."
footer={<Button> Click me</Button>}
bsStyle="danger"
>
Panel body, lots of HTML here
</Panel>
You can use other props from bootstrap-react document
As per the react-bootstrap panel documentation:
<Panel>
<Panel.Heading>Panel heading</Panel.Heading>
<Panel.Body>Panel content</Panel.Body>
<Panel.Footer>Panel footer</Panel.Footer>
</Panel>
Related
I want to append div using xpath inheriting a parent template.
for ex.
this is parent template
<template id="parent_id">
<div id="header">
<div class="container">
<h1> HEADER </h1>
</div>
</div>
<div id="product">
<div class="container">
<!-- THERE IS SOME CONTENT -->
</div>
</div>
</template>
i want to change like this,
<template id="parent_id">
<div id="product">
<div class="inner">
<div class="container">
<!-- THERE IS SOME CONTENT -->
</div>
</div>
</div>
</template>
i try this,
<template id="product_custom" inherit_id="parent_id">
<xpath expr="//div[#id='product']" position="after">
<div class="inner">
</xpath>
</template>
while replace all content is easy or copy all content to custom template, but it not proper way. i want to wrap a div on content.
I think you cannot do that, because you are going either to override the content or to place your <div/> before, after on inside the selected element.
A simple solution will be to give the id="product" div the class inner by using position="attributes". Or if you really need this, a possible solution is:
replace id="product" with class="inner" with one override using attributes position
define your own template in a second override and call the original one inside it
You will end up with something like this:
<template id="my_parent" inherit_id="foo.parent_id">
<div id="product">
<t t-call="foo.parent_id" />
</div>
</template>
plus the override of the attributes. Never done something like this and the code above is not tested but it could work ;)
My HTML looks like this:
<div class="MainColumn">
<div class="firstrow">
<div class="sub1">Label1</div>
<div class="Value1">
<span class="ValueRow">
Linkname
</span>
</div>
<div class="Value1">...</div>
</div>
<div class="firstrow">...</div>
<div class="firstrow">...</div>
<div class="firstrow">...</div>
</div>
How can i click on the link named LinkName in the HTML above using XPath? I am working on Watir Webdriver.
Thanks for your help!
Locate it by link text and click:
browser.link(:text =>"Linkname").click
browser.a(xpath: "//a[text()='Linkname']").click
{{#if currentUser}}
<div ng-app="appy">
Home
Page
<div ui-view></div>
</div>
{{else}}
Here will be logIn page
{{/if}}
Goal is to render menu and content only to logged users, if not logged render login page. problem is {{#if currentUser}} makes my ui-view element to not render templates it shuld.
How to repair it ?
Try this:
<div ng-app="appy">
<div ng-show="$root.currentUser">
Home
Page
<div ui-view></div>
</div>
<div ng-hide="$root.currentUser">
Here will be logIn page
</div>
</div>
I'm using a custom tabstrip that I took from the KendoUI page and adapted for my application.\
It has 3 tabs (home, startOfDay and stops). Each tab goes to an HTML page.
The problem is this, I can navigate from Home to one of the other tabs without a problem, but after that if I try navigate to another tab it just goes to a blank page.
Here's the my layout code.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>
each page is contained in a div that looks like this...
<body>
<div id="home/startOfDay/stops" data-role="view" data-layout="default">
~Content goes here~
</div>
</body>
Any help would be greatly appreciated.
Thanks!!!
Try removing the <body> tags from your views? I think when Kendo UI Mobile reads in a remote view it injects it into the page DOM, and having another <body> tag might be messing it up.
I read somewhere that a layout has to have at least one view defined to work properly, even if it is a blank view. Try putting in a blank view.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<div data-role="view"></div>
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>
Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.
I know for sure it can be done, just not sure how.
<div data-role="page" id="Survey">
<div class="quest">
#Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
Comments</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Dialog</h1>
</div>
<div data-role="content">
<div class="center-wrap">
<textarea style="width: 320px" title="Comments">
</textarea><a data-rel="dialog" data-role="button">Save</a>
</div>
</div>
</div>
</div>
You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.
<div data-role="page" id="Survey">
...
<a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>
<div data-role="page" id="question-dialog-1">
...
</div>
Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/
That should solve what you are looking to do.
Here is the documentation on jQuery Mobile dialogs.