When the screen is not zoomed out the td with the data is just working fine as you can see on the first screenshot , but when the screen is lower reso if if we try to zoom out like the second screenshot the data inside td or td is not adjusting as you can see we could no longer see the full date the calendar is not adjusting, how do we solve this using css ?
#1st screenshot
enter image description here
#2nd screenshot
enter image description here
#html code - this is just a snippet
<th style="width: 109px;"><span>Date</span></th>
<td class="date-text-right">
<div fxLayout="row" fxLayoutAlign="center center">
<input (click)="openPicker(pickerDate);"
[(ngModel)]="data.targetDate" [matDatepicker]="pickerDate">
<mat-datepicker #pickerDate></mat-datepicker>
<span (click)="openPicker(pickerTargetDate);"
style="font-size: 18px;margin-right:10px;">
calendar_today
</span>
</div>
</td>
#css
.date-text-right {
text-align: right;
padding-right: 10px;
}
Related
I am using jqxValidator to validate a group of radio buttons. When the red message (which is a label) appears under the row, it inherits the width of the first column, breaking the design:
I tried many things, finally changing the display of the label fixes the table layout, but the message get splitted in 2 lines.
Is there a way to extend the width of the label to use the whole table width?
Example: https://codepen.io/lhernand/pen/OEZbXb
HTML:
<table style="border:0; border-collapse:collapse; " width="100%">
<tbody>
<tr class="rowRequired jqx-validator-error-element" id="optionsID0EYE">
<td style="border:0; width:50%; "><input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span></td>
<td style="border:0; width:50%; "><input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span></td>
</tr><label class="jqx-validator-error-label" style="position: relative; left: 0px; width: 304.688px; top: 2px;">Please choose one option!</label>
</tbody>
</table>
Note: it should work in IE11
Working with this kind of fixed structure requires some mayor hacking,
since jquery validator inserts a label after a td on the table, the element behave like a td with no match on the same row.
Using the chrome dev tools option to copy the selector on the inspector, I can get the most specific selector posible for the html structure you have, so aplying a 200% size to this element, tricks the table to not missbehave
#tablePatientDetailsContainer > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > table > tbody > label{
width: 200% !important;
box-sizing: border-box;
}
Tested on Chrome, FF and Safari
My Working Code
https://codepen.io/Teobis/full/vrjZVR/
Hope this helps
You placed the id optionsID0EYE in the wrong place. jqxValidator will create a sibling for the element who has this id. You need to do something like so:
<tbody>
<tr class="rowRequired">
<div id="optionsID0EYE" style="display: flex; flex-wrap: wrap">
<div style="width: 50%">
<input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span>
</div>
<div style="width: 50%">
<input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span>
</div>
</div>
</tr>
</tbody>
I moved the id optionsID0EYE to a new div I made.
Working example: https://codepen.io/anon/pen/YvLZeB?editors=1000
I'm a beginner to HTML and CSS. I'm using jquery mobile, and jquery ui to build a page. I have added a select menu and two images as buttons next to it. I have set a border width of 1px to see the layout. As it is seen in the picture below select menu border is extended and covers the images so I can't click on them.
select menu border covers image
This is the html
<div id="container" >
<img src="styles/add_button.png" id="addButton" class="imgButton">
<img src="styles/remove_button.png" id="removeButton" class="imgButton">
<form>
<select name="select-native-1" id="selectMenu">
</select>
</form>
</div>
this is the CSS
.imgButton{
float : right;
margin: 0em .2em;
}
#container{
vertical-align: middle;
margin:0em 1em 1em 1em;
}
#selectMenu{
float: right;
}
What is the problem here?
I find tables to be the easiest way to properly align things. Try this...
<table><tr>
<td><select name="select-native-1" id="selectMenu"> </select></td>
<td><img src="styles/add_button.png" id="addButton" class="imgButton"> </td>
<td><img src="styles/remove_button.png" id="removeButton" class="imgButton"></td>
</tr> </table>
And then add widths to the td elements to give it the look you want.
Following is my fiddle in which I am trying to vertically align the text with Icon Font. Kindly let me know what's an appropriate way to do such alignment:
How can I vertically align the font icon with the text on this fiddle
Wrong output:
[ICON]Text
Text Text
Expected Output:
Text
[ICON] Text
Text
You can simply make the icon float (bootply #1):
.panel-title .glyphicon {
float: left;
margin-right: 10px;
}
but I prefer using Block Formatting Context (BFC) properties when it comes after a floating element (needs an extra element to enclose your text). It basically creates a column along your float instead of letting your text wrap around it as usual (bootply #2):
HTML:
<a href="#collapseFour">
<span class="left mr1 glyphicon glyphicon-file"></span>
<span class="bfc">Reports Reports Reports Reports Reports Reports Reports</span>
</a>
CSS:
.left {
float: left;
}
.bfc {
overflow: hidden;
}
div it.
put the icon in a separated div, like this:
<div>
{icon}
</div>
<div>
{text}
</div>
and put them inline. display:inline-block... this should work.
you can make a little table like this
<table>
<tr>
<td valign="middle">[ICON]</td><td>Text<br>Text<br>Text</td>
</tr>
</table>
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
I am using the latest version of jQuery Full calendar . Currently the date number by defaul is in the top right of the cell . I want to move it to the bottom right . I tried doing it via CSS i.e. vertical-align:bottom but it does not affect the first column.
/*Edit**/
Ok the css solution did not work so I moved the html structure around
Original :
<td class="fc-sat fc-widget-content fc-day6 fc-last">
<div>
<div class="fc-day-number">2</div>
<div class="fc-day-content">
<div style="position:relative"> </div>
</div>
</div>
</td>
New
<td class="fc-sat fc-widget-content fc-day6 fc-last">
<div>
<div class="fc-day-content">
<div style="position:relative"> </div>
</div>
</div>
<div class="fc-day-number">2</div>
</td>
'
As you can see I have moved the .fc-day-number div outside and added vertical-align:bottom to the td . This works but now the height resize of the cells does not work
You can edit the fullcalendar.css to add these settings to the existing tags:
.fc-widget-content {
position: relative;
}
.fc-day-number {
position: absolute;
right: 0;
bottom: 0;
}
This should move the day number to the bottom right corner.