Search Results

Search found 17528 results on 702 pages for 'row height'.

Page 2/702 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Flex / Flash builder : no returning data using database

    - by Tristan
    Hello, i'm following some flex tutorials everything's working as wanted expected for one thing : When i use my function getServerByBrand($brand) there is no returned data into my datagrid and i don't know why because it uses the same schema as getAllserver() which is working . I don't know whether it's cause by the function itselft or the configuration in flash builder : protected function RechercheGSP_clickHandler(event:MouseEvent):void { getServerByBrandResult.token = dbClass.getServerByBrand(SearchInput.text); } Here's what i've got in Data/Services : getServerByBrand(brand : string) : Object And finally the function : public function getServerByBrand($brand) { $stmt = mysqli_prepare($this->connection, "SELECT DISTINCT * FROM $this->tablename where GSP_nom=? "); $this->throwExceptionOnError(); mysqli_stmt_execute($stmt); $this->throwExceptionOnError(); $rows = array(); mysqli_stmt_bind_result($stmt, $row->idServ, $row->GSP_nom, $row->IPserv, $row->port, $row->tickrate, $row->membre, $row->nomPays, $row->finContrat, $row->actif, $row->timestamp, $row->type, $row->jeux, $row->slot, $row->ipClient, $row->essai, $row->reussite, $row->echec, $row->valide, $row->email); while (mysqli_stmt_fetch($stmt)) { $row->timestamp = new DateTime($row->timestamp); $rows[] = $row; $row = new stdClass(); mysqli_stmt_bind_result($stmt, $row->idServ, $row->GSP_nom, $row->IPserv, $row->port, $row->tickrate, $row->membre, $row->nomPays, $row->finContrat, $row->actif, $row->timestamp, $row->type, $row->jeux, $row->slot, $row->ipClient, $row->essai, $row->reussite, $row->echec, $row->valide, $row->email); } mysqli_stmt_free_result($stmt); mysqli_close($this->connection); return $rows; } I tested the settings with configure return type and it tells me : "the operation returned a primitive "object". test settings : Parameters (brand) / Input type (String) / Value (woop) To conclude, there is no returned object at all. Do you see the problem ? Thanks

    Read the article

  • adding header row to gridview won't allow you to save the last item row

    - by Lex
    I've modified my GridView to have an extra Header row, however that extra row has caused my grid view row count to be incorrect. Basically, when I want to save the Gridview now, it doesn't recognize the last item line. In my current test I have 5 Item Lines, however only 4 of them are being saved. My code for creating the additional header Line: protected void gvStatusReport_RowDataBound(object sender, GridViewRowEventArgs e) { // This grid has multiple rows, fake the top row. if (e.Row.RowType == DataControlRowType.Header) { SortedList FormatCells = new SortedList(); FormatCells.Add("1", ",6,1"); FormatCells.Add("2", "Time Spent,7,1"); FormatCells.Add("3", "Total,2,1"); FormatCells.Add("4", ",6,1"); GetMultiRowHeader(e, FormatCells); } } The function to create a new row: public void GetMultiRowHeader(GridViewRowEventArgs e, SortedList GetCels) { GridViewRow row; IDictionaryEnumerator enumCels = GetCels.GetEnumerator(); row = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal); while (enumCels.MoveNext()) { string[] count = enumCels.Value.ToString().Split(Convert.ToChar(",")); TableCell cell = new TableCell(); cell.RowSpan = Convert.ToInt16(count[2].ToString()); cell.ColumnSpan = Convert.ToInt16(count[1].ToString()); cell.Controls.Add(new LiteralControl(count[0].ToString())); cell.HorizontalAlign = HorizontalAlign.Center; row.Cells.Add(cell); } e.Row.Parent.Controls.AddAt(0, row); } Then when I'm going to save, I loop through the rows: int totalRows = gvStatusReport.Rows.Count; for (int rowNumber = 0; rowNumber < totalRows; rowNumber++) { However the first line doesn't seem to have any of the columns that the item row has, and the last line doesn't even show up. My problem is that I do need the extra header line, but what is the best way to fix this?

    Read the article

  • Child divs not taking parent height

    - by Hiral
    I want height of children div .cell to take up 100% height of parent. But it is not happening. HTML: <div class="header"> header </div> <div class="wrapper"> <div class="padding"> <div class="table bg"> <div class="cell"> hello world </div> <div class="cell"> dummy text </div> </div> </div> </div> <div class="footer"> footer </div> CSS: html,body{height:100%;} body{margin:0;padding:0;} .footer,.header{background:black;height:30px;color:white;} .wrapper{min-height:calc(100% - 60px);height:auto !important;} .padding{padding:20px;} .table{display:table;width:100%;} .cell{display:table-cell;} .bg{background:#ccc;} I think it is not happening because I have .wrapper{min-height:calc(100% - 60px);height:auto !important;} It happens if I change .wrapper to .wrapper{height:calc(100% - 60px);} then it is happening. Here is the fiddle.

    Read the article

  • minimum height problem

    - by Hellnar
    Hello, assume I have a such html order <div id="header">>Header(logo, navigation menus etc)will be here, fixed height </div> <div id="content"> Dynamic content with different length will be here. </div> <div id="footer"> Footer of the page here, fixed height </div> Now as you can see, it is only the content div which will be changing in size as the length changes. I want to make sure the screen is used even if the height of the content is less than to fill the whole. (in other words minimum height of the content will be screen (height in pixel) - ( (height of header) + (height of footer) ) Now I can see that min-widht can be used but it is not supported with IE, how can I achieve this issue ?

    Read the article

  • can't get height of object in chrome

    - by Cinaird
    i want to get the height property of a object: thisImage = $('#topContent img').get(index); so long no problem, but then i want to get the height like this: thisImage.height; i thought it was equvivilent to: thisImage.height(); or: thisImage.css("height"); but neither does work for me. And the greatest problem is that thisImage.height; Dose not work in chrome. Have i missed something or is this a known bug? is there another way to get the height in chrome?

    Read the article

  • Transitioning accordions from small height to full height with CSS

    - by arkanciscan
    I am building an accordion list and I want it to animate open and closed using a CSS -webkit-transition:. The animation is triggered by an event handler that simply toggles the .open class on and off. The problem is that when I click it, the animation goes from closed height to 0px height then jerks back to full height instead of smoothly animating to full height. HTML <ul class="accordion"> <li>Foo <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis leo sit amet justo vulputate volutpat. Suspendisse potenti. Aliquam aliquet justo ut turpis suscipit adipiscing.</p> </li> <li class="open">Baz <p>Ut velit magna, sagittis at blandit accumsan, vestibulum et dolor. Aliquam elit ante, congue vel pharetra ut, ultricies non est. In hac habitasse platea dictumst. Donec velit ligula, sodales a imperdiet non, sagittis id mauris.</p> </li> <li>Bar <p>Cras sit amet gravida lacus. Nulla consequat molestie nunc nec fermentum. Donec lobortis pretium quam sit amet scelerisque.</p> </li> </ul>? Javascript $('.accordion').delegate('li', 'click', function(li){ $(this).toggleClass('open'); }); Css .accordion li.open{ -webkit-transition: height 1s; } .accordion li:not(.open){ height: 1em; -webkit-transition: height 1s; } ? Try it on JSFiddle and see what I mean. I've already figured out how to make it work, but it requires setting an explicit height on the .open class. The accordions have variable height however, and creating an explicit selector for each one is obtrusive and unmaintainable. Can anyone give me a better solution than this? Here it is working with an explicit height that doesn't fit the content

    Read the article

  • jQuery Clone and add row to last row

    - by user198880
    I want to add a row whenever the user click on the new button.I want to clone the row "tRow0" and add it to the last row of the table "tblEquipment tbody".I wrote a JavaScript function for adding the row(AddEquipment).The problem is that the row is not getting added in the last row. clone row : tRow0 last row : tRow1 Actually the new row must added after the "tRow1" row.But the new row get added below "trActivity1_2" row.Please provide me the solution. my javascript function: function AddEquipment() { var row = jQuery('#tRow0').clone(true).show().insertAfter('#tblEquipment tbody>tr:last'); var index = document.getElementById("hdnMaxEqpId").value; jQuery("#tblEquipment tbody>tr:last").attr("id", "tRow" + index) jQuery("td:eq(0) input", row).attr("id", "chkEqp" + index); jQuery("td:eq(1) div:eq(0)", row).attr("id", "divEqpName" + index); jQuery("td:eq(1) input:eq(0)", row).attr("id", "hdnWODefEqpId" + index).attr("name", "hdnWODefEqpId" + index); jQuery("td:eq(1) input:eq(1)", row).attr("id", "hdnEquipmentId" + index).attr("name", "hdnEquipmentId" + index).attr("onpropertychange",""); jQuery("td:eq(1) input:eq(2)", row).attr("id", "txtEquipment" + index).attr("name", "txtEquipment" + index); jQuery("td:eq(1) img", row).attr("id", "imgshowEquipmentTree" + index).attr("onclick", ""); jQuery("td:eq(1) div:eq(1)", row).attr("id", "divEqpImage" + index); jQuery("td:eq(2) div", row).attr("id", "divEqpHierarchy" + index); jQuery("td:eq(3) textarea", row).attr("id", "txtEqRemarks" + index); jQuery("td:eq(4) img", row).attr("id", "imgEqAttachment" + index); } my aspx page: <table id="tblEquipment"> <thead> <tr> <th> </th> <th> Equipment</th> <th> Hierarchy</th> <th> Remarks</th> <th> Attachment</th> <th> Total Cost</th> </tr> </thead> <tbody id="tbEquipment"> <tr id="tRow0" class="trChildItem"> <td> <input id="chkEqp0" name="chkEqp0" type="checkbox" /> </td> <td> <div id="divEqpName0"> <input id="hdnWODefEqpId0" name="hdnWODefEqpId0" type="hidden" value="0" /> <input id="hdnEquipmentId0" name="hdnEquipmentId0" onpropertychange="AutoSaveEquipment(0);" type="hidden" value="0" /> <input id="txtEquipment0" class="clsSpText" name="txtEquipment0" readonly /> </div> <div id="divEqpImage0"> </div> </td> <td> <div id="divEqpHierarchy0"> &nbsp;</div> </td> <td> <textarea id="txtEqRemarks0" class="clsSpTextArea" cols="20" name="txtEqRemarks0" rows="1"></textarea> </td> <td> </td> </tr> <tr id="tActMaster0" class="trInnerChildItem"> <td> </td> <td colspan="5"> <div id="divActivitiesdetails0"> </div> </td> </tr> <tr id="tRow1" class="trChildItem"> <td> <input id="chkEqp1" runat="server" type="checkbox" /> <div id="divEqpEdit1"> </div> </td> <td> <div id="divEqpName1"> <input id="hdnWODefEqpId1" runat="server" type="hidden" value="7" /> <input id="hdnEquipmentId1" runat="server" type="hidden" value="4" /> <div id="divEqp1"> e2</div> <div id="divEqpImage1"> <a id="activiy1" onclick="HideActivities(1)"> </div> </td> <td> <div id="divEqpHierarchy1"> Equipment--&gt;e2</div> </td> <td> <div id="divEqpRemarks1"> Remarks</div> </td> <td> <div> </div> </td> <td> <div> $0.00</div> </td> </tr> <tr id="tActMaster1" class="trInnerChildItem" jquery1275984958765="3"> <td> </td> <td colspan="5"> <div id="divActivitiesdetails1"> <div id="divActivityMaster"> <table> <thead> <tr> <th> <a onclick="ActivityPopUp(0,1)"> </a></th> <th> Activity</th> <th> Description</th> <th> Duration</th> </tr> </thead> <tbody id="tbActivity"> <tr id="trActivity1_1" class="trChildItem" ondblclick="ActivityPopUp(3,1)" onmouseleave="HideActEditDiv('1_1')" onmouseover="ShowActEditDiv('1_1',7,1)"> <td> <div id="divActEdit1_1"> </div> </td> <td> <input id="hdnDefActivityId1_1" runat="server" type="hidden" value="33333" /> <div id="divActivityName1_1"> Act1</div> </td> <td> <div id="divActivityDesc1_1"> Ac1</div> </td> <td> <div id="divActivityDuration1_1"> 1&nbsp;Day</div> </td> </tr> <tr id="trActivity1_2" class="trChildItem" ondblclick="ActivityPopUp(3,1)" onmouseleave="HideActEditDiv('1_2')" onmouseover="ShowActEditDiv('1_2',7,1)"> <td> <div id="divActEdit1_2"> </div> </td> <td> <input id="hdnDefActivityId1_2" runat="server" type="hidden" value="4" /> <div id="divActivityName1_2"> Act2</div> </td> <td> <div id="divActivityDesc1_2"> Act2Desc</div> </td> <td> <div id="divActivityDuration1_2"> 1&nbsp;Day</div> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </tbody> </table>

    Read the article

  • make img height 100% of td

    - by kristina childs
    I'm creating an HTML email and since background images can't be used on anything but <body> thought I could get around this by making a border image 100% height within a cell. Perhaps it was wishful thinking? I've searched at the solutions that worked in the past no longer work in modern browsers. Is there any special trick to making this happen without setting a hard height for the cell? Here are the things I've tried so far: <td width="25" style="margin:0; padding:0;"> <img src="http://www.mysite.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" /> </td> stretches the image to 100% height of the entire table (even though the table is nested in a <td width="25" height="100%" style="margin:0; padding:0;"> <div style="height:100%; diplay: block;"> <img src="http://www.mysite.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" /> </div> </td> ditto <td width="25" height="1" style="margin:0; padding:0;"> <div style="height:100%; diplay: block;"> <img src="http://www.mysite.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" /> </div> </td> setting a smaller td size does not force it to strectch as expected. bummer.

    Read the article

  • How to occupy all the space in a div when working with min-height header / footer

    - by javacoder
    I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom. What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width. Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one. What is the trick to make the left and right div take up all the space within the content div? The layout1.css is the original one. I just added two entries: #left and #right layout1.css: /** * 100% height layout with header and footer * ---------------------------------------------- * Feel free to copy/use/change/improve */ html,body { margin: 0; padding: 0; height: 100%; /* needed for container min-height */ background: gray; font-family: arial, sans-serif; font-size: small; color: #666; } h1 { font: 1.5em georgia, serif; margin: 0.5em 0; } h2 { font: 1.25em georgia, serif; margin: 0 0 0.5em; } h1,h2,a { color: orange; } p { line-height: 1.5; margin: 0 0 1em; } div#container { position: relative; /* needed for footer positioning*/ margin: 0 auto; /* center, not in IE5 */ width: 750px; background: #f0f0f0; height: auto !important; /* real browsers */ height: 100%; /* IE6: treaded as min-height*/ min-height: 100%; /* real browsers */ } div#header { padding: 1em; background: #ddd url("../csslayout.gif") 98% 10px no-repeat; border-bottom: 6px double gray; } div#header p { font-style: italic; font-size: 1.1em; margin: 0; } div#content { padding: 1em 1em 5em; /* bottom padding for footer */ } div#content p { text-align: justify; padding: 0 1em; } div#footer { position: absolute; width: 100%; bottom: 0; /* stick to bottom */ background: #ddd; border-top: 6px double gray; } div#footer p { padding: 1em; margin: 0; } // added the following: div#left { border: 1px solid red; width: 200px; float: left; min-height: 100%; height: 100%; padding-left: 10px; margin-right: 10px; } div#right { border: 1px solid blue; float: left; min-height: 100%; height: 100%; padding-left: 10px; margin-right: 10px; } layout.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Layout - 100% height</title> <link rel="stylesheet" type="text/css" href="layout1.css" /> </head> <body> <div id="container"> <div id="header"> <h1>header</h1> </div> <div id="content"> <div id="left"> left column </div> <div id="right"> right column </div> </div> <div id="footer"> <p> footer </p> </div> </div> </body>

    Read the article

  • Using max-width = 100% and max-height = 100% on an image, calculate the display width/height

    - by NatalieMac
    I am creating a slideshow for images of various sizes to display centered vertically and horizontally within a canvas area. In my CSS, I set the width and height of the image to 100% so that each image would proportionally fill the canvas. I want the canvas to auto-size itself to fit within the viewer's screensize as the original size of the images is quite large (up to 800 pixels tall). I am using jQuery 1.4, and using the height of the image to calculate the top value for absolute positioning it to the middle of the canvas. I have tried using jQuery to get the .height(), innerHeight(), and outerHeight(), but it always gets the full size of the image. I extracted the DOM element from the jQuery object and tried using .width, .offsetWidth, and .clientWidth, but that too always seems to return the full size of the image. Firebug displays the correct dimensions, so I know there's some way of calculating the actual display height of the image, I just can't figure out what it is. How do you get the actual display height of an image if you've set max-height = 100%? I didn't want to have to calculate and set the height of each image in the js, but if I have to, I will. It just seems like I should be able to set the canvas size and have the images auto-adjust.

    Read the article

  • cellForRowAtIndexPath: crashes when trying to access the indexPath.row/[indexPath row]

    - by Emil
    Hey. I am loading in data to a UITableView, from a custom UITableViewCell (own class and nib). It works great, until I try to access the indexPath.row/[indexPath.row]. I'll post my code first, it will probably be easier for you to understand what I mean then. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"CustomCell"; CustomCell *cell = (CustomCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil){ NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil]; for (id currentObject in topLevelObjects){ if ([currentObject isKindOfClass:[CustomCell class]]){ cell = (CustomCell *) currentObject; break; } } } NSLog(@"%@", indexPath.row); // Configure the cell... NSUInteger row = indexPath.row; cell.titleLabel.text = [postsArrayTitle objectAtIndex:indexPath.row]; cell.dateLabel.text = [postsArrayDate objectAtIndex:indexPath.row]; cell.cellImage.image = [UIImage imageWithContentsOfFile:[postsArrayImg objectAtIndex:indexPath.row]]; NSLog(@"%@", indexPath.row); return cell; } The odd thing is, it does work when it loads in the first three cells (they are 125px high), but crashes when I try to scroll down. The indexPath is always avaliable, but not the indexPath.row, and I have no idea why it isn't! Please help me.. Thanks. Additional error code: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSCFString objectAtIndex:]: unrecognized selector sent to instance 0x5d10c20' *** Call stack at first throw: ( 0 CoreFoundation 0x0239fc99 __exceptionPreprocess + 185 1 libobjc.A.dylib 0x024ed5de objc_exception_throw + 47 2 CoreFoundation 0x023a17ab -[NSObject(NSObject) doesNotRecognizeSelector:] + 187 3 CoreFoundation 0x02311496 ___forwarding___ + 966 4 CoreFoundation 0x02311052 _CF_forwarding_prep_0 + 50 5 MyFancyAppName 0x00002d1c -[HomeTableViewController tableView:cellForRowAtIndexPath:] + 516 [...])

    Read the article

  • UITableView not responding to row selection until a different row is selected

    - by Larry Fransson
    This is driving me nuts. I have searched on everything I can think of to find a solution but haven't found one yet. I've got a UITableView that uses custom cells. The accessory is the detail disclosure button. I would like the cell to respond to either row selection or the disclosure button being tapped. It responds to the disclosure button just as you would expect. But selecting the row is a different story. When I select the row, it highlights, but nothing happens until I tap a different row. Then the previously selected row does what it was supposed to do, which is to create and push a new view controller for that row. If I tap a single row five times and then tap a different row, it then creates and pushes five view controllers for that first row. It does this both in the simulator and on the device. What's really maddening is that I have another tableview in the same application that responds correctly to row selection or tapping the detail disclosure button. I can't find anything I've done differently between the two. Has anyone seen this before?

    Read the article

  • Why does obj.getBounds().height give a larger height than obj.height?

    - by TC
    I'm new to Flash and ActionScript, but managing quite nicely. One thing that is continuously getting in my way are the width and height properties of DisplayObject(Container)s. I'm finally starting to get my head around them and learned that the width and height of a Sprite are determined solely by their contents for example. I do not understand the following though: I've got a Sprite that I add a bunch of Buttons to. The buttons all have a height of 30 and an y of 0. As such, I'd expect the height of the containing Sprite to be 30. Surprisingly, the height is 100. The Adobe documentation of the height property of a DisplayObject states: Indicates the height of the display object, in pixels. The height is calculated based on the bounds of the content of the display object. Apparently, the 'bounds' of the object are important. So I went ahead and wrote this little test in the Sprite that contains the Buttons: for (var i:int = 0; i < numChildren; ++i) { trace("Y: " + getChildAt(i).y + " H: " + getChildAt(i).height); trace("BOUNDS H: " + getChildAt(i).getBounds(this).height); } trace("SCALEY: " + scaleY + " TOTAL HEIGHT: " + height); This code iterates through all the objects that are added to its display list and shows their y, height and getBounds().height values. Surprisingly, the output is: Y: 0 H: 30 BOUNDS H: 100 ... (5x) SCALEY: 1 TOTAL HEIGHT: 100 This shows that the bounds of the buttons are actually larger than their height (and the height that they appear to be, visually). I have no clue why this is the case however. So my questions are: Why are the bounds of my buttons larger than their height? How can I set the bounds of my buttons so that my Sprite isn't larger than I'd expect it to be based on the position and size of the objects it contains? By the way, the buttons are created as follows: var control:Button = new Button(); control.setSize(90, 30); addChild(control);

    Read the article

  • Beginner question about CSS and layout and height

    - by vtortola
    Hi, I'm trying to create a very simple page that contains a container, a header, a left column and a footer: [containter] [header /] [content /] [leftBar /] [footer /] [/containter] (Sorry, I cannot paste the code properly, only appears the tag "body" and the rest disapears :S ... ) As you can see, very simple stuff. I want to use the 100% of the height, as I can do with the width, but I simply don`t get it work :S At his moment I'm using min-height, but how could I use the height:100% ? What I like is that the footer is always visible, and you scroll the content. This is what I have till the moment: body { font-family: Verdana; font-size: 0.8em; background-color:#f1f1f1; } container { border:solid 2px Black; position:absolute; left:10%; width:80%; margin:auto; } header { height:20px; background: #DDDDDD; } leftBar { width: 20%; background: #669966; min-height:600px; postion:absolute; top:20px; bottom:20px; } content { float:right; background-color: #cdcde6; position:absolute; left:20%; right:0px; bottom:20px; top:20px; padding:5px; } footer { position:absolute; height:20px; } I'm reading a book about CSS, but I still don't get the part about the height :S Thanks in advance.

    Read the article

  • Changing CSS height property removes anchors?

    - by JMan
    I am working on a standard header/navigation for my website. I started with having a CSS "height" value of 100% for the html, body elements but this resulted in the wrong layout. However, when I change the CSS height property from "100%" to "auto", the layout is correct, but I lose the anchors in the navigation. Why is this? Here's my CSS: html,body { height: auto; /* This is the only property that I'm toggling */ margin: 0; } body { margin: 0; min-width: 978px; font: 12px/16px Arial, Helvetica, sans-serif; color: #000; background: #000001 url('../images/bg-body.jpg') no-repeat 50% 0; } #nav { position: relative; float: left; margin: 0; padding: 0 2px 0 271px; list-style: none; background: url('../images/sep-nav.gif') no-repeat 100% 0; } #nav li { float: left; padding: 11px 0 0 2px; height: 35px; width: 128px; line-height: 22px; font-size: 18px; text-align: center; background: url('../images/sep-nav.gif') no-repeat 0 -1px; display: inline; } #nav li a {color: #FFFEFE;} ..... I compared the computed CSS in Firebug when the html, body height property was set to "auto" vs. "100%" and they were the same. Can somebody please shed some light on how retain the anchors in the navigation while setting height to "auto"? Thanks for your help.

    Read the article

  • CSS: auto height on containing div, 100% height on background div inside containing div.

    - by user47831
    The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height). I want the background container, which is a sister div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks. The background and container divs have 100% width, the content container doesn't. HTML: <div id="container"> <div id="content"> Some long content here .. </div> <div id="backgroundContainer"> <div id="someDivToShowABackground"/> <div id="someDivToShowAnotherBackground"/> </div> </div> CSS: #container { height:auto; width:100%; } #content { height: auto; width:500px; margin-left:auto; margin-right:auto; } #backgroundContainer { height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport. }`

    Read the article

  • CSS: auto height on containing div, 100% height on background div inside containing div.

    - by user47831
    The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height). I want the background container, which is a sister div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks. The background and container divs have 100% width, the content container doesn't. HTML: <div id="container"> <div id="content"> Some long content here .. </div> <div id="backgroundContainer"> <div id="someDivToShowABackground"/> <div id="someDivToShowAnotherBackground"/> </div> </div> CSS: container ` container { height:auto; width:100%; } content { height: auto; width:500px; margin-left:auto; margin-right:auto; } backgroundContainer { height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport. }`

    Read the article

  • Little CSS problem with Auto height and nested div's

    - by GeekDrop.com
    So I'm finally learning my way around CSS more and have run into a small problem. I have a container div, with a few divs inside of it, one of them is a bit if text (which can be a random height) and an image that will have a MAX height of 200px. I am using a dotted/colored background behind them that needs to auto expand to the height of whichever is the tallest, either the text or the image. Right now when i use height:auto on the container div it works perfect for the random height text: Example Screenshot But it's only adjusting according to the text's height; if the image is taller than the text, the image overflows the bottom of the background dotted/colored box. Example Screenshot The CSS I'm using currently is this: h1 div#like_detailed { margin: 0; font-size: 1.1em; width: 700px; } #details-image img { border: none; clear: left; float: right; margin: -45px 0 0 0; max-height: 200px; padding: 0 7px 0 10px; } #deets-container { background-color: #FEF; border: #190AE7 1px dotted; height: auto; margin-top: 0; margin-bottom: 30px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 0; } And the HTML for it is this: <div id="deets-container" class="rounded"> <!-- Button --> <div class="likebtnframe">(some code)</div> <!-- Button --> <div class="tweetbtnframe">(some code)</div> <!-- Button --> <ul id="share"> <li><a name="share">(some code)</a></li> </ul> <!-- Submitted By --> <div class="submitter_detailed"><span class="submitter-color smalltext">(some code)</span> (some code)</div> <!-- Image --> <div id="**details-image**">(some code)</div> <!-- Like / Quote --> <h1 id="**like_detailed**">(some code)</h1> </div> I have a feeling this is pretty easy but I'm running out of time to sort it out on my own. Anyone?

    Read the article

  • ASP.NET GridView second header row to span main header row

    - by Dana Robinson
    I have an ASP.NET GridView which has columns that look like this: | Foo | Bar | Total1 | Total2 | Total3 | Is it possible to create a header on two rows that looks like this? | | Totals | | Foo | Bar | 1 | 2 | 3 | The data in each row will remain unchanged as this is just to pretty up the header and decrease the horizontal space that the grid takes up. The entire GridView is sortable in case that matters. I don't intend for the added "Totals" spanning column to have any sort functionality. Edit: Based on one of the articles given below, I created a class which inherits from GridView and adds the second header row in. namespace CustomControls { public class TwoHeadedGridView : GridView { protected Table InnerTable { get { if (this.HasControls()) { return (Table)this.Controls[0]; } return null; } } protected override void OnDataBound(EventArgs e) { base.OnDataBound(e); this.CreateSecondHeader(); } private void CreateSecondHeader() { GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal); TableCell left = new TableHeaderCell(); left.ColumnSpan = 3; row.Cells.Add(left); TableCell totals = new TableHeaderCell(); totals.ColumnSpan = this.Columns.Count - 3; totals.Text = "Totals"; row.Cells.Add(totals); this.InnerTable.Rows.AddAt(0, row); } } } In case you are new to ASP.NET like I am, I should also point out that you need to: 1) Register your class by adding a line like this to your web form: <%@ Register TagPrefix="foo" NameSpace="CustomControls" Assembly="__code"%> 2) Change asp:GridView in your previous markup to foo:TwoHeadedGridView. Don't forget the closing tag. Another edit: You can also do this without creating a custom class. Simply add an event handler for the DataBound event of your grid like this: protected void gvOrganisms_DataBound(object sender, EventArgs e) { GridView grid = sender as GridView; if (grid != null) { GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal); TableCell left = new TableHeaderCell(); left.ColumnSpan = 3; row.Cells.Add(left); TableCell totals = new TableHeaderCell(); totals.ColumnSpan = grid.Columns.Count - 3; totals.Text = "Totals"; row.Cells.Add(totals); Table t = grid.Controls[0] as Table; if (t != null) { t.Rows.AddAt(0, row); } } } The advantage of the custom control is that you can see the extra header row on the design view of your web form. The event handler method is a bit simpler, though.

    Read the article

  • Height in IE is displaying diffrent to firefox

    - by user268707
    I have a problem with displaying a set height in ie. In my css I have set a height for my sidebar div as 2150px; which it displays fine in firefox but does not display the full height in ie. How can I get ie to display the height I have set in ie? Thanks in advance The source code is below #sidebar_newspr{ width:160px; min-height:2150px; margin-top:1px; margin-right:2px; border-right-style:solid; border-right-color:#900; border-right-width:1px; float:left; } #sidebar_newspr a{ text-decoration:none; color:#FFF; font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif; } #sidebar_newspr a:hover{ color:#900; }

    Read the article

  • jQuery: How can I animate to a taller height with the height being added to the top of the element?

    - by Jannis
    Hi, I have a simple problem but I am not sure how to solve it. Basically I have some hidden content that, once expanded, requires a height of 99px. While collapsed the element holding it section#newsletter is set to be 65px in height. LIVE EXAMPLE: http://dev.supply.net.nz/asap-finance-static/ On the click of a#signup_form the section#newsletter is expanded to 99px using the following jQuery: $('#newsletter_form').hide(); // hide the initial form fields $('#form_signup').click(function(event) { event.preventDefault(); // stop click // animate $('section#newsletter').animate({height: 99}, 400, function() { $('#newsletter_form').show(300); }) }); All this works great except for the fact that this element sits in a sticky footer so its initial height is used to position it. Animating the height of this element causes scrollbars on the browser, because the 34px added are added to the bottom of the element, so my question: How can I add these 34px to the top of the element so the height expands upwards into the body not downwards? Thanks for reading, I look forward to your help and suggestions. Jannis

    Read the article

  • CSS3 transition on table row using height property

    - by Alexis Leclerc
    I have an HTML table displaying some information with a few rows. On each row, the user can click to reveal some additional rows that contains information related to the clicked row. Something like this: While the additional rows are being created with an AJAX request, a loading row is inserted right after the clicked row : Currently, everything works perfectly (drill down style), but I would like to add some animation to the loading row. I found a question ( this one ) that has a JSFiddle showing kind of what I want ( this fiddle ). I tried to implement something similar with CSS3 transitions, but I can't get it to work. Here's my simulated attempt ( fiddle only for deployment of the loading row ) using these transitions : -webkit-transition: height 0.1s ease-in-out; -moz-transition: height 0.1s ease-in-out; -ms-transition: height 0.1s ease-in-out; -o-transition: height 0.1s ease-in-out; transition: height 0.1s ease-in-out; Any thought on why my fiddle doesn't do any animation? Any other methods you would propose? Thanks!

    Read the article

  • CSS challenge: Two background images, centered column with fixed with, min-height 100%

    - by laurent
    In a nutshell I need a CSS solution for the following requirements: Layout: One centered column with fixed width and a minimum height of 100% Two vertically repeated background images behind the centered column, one aligned to the left, one aligned to the right Cross browser compatibility A little more details Today a new requirement for my current web site project came up: A background image with gradients on the left and right side. The challenge is now to specify two different background images while keeping the rest of the layout spec. Unfortunately the (simple) layout somehow doesn't go with the two backgrounds. My layout is basically one centered column with fixed width: #main_container { margin: 0 auto; min-height: 100%; width: 800px; } Furthermore it's necessary to stretch the column to a minimum height of 100%, since there are quite some pages with only little content. The following CSS styles take care of that: html { height: 100%; } body { margin: 0; height: 100%; padding: 0; } So far so good - until the two background image issue arrived... I tried the following solutions Two absolute positioned divs behind the main container One image defined with the body, one with the html CSS class One image defined with the body, the other one with a large div begind the main container With either one of them, the dynamic height solution was ruined. Either the main container didn't stretch to 100% when it was too small, or the background remained at 100% when the content was actually longer

    Read the article

  • HTML/CSS - No 100% height on div in IE

    - by Jordan Rynard
    Okay, so I've got a problem - and I'd love to have it fixed. I am using my favourite way of setting up a simple header/content/footer layout. The problem is that any elements I add to the 'content' div of my layout can not be expanded to 100% in Internet Explorer (as far as I know, IE only). I understand there is no height declared to the 'content' element, but because of the style of its positioning (declaring an absolute top AND bottom), the element fills the desired area. (The content element has a background color defined so you can see that the div is in fact filling between both the header and the footer.) So my problem is, since the div is clearly expanded between the two, why can't a child be set to 100% to fill that area? If anyone has any solutions, I'd love to hear them. (I'm looking for a solution that won't involve designing by an entire different layout.. or at least perhaps an explanation of why this is happening. I'm assuming at this point it's because of the lack of a height declaration -- but the div is expanded, so I don't get it!) You can view a page of the example here: http://www.elizabethlouter.com/html/index.html And here is the code as used on the page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="robots" content="noindex" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>No 100% height on 'content' child div in IE</title> </head> <style> html, body { width:100%; height:100%; margin:0px; padding:0px; } body { position:relative; } #wrapper { position:absolute; top:0px; width:960px; height:100%; left:50%; margin-left:-480px; } #header{ position:absolute; top:0px; left:0px; width:100%; height:200px; background-color:#999; } #content{ position:absolute; top:100px; bottom:50px; left:0px; width:100%; background-color:#F7F7F7; } #content_1{ width:200px; background-color:black; height:100%; } #footer{ position:absolute; bottom:0px; left:0px; width:100%; height:50px; background-color:#999; } </style> <body> <div id="wrapper"> <div id="header"> </div> <div id="content"> <div id="content_1"> </div> </div> <div id="footer"> </div> </div> </body> </html>

    Read the article

  • [ASP.NET 4.0] Persisting Row Selection in Data Controls

    - by HosamKamel
    Data Control Selection Feature In ASP.NET 2.0: ASP.NET Data Controls row selection feature was based on row index (in the current page), this of course produce an issue if you try to select an item in the first page then navigate to the second page without select any record you will find the same row (with the same index) selected in the second page! In the sample application attached: Select the second row in the books GridView. Navigate to second page without doing any selection You will find the second row in the second page selected. Persisting Row Selection: Is a new feature which replace the old selection mechanism which based on row index to be based on the row data key instead. This means that if you select the third row on page 1 and move to page 2, nothing is selected on page 2. When you move back to page 1, the third row is still selected. Data Control Selection Feature In ASP.NET 3.5 SP1: The Persisting Row Selection was initially supported only in Dynamic Data projects Data Control Selection Feature In ASP.NET 4.0: Persisted selection is now supported for the GridView and ListView controls in all projects. You can enable this feature by setting the EnablePersistedSelection property, as shown below: Important thing to note, once you enable this feature you have to set the DataKeyNames property too because as discussed the full approach is based on the Row Data Key Simple feature but  is a much more natural behavior than the behavior in earlier versions of ASP.NET. Download Demo Project

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >