CODEWITHSUNDEEP
htmlcss
pushpraj
pushpraj

Reputation: 13679

how to dynamically change css class for html form elements based on other css class

I want - a responsive form which have different layout for desktop and mobile

I have

sample html

<form>
    <div class="gantry-width-40 rt-floatleft">
        <input class="gantry-width-70" type="text">
    </div>
    <div class="clear hidden-desktop"></div>
    <br class="hidden-desktop" />
    <div class="gantry-width-40 rt-floatleft">
        <input class="gantry-width-70" type="text">
    </div>
    <div class="clear"></div>
    <br />
    <textarea class="gantry-width-70"></textarea>
</form>

here are some screens to give you an idea

desktop view

desktop

mobile view

mobile

as you can see that the text boxes are too small for the mobile view

note that screens are cropped to hide blank space on the right

The reason is that text-boxes are 70% size of the container which is 40% of it's parent, which is fine in desktop view as they are placed side by side, but in mobile view they are in separate rows

so what I am looking for is to change the parent container's width to 100% of the available area in mobile view.

So how can I change the class of the container i.e. gantry-width-40 to gantry-width-90 based on the css of hidden-desktop or visible-desktop class?

I prefer for css only solution, other's are welcome too.

Upvotes: 0

Views: 880

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Why use different classes? You can use mediaqueries.

I made this small example:

<div id="parent">
    <div>text</div>
</div>

#parent {
    width: 50%;
    background: lightblue;
    padding: 5%;
}
#parent div {
    padding: 5%;
    background: lightgreen;
}
@media all and (max-width: 500px) {
    #parent {
        width: 90%;
    }
}

What is does: when the viewport is bigger than 500px the media query doesn't apply, making the parent div 50% of the viewports width.

Then when you resize the viewport (or look with a device with viewport smaller than 500px), the media query does apply. Making the parent div take up 90% of the width.

I created a JSFiddle for you, check here. Resize the result window to see what happens.

Upvotes: 2

Jorge Caballero
Jorge Caballero

Reputation: 749

Have you considered on using a CSS framework? I recommend you Zurb Foundation, the area you are looking for is this http://foundation.zurb.com/docs/components/grid.html

Upvotes: 0

Related Questions