I want to add such a Table:
{|
|+ style="border:solid 1px grey; margin-left: 2px; margin-right: 2px;"|'''Header of Image'''
! style="border:solid 2px grey;"|[[Datei:Image.png|link=LinkToGo]]
|}
Inside another table, to create a grid of Header+Image combos, the viewer can navigate with.
Problem now:
If I do it that way (with a Table of 2 columns and 1 row):
{|
|+
|-
| {|
|+ style="border:solid 1px grey; margin-left: 2px; margin-right: 2px;"|'''Die Welt'''
! style="border:solid 2px grey;"|[[Datei:NoImage_192.png|link=Main Page]]
|}|| {|
|+ style="border:solid 1px grey; margin-left: 2px; margin-right: 2px;"|'''Die Welt'''
! style="border:solid 2px grey;"|[[Datei:NoImage_192.png|link=Main Page]]
|}
|}
I'm ending up with this mess:
So… how would one do that stuff?
Make sure your table start/end tags are all on standalone lines.
Also, while the style parameters weren't related to your specific issue, you are probably better off using CSS and the TemplateStyles extension.
Related
I have a set of HTML elements that I need to style, which I can't change the structure of in any way (yeah, I know).
The HTML has a div that contains two nested spans. The div has padding and the overflow is hidden. The width of the div is set programatically and applied as an inline style.
I would like the text contained within the inner span to be clipped, but still retain the right hand padding as specified on the containing div.
After some research, it appears that the standard approach to this is to use a second nested div but, as I mentioned, I can't change the structure of the HTML.
Currently I have:
<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
Styled by the following CSS:
.c1 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
overflow: hidden;
}
.c1-inner {
// No relevant styles here yet
}
.c1-inner-2 {
// No relevant styles here yet
}
.c2 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
A jsFiddle is available here
I need to style the top "button" so that it looks like the second one only using CSS. I have reached the limits of my CSS skills and any help would be very much appreciated.
A simple fix. Most important bit: you can make a span have a display value of block rather than inline, which is its default.
Here's the relevant CSS you need and a working example:
.c1 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c1-inner {
overflow: hidden;
display: block;
}
.c2 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
We want this<br>
<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
<br>
but cannot change the structure of the html!
I am generating a table using angular material's div layout containers. My question is simple, how do I collapse the div's borders? Please check out my jsfiddle of what I have done
Jsfiddle
HTML code below. Appreciate any guidance thanks.
<div ng-app="myApp" ng-controller="mainCtrl">
<script type="text/ng-template" id="/template">
<button ng-click="testFn()">Test</button>
<div layout="row">
<div flex ng-repeat="col in column"><span>HEADER{{$index}}</span>
<div layout="column">
<div flex style="border: 1px solid black;" ng-repeat="row in [1,2,3]">{{$index}}</div>
</div>
</div>
</div>
</script>
<form-table table-layout=tableLayout|filter:{table_id:1}></form-table>
</div>
My code as follows:
Here is a modified version of your jsFiddle:
http://jsfiddle.net/ccf0sphf/13/
The result is obtained not using border-collapse which requires displaying <DIV>s as a table but instead with a mix of CSS combinators (> child selector) and ng-class:
div.col {
border-top: solid 1px black;
}
div.col > div.box {
border-bottom: solid 1px black;
border-right: solid 1px black;
}
the class below is used in an ng-class to apply only to the first column:
div.col-first {
border-left: solid 1px black;
}
This trick is necessary because there is a <SPAN> element as first element in the column, otherwise we could use a first-child pseudo-element to obtain the same result.
I've got some CSS that looks like
.drugCard
{
width:280px;
height:375px;
border: 10px solid;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
text-align:center;
float:left;
}
.drugCard span
{
display:block;
border-bottom:2px solid #ccc;
font-size:xx-large;
}
.drugCard img
{
padding:2px 2px 2px 2px;
border: 1px solid black;
clear:both;
display:inline-block;
}
with output that looks like
You can see in the right picture were there are three pictures the date is present at the bottom of the pictures. This is because those three pictures fill up the div completely. What CSS do I need to make the date always appear on a new line?
These are .NET-generated controls so I would prefer a one-liner CSS if there is one vs. manually editing the HTML. Currently the date you see is added as literal text to the page.
EDITED to add markup:
<div class="drugCard" style="border-color:Chocolate;">
<span>BISCOLAX</span><img src="Images/Nausea.jpg" style="height:75px;width:75px;" />11/19/2012 12:00:00 AM
</div><div class="drugCard" style="border-color:DarkOrange;">
<span>RENAGEL</span><img src="Images/Pain.jpg" style="height:75px;width:75px;" /><img src="Images/Sleepiness.jpg" style="height:75px;width:75px;" /><img src="Images/UpsetStomach.jpg" style="height:75px;width:75px;" />11/9/2012 12:00:00 AM
</div><div class="drugCard" style="border-color:MediumAquamarine;">
<span>VYVANSE</span><img src="Images/Sleepiness.jpg" style="height:75px;width:75px;" /><img src="Images/Fever.jpg" style="height:75px;width:75px;" /><img src="Images/Nausea.jpg" style="height:75px;width:75px;" />1/29/2013 12:00:00 AM
</div>
Put a around your date value and set its clear value to both in css.
HTML:
<span class="date">11/9/2012 12:00:00 AM</span>
CSS:
.date{
clear: both;
}
P.S.: As you have already set some of the properties of span when you used it for titles, you need to clear those properties for your time element OR use any other element instead of span.
Without knowing what your markup looks like, you need to use clear: both; on your date element.
Clear will push the cleared element below any floats that precede it in the markup.
I have code as shown in http://jsfiddle.net/Lijo/PJcZQ/. It has tow divs with similar content “GROUP1” and “GROUP2” – only difference being the following
GROUP 1
<div class="secondTextBox">
<select name="ctl00$detailContentPlaceholder$ddlStatus" id="detailContentPlaceholder_ddlStatus" class="dropdownItem" style="width: 120px;">
</select>
</div>
GROUP 2
<div class="secondTextBox">
<input name="ctl00$detailContentPlaceholder$txtVal2" type="text" id="detailContentPlaceholder_txtVal2" style="width: 120px;" />
</div>
CSS
.searchValuesDiv
{
padding: 10px 0 0 20px;
margin:20px 0 20px 0px;
border:1px solid Cyan;
overflow:auto;
}
Group 1 is not behaving as expected – the div containing the button starts from a wrong position.
Note: This issue is not reproducible while seeing from jsFiddle. This can be reproduced when a HTML page is created with that code.
Why is it behaving so? [Can you explain why it was not a problem when I used "Input" element?]
How can we correct it?
You seem to be using floats. If you want the .btnSearchDiv element to start in a “new line”, just add a overflow: hidden; to the .searchLine elements. Without that, those elements are collapsed because they contain floating elements.
There is a missing float in the .searchLine.. I hope it fix your problem
Change the css to this:
.searchLine
{
float:left;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}
or
.searchLine
{
clear:both;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}
I'm using Chose plugin and was styling it, but met this issue:
It is caused by this generate HTML:
<div id="sel1WY_chzn" class="chzn-container chzn-container-single" style="width: 300px;>
//this is width of container
<div class="chzn-drop" style="left: -9000px; width: 298.333px; top: 22.3333px;">
//this is html of dropdown
How can I fix it ? Also it could be caused by additional border, yes ?
Sorry, I managed do find it very fast)
ADDED
.chzn-container-single .chzn-single {
border: 1px solid rgba(98,141, 40, 0.5);
}
DELETE
.chzn-container {
border: 1px solid rgba(98,141, 40, 0.5);}