I am working on a page where I am trying to, in Excel terms, freeze the Left column. When the user scrolls to the right, the leftcolumn needs to remain visible. The entire page is using divs, not tables. I'm freezing the left most divs using css:
.sticky-test {
position: -webkit-sticky;
position: sticky;
left: 0px;
}
It seems to work up when I scroll to a certain point. but eventfully disappear, The contents extend many inches off the screen. The sticky divs seem to disappear once I move past the original body contents.
Is there a solution to keep it sticky?
Here is some of the html:
<div class="d-flex flex-row nact-row">
<input type="hidden" class="nact-form-control" id="z0__LastName" name="[0].LastName" value="FNAME" />
<input type="hidden" class="nact-form-control" id="z0__FirstName" name="[0].FirstName" value="LNAME" />
<input type="hidden" class="nact-form-control" data-val="true" data-val-required="The NPI # Type 1 field is required." id="z0__NpiNumberType1" name="[0].NpiNumberType1" value="1225195811" />
<input type="hidden" class="nact-form-control" data-val="true" data-val-required="The Service Provider Id field is required." id="z0__ServiceProviderId" name="[0].ServiceProviderId" value="395" />
<div class="nact-tbl-display-long sticky-test nact-status-new">FNAME, LNAME</div>
<div class="nact-tbl-display">1225195811</div>
.
.
.
</div>
Here is what is happening. The fname, lname is sticky. If I keep scrolling over just a bit more (past the original body), it will disappear
Related
I have a webforms project in asp.net. I'm using bootstrap 3. I have an input control in a form group (in a panel). I cannot override the max width of my input control to make it fit into the col width I have set.
I've tried to amend/remove the input {max-width} attribute in Site.css but this doesn't make any difference. Any ideas?
<div class="row">
<div class="form-group" >
<label for="txtName" class="col-md-3 control-label">*Material Name:</label>
<div class="col-md-9">
<input runat="server" id="txtName" type="text" class="form-control" title="" required />
</div>
</div>
</div>
Site.css extract that I changed from max-width: 287px :
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 100%;
}
Use the developer to tools on any of the browser to check the element of input because you're using runat="server" for the input the id will render differently in the browser hence your styling is not applying. I've checked on my local dev with a demo page and the input id is being rendered as MainContent_txtName instead of txtName. Of course yours will/might be different. Once you have the correct id all you need to do is
#MainContent_txtName
{
max-width: 100px !important;
}
I hope that answers your question
There is a portion of a web app that I am writing that is being a particular pain to make look really nice and neat like I want it. I have a button with a fixed width next to a form that contains text, an input text box, and a submit button. I want the width of the input box to resize based on the width of the screen but I don't know how to do without making a piece fall onto the next line.
Here is a fiddle of the problem: http://jsfiddle.net/Yt3V2/
HTML:
<div class="wrapper">
<button type="button" class="new_button">Create New</button>
<form name="input" action="" method="post">
Search:
<input type="text" class="search_input"></input>
<input type="submit" value="Submit"></input>
</form>
</div>
CSS:
.new_button
{
float: left;
min-width: 120px;
}
.search_input
{
width: /* What could go here? */;
}
A lot of suggestions included making a table out of the CSS, which gets me pretty close but the text box will still get cut off: http://jsfiddle.net/G9pDw/
Is there any way to get the input text box to resize dynamically and still fit where I want it to?
According to this question : try changing :
<input type="text" class="search_input"></input>
to
<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>
JSFiddle
**Updated*************************
New JSfiddle
I'm trying to get an div with image background to appear to the right of a text box. I have tried Float = none, left, right, I have tried position and even played with margins but nothing seems to get it to stay.
<div id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat; margin-left: 245px; margin-top: 2px;"></div>
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
How's that work for ya?
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<div id="status" style="display:inline;background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></div>
float left and right try to throw your element as far to one side of the container as possible. If you want the element on the right side of a second element, put it after the second element in your HTML. Also, divs are block elements. Block elements want to be on their own line. Use an inline element (like a span), or set the display css property to inline on a block element you don't want on a new line.
EDIT: Here it is as a span for ya
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<span id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></span>
Just float:right the div and remove the 245px left margin so you aren't pushing the input too far away.
I have searched, and this post is closest, but not exactly the same. I am trying to have two spans next to each other, with percentage widths. However, when the window's width is decreased by the user's screen size or window resizing, the labels and input fields separate individually. I would like the label and input to be one unit, so that if the window is decreased, the second span will wrap below the first.
HTML:
<span><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></span>
<span><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></span>
CSS:
#startdate {
width: 30%;
display: inline-block;
}
#enddate {
width: 30%;
display: inline-block;
}
Here is a fiddle. If you want to test the resizing functionality, move the center bar to the right.
Fixed: http://jsfiddle.net/XceSq/1/
<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>
The span element is a textual container and does not support the width requirement you are aiming to achieve. The div element, however, is a layout container which will allow you to contain the two objects within a single block. Using display:inline-block, we're able to make sure that the two containers show up side by side.
Enjoy and good luck!
I face some layout differences in IE and in Chrome. I have searched Stack overflow high and low for solutions and tried some of it... I tried setting box-sizing to initial...it did not work...there fore tried setting height of the text box it did work but still a big differences. I also tried changing doctype to strict. I encounter this problem as part of my project.
The Problem:
I have form in a div tag. In the form there are 4 rows of text field. I put the preview on IE and the preview on Chrome side by side to compare and realise that it is the spacing between the text area that causes the differences in height.
The Code on my html file:
<div class="leftdetails">
<form class="form2" name="form2" method="post" action="">
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" class="regfields"/>
<br />
<label for="cdsid">CDSID: </label>
<input type="text" name="cdsid" id="cdsid" class="regfields"/>
<br />
<label for="mail">Mail Drop: </label>
<input type="text" name="mail" id="mail" class="regfields"/>
<br />
<label for="dateofbirth">D.O.B.: </label>
<input type="text" name="dateofbirth" id="dateofbirth" class="regfields"/>
<br />
</form>
</div>
The code on my CSS (external)
.leftdetails
{
font-family:Myriad Pro;
font-size:18px;
float:left;
width:50%;
text-align:center;
}
.regfields
{
width:200px;
height:20px;
vertical-align:bottom;
}
.form2
{
text-align:right;
margin-right:50px;
}
This is not published online yet therefore there is not link...but I will be glad to provide screenshot. Its a very minor difference but I just want to understand why.
Try to set the padding-top and padding-bottom to 0px in the regfields CSS class. Maybe also margin-top and margin-bottom
Try using a conditional IE statement in your CSS to target only the Internet Explorer browser.
If you don't know how to do so, examples can be found here