My Code:
<p:splitButton value="View">
<p:menuitem value="Edit" icon="ui-icon-edit" />
<p:menuitem value="Delete" icon="ui-icon-delete"/>
</p:splitButton>
that code is rendering the menu appended to the body, for example:
<body>
<form>
<table>
<tr>
<button id="splitbutton".../>
</tr>
</table>
</form>
<div id="menu-for-splitbutton">
<a id="menu1"... >Edit</a>
<a id="menu2"... >Delete</a>
</div>
</body>
I need the menu relative to the splitbutton or adjacent, for example:
<body>
<form>
<table>
<tr>
<button id="splitbutton".../>
<div id="menu-for-splitbutton">
<a id="menu1"... >Edit</a>
<a id="menu2"... >Delete</a>
</div>
</tr>
</table>
</form>
</body>
I'm using :hover (CSS) to show the split button when the cursor is over a row, but is not hiding the context menu when any row is unselected because the menu is not inside the TR tag... How I can resolve this?
Related
I am try to create a search field with a submit button, where the submit button width is based on it's content, and I try to make the input field width to be fluid, and as max as possible. It's in jQuery mobile.
I've found this solution, and tried to implement it without success. Here is a test JSFIDDLE
I've tried it on a simple html page, and on that it works.
Can somebody point me to where am I made the mistake?
HTML
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
add this CSS in your code
.searchContainer > div:first-child {float:right;display:inline-block;}
button will get arranged as per the content.
This is generic solution. You can write it using class name.
Maybe using table will do the job
HTML
<div data-role="page">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<!-- /header -->
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<table style="width: 100%;">
<tr>
<td><input type="text" name="term" style="width: 100%;" /></td>
<td><input type="submit" name="search" value="Go" /></td>
</tr>
</table>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
<div data-role="footer" data-theme="b">
<h1>Copyright © </h1>
</div>
</div>
DEMO HERE
If you want side by side elements without width, remove float and set display:inline-block; to both elements. Or if button have fixed width (eg 70px), use float with calc() for input field width. width: calc(100% - 70px)
I have a situation here and perhaps solution is simple but I can't find a way out until now so I need some help.
I have this HTML code:
<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title">Seleccione uno o más fabricantes</h4>
</div>
<div class="modal-body">
<form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
</table>
</div>
</div>
<div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
</div>
</form>
</div>
</div>
</div>
</div>
Which render as image below shows:
What can be wrong in that markup? I'm using latest version of Twitter Bootstrap. Any help? Advice?
Some clarifications:
I need the table inside the form because it's tabular data and semantic I think this is the right choice
I need the form because I'm using BootstrapValidator plugin and as says here in docs that the right markup, and I need to check at least one checkbox is checked before enable the submit button and allow send the form
Remove the element <div class="form-group"> and its end tag surrounding <div class="table-responsive">. That will fix the padding issue. You also have an issue with the checkbox class. If you remove the checkbox class from the <div> containing the checkbox it'll align properly.
I have a big table and this is the last row of that table:
<tr>
<td>
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
<table>
<tr>
<td>
<form action="index.jsp" method="get" style="display: inline-block;">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post" style="display: inline-block;">
<button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
</table>
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
You could try something like this:
<tr>
<td style="line-height:30px;">
<div style="height:30px; float:left;">
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
</div>
<div style="height:30px; float:left;">
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</div>
<div style="clear:both;"></div>
</td>
</tr>
Let me know if it works (or not) :)
Simply align form tag with display:inline-block in last-child td
Clarification in fiddle : http://jsfiddle.net/HarishBoke/uHCyU/
I'm having troubles aligning things in a table row. I have an hyperlink and an inline-form made up of one textbox and one button.
The problem is that the button goes to the next line instead of being aligned with the textbox. The problem occurs in Chrome, but it works fine in IE10
I use twitter bootstrap for css. This jsfiddle illustrates the problem : http://jsfiddle.net/Tq9Qm/
Can you help me ?
the code of jsfiddle:
<table class="view-header">
<tbody>
<tr>
<td> <span>Edition du mandat </span>
</td>
<td>
<div class="pull-right"> <a style="float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline" placeholder="N° de contrat, nom/numéro de client">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model" />
<button disabled="disabled" class="btn btn-info" type="submit" ng-click="searchMethod()" ng-disabled=" ! canSearch()"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="pull-right">
<!-- uiIf: filterVisible -->
</div>
</td>
</tr>
</tbody>
Use pull-left it's attribute for twitter boot-strap
FiddleDemo
Nav Documentation
Try pull-left in your form
Demo
try the pull-left attribute
it will helps you
I have this div that is showing the products for an e-commerce site.
I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:
Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png
That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.
Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.
How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?
HTML looks like this :
<div id="products">
<img src="fetch.php?id=4" width="129" height="129" alt="PRC200" />
<h3>PRC200</h3>
<table border="0">
<tr>
<td><h4>100,00 RON</h4></td>
</tr>
<tr>
<td class="out">Indisponibil</td>
</tr>
<form action="" method="post">
<tr>
<td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
</tr>
</form>
<form action="detalii.php" method="get">
<tr>
<td>
<input type="hidden" name="id_produs" value="4" />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</td>
</tr>
</form>
</table>
<p>M-am saturat de atatea litere si numere</p>
</div>
Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.
<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }
</style>
<div id="products">
<div class="product">
<div class="purchasedetails">
<h4>100,00 RON</h4>
<p>Indisponibil</p>
<input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</div>
<div class="productimg"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></div>
<h3>PRC200</h3>
<p class="description">Insert Description Here</p>
<div style="clear:both;"></div>
</div>
</div>
I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>