I'm currently building an email template. The template contains USP's that are lined next to each other. This is the code I'm using:
<td width="100%">
<span style="white-space: nowrap;">
<img src="checkmark.png" /> [text name="USP1"]
</span>
<span style="white-space: nowrap;">
<img src="checkmark.png" /> [text name="USP2"]
</span>
<span style="white-space: nowrap;">
<img src="checkmark.png" /> [text name="USP3"]
</span>
</td>
With the "nowrap" I'm trying to put the USP's underneath each other on smartphones. Too bad the USP's all stand next to each other, which makes the table wider.
Is there a simple inline-CSS trick to make them stand under each other on small screens?
HTML:
<td class="usps">
<span>...
</td>
CSS:
table tr td.usps span {
display: block;
}
Related
Hi I'm trying to obtain responsive menu on navbar in application on which I work with bootstrap 3. My menu has element with bell icon. The purpose of this one is to remind user some information. Below I show that menu element on screen:
I have fixed settings for width of my menu. I'd like to have responsive menu, not static, because this application should work on few screen resolutions. What should I obtain that? I tried to obtain that by pecrentage property for: width, min-with properties, but it has crashed.
Below I show html tags and CSS settings:
Html:
<li class="dropdown ng-isolate-scope open" loader="remainderLoading"><a ng-show="!loader" id="reminderLink" class="dropdown-toggle" data-toggle="dropdown" style="font-size:18px; cursor:pointer;" ng-click="removeNotification()" aria-expanded="true"><i class="fa fa-bell"></i></a>
<!-- ngIf: numOfRemindedNotes && !loader && !clicked -->
<div id="reminderMenu" class="dropdown-menu">
<div class="form-group col-md-7 disabled">
<label>Reminder's date:</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty ng-valid-date ng-valid-required" ng-change="getNotesByDate()" initdate="new Date()" ng-click="noteDatepicker.opened = true" uib-datepicker-popup="" ng-model="dateNotes.value" is-open="noteDatepicker.opened" ng-required="true" close-text="Close" readonly="" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
</div>
</div>
<div ng-show="noteLoading" class="ng-hide">
<img width="32" height="32" src="/packages/img/loader.gif">
</div>
<div class="col-md-12">
<table id="reminderTable" class="table table-bordered table-striped" ng-show="!noteLoading">
<tbody>
<tr id="reminderTableElement">
<td class="col-md-3">
Case Id
</td>
<td class="col-md-3">
Trans id
</td>
<td class="col-md-3">
Type customer
</td>
<th class="col-md-3">
Note
</th>
<td class="col-md-3">
Date
</td>
<td class="col-md-3"></td>
</tr>
<!-- ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426024</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsadsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426011</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer -->
<!-- ngRepeat: note in notes.notesForAdditionalCustomers -->
</tbody>
</table>
</div>
</div>
</li>
CSS:
#reminderTableElement{
font-size: 12px;
}
#reminderMenu{
min-width: 540px;
}
I would be grateful for help. Best regards ;)
You should use #media tags to implement styles. For example
#media (min-width: 1600px) {
#reminder-menu {
...
}
}
It is considered best practice to design for mobile first, so you would use min-width: 540px or whatever your smallest breakpoint is first, then add more breakpoints as needed.
Given the following example, what would be a good approach to position the Search button in line with the date input controls?
I gave it a shot with Bootstrap (2 rows, 3 columns) but the layout should stick to the left and keep the 3 logical columns together. And maybe there's an easier solution I am overlooking.
JS Bin HTML
Note: based on the simplified output from Telerik's Kendo UI combined with ASP.NET MVC.
Flexbox requires IE10+
Here is the solution that works everywhere and won't break bootstrap's responsiveness http://output.jsbin.com/ladezahija/1/
Idea is to apply to elements (blocks with date and search button) next rule:
.element {
display: inline-block;
vertical-align: bottom;
}
In an example I had to use float: none to redefine previously added property by bootstrap.
Also make sure you add a separate class for container and inner elements you work on.
I would go with CSS Flex.
using this CSS would align them for you. (you will need some vendor prefixes)
$("#datepicker").kendoDatePicker();
$("#grid").kendoGrid({
dataSource: [
{ foo: "foo", bar: "bar" }
]
});
.container-fluid {
display: flex;
justify-content: space-around;
}
.container-fluid > div {
align-self: flex-end;
}
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="container-fluid">
<div style="margin: 20px; float: left;">
<h4>
<label for="StartDate">From</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="startDate" class="k-input" id="startDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="startDate_dateview" style="width: 100%;" type="text" value="1-11-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<h4>
<label for="EndDate">To</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="endDate" class="k-input" id="endDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="endDate_dateview" style="width: 100%;" type="text" value="24-12-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<button tabindex="0" class="k-button" id="applyFilters" role="button" aria-disabled="false" data-role="button">Search</button>
</div>
</div>
You didn't used bootstrap properly. Anyway I have two solution.
First Solution:=> Add a blank h4 <h4> </h4> into last div.
Second Solution:=> Use margin-top:60px to k-button.
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 a table, one column of which contains only a checkbox and I am currently centering these with
<td style="text-align:center; vertical-align:middle;">
<input type="checkbox" name="xyz">
</td>
Now I want to add some JS to (de)select all/none, so I want to add a checkbox in my table header row, along with some text
TH is, by default, bold and I am happy leave it so for actual Column header text, bu I was normal text for the "all/none" and then I want a centered checkbox below that.
----------------
| Search ? | Next column
| (all/none) |
| [x] |
here's my code - how do I get that checkbox to center?
<th>Search?<br>
<span class="th_not_bold">(all/none)</span><br>
<input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()">
</th>
try using
<th>
<td style="text-align:center; vertical-align:middle;">
<div>Search</div>
<div class="th_not_bold">(all/none)</div>
<div><input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> </div>
</td>
</th>
You would do exactly the same thing you did for your other <td> - you would set text-align center; vertical-align: middle; on the <th>, and you wouldn't need to apply any properties to the checkbox:
Here's an example of the code you'd use:
th{
text-align: center;
vertical-align: middle;
}
You can use text-align:center. Here is what is looks like: http://jsfiddle.net/RcztD/1/
<html>
<head></head>
<style type="text/css">
.center{
text-align:center;
}
</style>
<body>
<table border="1">
<tr>
<th valign="top" class="center">
Search?<br />
<span class="th_not_bold">(all/none)</span><br />
<input type="checkbox" name="search_all" id="search_all onClick="ReportAllNoneClicked()" />
</th>
</tr>
</table>
</body>
</html>
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>