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;
}
Related
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;
}
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 to align my textarea on the right of the page. So I have my textarea code as follows.
<td align="right" >
<textarea style="align:left" id="scriptevalresult" name="scriptevalresult" cols="64" rows="4"></textarea>
</td>
Because I have align="right" for the , my codemirror editor is set to the right of the editor.
how to resolve this.
You can add a CSS rule like .CodeMirror { text-align: left; } to override this.
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.