CODEWITHSUNDEEP
css
Chowlett
Chowlett

Reputation: 46667

Fill width with two divs, one of which might be absent

I'm trying to create a very basic chat system, part of which will be the entry box for lines of chat. If the user is logged in, that's all I need; but if the user is not logged in, I want an additional text box to allow them to enter their name.

I have the following HTML (although of course it can be altered):

<form>
  <input type="text" placeholder="Name?" name="name" id="name"> <!-- This line may be absent -->
  <input type="text" placeholder="What do you want to say?" name="say" id="say">
</form>

Is it possible to style this with CSS so that #name and #say together fill the whole width of the form, with #say taking all the width if #name is absent?

(The backend is Ruby on Rails; I have javascript available, so can use a JS solution, but would prefer pure CSS if possible)

Upvotes: 1

Views: 135

Answers (2)

Faust
Faust

Reputation: 15404

For a simple, all-CSS solution, try the first-child pseudo-selector to overide a default half-width when #say is the first element inside of the form:

#name, #say{width:100px}
#say:first-child{width:200px}

This works perfectly fine with your simple markup structure. (I've tested it)

Upvotes: 4

DouglasMarken
DouglasMarken

Reputation: 324

With whichever of the two languages you'll be using to determine whether the user is logged in, create a conditional statement that adds a html class to the input field that alters it's width say .input-full and .input-partial

IF user is logged in
    SET class to input-full
ELSE
    SET class to input-partial
ENDIF

sorry for the psedo code, then have appropriate CSS for each.

oooh, didn't see the CSS only, sorry. Without CSS3 and a disregard for IE I don't think you can do this with straight CSS.

Upvotes: 1

Related Questions