I am supporting a legacy application.
In the CSS there is the following rule:
.dashboard-panel table {
width: 100%;
}
So basically there are many panels, and for all tables in them the width is set to 100%.
Now the problem: in a dashboard panel I have put a calendar control from an external library (richfaces). This calendar control is using a table for displaying the days. And this width:100% is affecting the calendar table.
Example:
<div class="dashboard-panel">
<div id="content">
<table id="table1"> //this is ok
<tr>
<td>
<table id="richfacesCalendarTable"> //this not ok
</table>
</td>
</tr>
</table>
</div>
</div>
What is the proper solution here?
I don't want to go through every panel in this application and put a separate style there.
Mabye if you add something like that into end of your css:
.dashboard-panel table#richfacesCalendarTable {
width: your_desired_width_px !important;
}
or
.dashboard-panel table#richfacesCalendarTable {
width: auto !important;
display: table !important;
}
Hard to say for sure as this is only a small portion of HTML and CSS code you provided. There can be other elements that affects your result.
Related
I custom control has a text box and a icon next to the text box
return (
<div className="useFlex">
<TextInput></TextInput>
<div>
<Icon></Icon>
</div>
</div>
);
Style
.useFlex {
display: flex;
}
It works perfectly
But the issue is : when I use this custom control in my page, text box width is not getting expanded and it remains fixed.
<Table width="100%">
<tr>
<td><MyCustomControl> </MyCustomControl></td>
</tr>
</Table>
could you please tell me what I am missing here?
Try to add
.useFlex
{
display:flex;
flex-grow: 1;
}
I can't seem to get Firefox to cooperate with my 3 columns. It works with all the other browsers. Please have a look at http://www.usslittlerock.org/Marines_Workpage.html. I stripped everything off the page except the relevant CSS and HTML. I've worked with columns before with no problems but this time I used tables in the mix. The look of the layout needs to remain the same. I would actually prefer to eliminate the TABLES but I don't know how to keep the layout style with CSS alone. I've tried a number of different solutions from this site but none work. Thanks for any suggestions you can give.
http://caniuse.com/#search=column-gap reports, under known issues:
Firefox does not split tables into columns
Sorry.
Good new, you can keep you code mostly intact, but replace everything with div's. (this is the easiest way for me to explain it):
With your favorite editor do some simple text replace:
<table> --> <div class="table">
<th> --> <div class="th">
<tr> --> <div class="tr">
<td> --> <div class="td">
<tbody> --> <div class="tbody">
... and the equivalent </table> --> </div>, etc.
Change your CSS:
.marines table --> .marines div.table
.marines table th --> .marines div.th
.marines table td --> .marines div.td
Add a few new bits to your existing css:
.marines div.td {
....
display: inline-block;
width: 52%;
}
.marines div.th {
....
display: inline-block;
width: 52%;
}
.marines div.td:nth-of-type(2) {
width: 20%;
}
.marines div.td:nth-of-type(3) {
width: 25%;
}
and it will work in all browsers (This isn't a complete answer -- you'll still need to handle the Bold text in the headings and the index-Letters, but I think you get the idea.)
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.
so basically this is my layout. 3 row div (header content and footer)
what i want to do is emulate inside the content div a table format so i can display info as such
picture1 detail1
picture2 detail2
picture3 detail3
there are at least 10 rows of such info. doesn't have to be picture but can also be text
picture div will be about 150px while detail will be the rest. for the sake of example lets say 600px wrapper
i tried a few setups but it didn't come out the way i desired. in a table this would be a cinch but i would like a pure css table-less layout
something i tried but doesn't come out into columns
HTML
picture
item 1 goes here
picture2
item2 goes here
CSS
.itemwrapper{width:600px;}
picture{width:150px;float:left;}
item{width:450px;float:left;}
.clear {clear:both;}
please tell me how i can do this. jsfiddle example here - http://jsfiddle.net/4qvz220b/1/
table would be as simple as
<table width="500">
<tr>
<td width="150">picture1</td>
<td width="450">item1 goes here</td>
</tr>
<tr>
<td>
<td width="150">picture2</td>
<td width="450">item2 goes here</td>
</tr>
</table>
can someone point me in the right direction, i don't know much about css except what i can do through trial and error. the solution must be cross browser compatible css with no js or hacks etc.
please note that this is not to layout the entire page but just a two column content inside another div. if a unordered list can be used instead somehow, please let me know.
You almost got the structure right. You just need to use the right properties...
With css you can build the actual table structure using the display properties, as you have:
display: table
display: table-row
display: table-cell
And other, such as header and footer, if you use the right syntax.
So a basic example (without any style customization) would be something like:
FIDDLE LINK
<div class="mainwrapper">
<div class="itemwrapper">
<div class="picture">picture</div>
<div class="item">item 1 goes here</div>
</div>
<div class="itemwrapper">
<div class="picture">picture2</div>
<div class="item">item2 goes here</div>
</div>
</div>
css:
.mainwrapper {
display: table;
}
.itemwrapper {
display: table-row;
}
.picture, .item {
display: table-cell;
}
I am writing my first CSS lines. I want to align all rows of the same block together but I am not sure how to do this. This is what I am trying to do:
Using regular HTML I would have created a table with as many rows as days and 2 columns. However since CSS is about separating content from presentation I think this violates the principles of CSS. I am thinking that the needed code will have the form:
<div>
<div>days</div><div>hours</div>
</div>
but I am not sure how the CSS should look like. I don't even understand the CSS defines exactly where to load the different areas.
Thank you
Always use table for table structured data, so that it can be easily styled using css like the way you wanted.
Also Table will be easier to understand when one looks at the source!
What if the developer later wants to have a striped row or a hover over effect on a row or a column? so use table and leave all the styling part to be dealt in CSS.
here is a typical html and CSS for your need, view it in jsfiddle
HTML
<table id="schedule">
<tbody>
<tr>
<td>monday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>tuesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>wednesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>thursday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>friday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>saturday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>sunday</td>
<td>closed</td>
</tr>
</tbody>
</table>
CSS
#schedule td:first-of-type
{
text-transform: capitalize;
text-align: left;
padding-right: 10px;
}
#schedule td:last-of-type
{
text-align: center;
padding-left: 10px;
}
I have created a fiddle that should solve your problem.
Here is the link to the fiddle
Below is the HTML and CSS Code
HTML
<div id="outer">
<div class="push-left">Monday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Tuesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Wednesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Thursday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
</div>
CSS
#outer{
width:170px; //width of the container
}
.push-left{
float:left; //pushes the element to the left
}
.push-right{
float:right; //pushes the element to the right
}
.clearfix{
clear:both; //clears any applied floats
}
Hope this solves your problem!
Try
dayshours
Then CSS
.holder{
clear:both;
}
.test{
width:200px;
}
The holder will keep the lines separate
And the test will define 200px or what ever width you want to each field
Either that or use tables